当前位置: 首页 > 文档资料 > BindingX 中文文档 >

差值器

优质
小牛编辑
138浏览
2023-12-01

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