一、说明

之前写过一篇文章,主要介绍 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 上可以看到: