BindingX上弹菜单优化即缓动函数的进阶使用
一、说明
之前写过一篇文章,主要介绍 BindingX
的缓动函数和颜色估值函数的使用,并且实现了一个简单的上弹菜单。
原文地址:
playground 地址 :
文章中实现效果如下:
其实这个效果比较一般,BindingX 的演示有一个比较不错的效果如下面:
目前看主要有以下几点的不足:
- 缓动函数用的不是很对,没有弹跳效果
- 菜单时间太快,间距太短
- 菜单收起效果比较差,没有跟随的效果
二、弹出菜单的优化
针对上面几点,做了几个优化。
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)
我们都知道
上面表达式有几个地方需要说明一下:
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 上,其他的缓动函数的时间和变动等都一样。
最终效果如下:
改动的优化结果在 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)'
}
},
效果如下:
GIF 中回弹效果不明显,在 playground 上可以看到:
文章版权:Postbird-There I am , in the world more exciting!
本文链接:http://www.ptbird.cn/bindingx-timing-more.html
转载请注明文章原始出处 !