Question

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贝塞尔曲线(三阶)。贝塞尔曲线可以使用图形化工具自动生成控制点。