差值器
BindingX
预置了一组缓动函数,可以在timing
中使用缓动函数以完成更复杂的动画。
API
easingFunction(t, begin, changeBy, duration)
入参:
t
: 时间值,动画流逝的时间begin
: 属性起始值changeBy
: 属性变化值。即(结束值-起始值)duration
: 动画时长
返回值:
Void
注:
easingFunction
以具体函数代替,比如easeInSine
特别地,使用cubicBezier
函数定制贝塞尔曲线,其定义如下:
cubicBezier(t, begin, changeBy, duration, controlX1, controlY1, controlX2, controlY2)
* 入参: * `t`: 时间值,动画流逝的时间 * `begin`: 属性起始值 * `changeBy`: 属性变化值。即(结束值-起始值) * `duration`: 动画时长 * `controlX1`: 第一个控制点x坐标 * `controlY1`: 第一个控制点y坐标 * `controlX2`: 第二个控制点x坐标 * `controlY2`: 第二个控制点y坐标
返回值:
Void
使用示例
const bindingx = ...//require module
let result = bindingx.bind({
eventType:'timing',
props:
[
{
element:my,
property:'transform.translateX',
expression:'easeOutElastic(t,0,500,2000)'
]
},function(e){
//TODO
})
预置缓动函数列表
linear
easeInSine
easeOutSine
easeInOutSine
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInBack
easeOutBack
easeInOutBack
easeInElastic
easeOutElastic
easeInOutElastic
easeInBounce
easeOutBounce
easeInOutBounce
cubicBezier
这里封装30组常用的缓动函数,其函数图像参考easing.net。如果仍然满足不了需求,可以使用cubicBezier
贝塞尔曲线(三阶)。贝塞尔曲线可以使用图形化工具自动生成控制点。