一、说明

之前写过一篇文章，主要介绍 BindingX 的缓动函数和颜色估值函数的使用，并且实现了一个简单的上弹菜单。

原文地址：

playground 地址 ：

文章中实现效果如下：

G2IF.gif

其实这个效果比较一般，BindingX 的演示有一个比较不错的效果如下面：

GI222F.gif

目前看主要有以下几点的不足：

  • 缓动函数用的不是很对，没有弹跳效果
  • 菜单时间太快，间距太短
  • 菜单收起效果比较差，没有跟随的效果

二、弹出菜单的优化

针对上面几点，做了几个优化。

1、缓动函数的弹跳效果

缓动函数之前使用的是 linear，没有什么效果，BindingX 预置的缓动函数其实很多，可以在 https://alibaba.github.io/bindingx/guide/cn_api_interpolator 中看到列表，为了做到弹跳效果使用了 easeOutBounce。

2、弹出的时间和机制控制（优化）

下面的是弹出时两个弹出菜单的表达式的变化

  {
    element: box1,
    property: 'transform.translateY',
    expression: {
      origin:'easeOutBounce(t,0,-150,800)'
    }
  },
  {
    element: box2,
    property: 'transform.translateY', 
    expression: {
      origin:'t <= 100 ? 0 : easeOutBounce(t-100,0,-300,700)'
    }
  },

第一个菜单其实是没变化的，就是正常弹出，不过距离调成 150，整体时间调成 800ms，效果更加明显。

这里的变化时在第二个弹出菜单的表达式：

t <= 100 ? 0 : easeOutBounce(t-100,0,-300,700)

我们都知道表达式的最终返回结果就是绑定的属性的值，这个点很关键，理解掉这句话，对于使用 BindingX 有很大的帮助。

上面表达式有几个地方需要说明一下：

  • t <= 100 ? 0 ：为了延迟 100ms 弹出第二个子菜单，因此在 t=[0, 100] 这个区间中，位置是不变动，表达式返回 0.
  • easeOutBounce(t-100,0,-300,700)：缓动函数各个属性参数就不再重复了，t-100 是因为需要延迟 100ms 才开始，而 0 和 -300 则是说明第二个子菜单的属性 transform.translateY 从 0 开始变化，移动 -300, -300 实际上就是 -300 - 0 ，并且延迟 100ms 之后，动画执行时间只有 700ms

3、菜单收起的优化

对于菜单收起，不需要弹跳效果了，而需要一个跟随效果，即 easeOutQuint 的效果。

两个弹出菜单的表达式变动代码如下：

{
  element: box1,
  property: 'transform.translateY',
  expression: {
    origin: 'easeOutQuint(t, 0-150, 150, 800)'
  }
},
{
  element: box2,
  property: 'transform.translateY',
  expression: {
    origin: 't <= 100 ? (0-300) : easeOutQuint(t-100, 0-300, 300, 700)'
  }
},

其实一样的，第一个子菜单没有什么变化，关键在第二个子菜单上。

't <= 100 ? (0-300) : easeOutQuint(t-100, 0-300, 300, 700)' 这个与上面弹出的不同的地方是 当 t=[0, 100] 的时候，需要固定位置为 -300，因为此时第二个子菜单的位置就是在 -300 上，其他的缓动函数的时间和变动等都一样。

最终效果如下：

1111111111GIF.gif

改动的优化结果在 playground 中也发了一份：

三、斜方向弹出收起

如果要实现斜方向弹出，有几种方式，最直接简单的方式就是同时去绑定 X 坐标 和 Y 坐标。

比如弹出的时候， box1 的绑定如下：

{
  element: box1,
  property: 'transform.translateY',
  expression: {
    origin:'easeOutBack(t,0,-150,800)'
  }
},
{
  element: box1,
  property: 'transform.translateX',
  expression: {
    origin:'easeOutBack(t,0,-150,800)'
  }
},

而收起的时候 box1 的绑定如下：

{
  element: box1,
  property: 'transform.translateY',
  expression: {
    origin: 'easeOutQuint(t, 0-150, 150, 800)'
  }
},
{
  element: box1,
  property: 'transform.translateX',
  expression: {
    origin: 'easeOutQuint(t, 0-150, 150, 800)'
  }
},

效果如下：

xGIF.gif

GIF 中回弹效果不明显，在 playground 上可以看到：