LogoArcartX Doc
内置动画对象

Bezier-贝塞尔曲线插值

贝塞尔曲线插值对象及其函数

不相信自己的人总是在说谎

Bezier是一个基于三次贝塞尔曲线的插值对象,通过控制点可以创建自定义的动画曲线。

实例化方式

Bezier含参实例化

  • 描述:创建一个贝塞尔曲线插值实例。
  • 参数
    • start:数值类型,起始值
    • end:数值类型,结束值
    • x1:数值类型,第一个控制点的x坐标(0-1)
    • y1:数值类型,第一个控制点的y坐标(0-1)
    • x2:数值类型,第二个控制点的x坐标(0-1)
    • y2:数值类型,第二个控制点的y坐标(0-1)
    • transferTime:长整型,过渡时间(毫秒)
  • 调用示例
Bezier(0, 100, 0.25, 0.1, 0.25, 1.0, 1000) // 1秒内从0到100,使用ease曲线

预设曲线参数

常用的贝塞尔曲线预设值:

  • ease: (0.25, 0.1, 0.25, 1.0)
  • easeIn: (0.42, 0, 1.0, 1.0)
  • easeOut: (0, 0, 0.58, 1.0)
  • easeInOut: (0.42, 0, 0.58, 1.0)

函数

get()

  • 获取当前插值计算的结果
  • 参数:无
  • 返回值:数值类型
  • 说明:根据当前时间计算贝塞尔曲线上的对应值
  • 调用示例
Bezier(0, 100, 0.25, 0.1, 0.25, 1.0, 1000).get()

reset()

  • 重置插值器状态
  • 参数:无
  • 返回值:无
  • 说明:重置计时器并清除反向状态,重新开始动画
  • 调用示例
Bezier(0, 100, 0.25, 0.1, 0.25, 1.0, 1000).reset()

reverse()

  • 反转动画方向
  • 参数:无
  • 返回值:无
  • 说明:将动画方向反转,从当前位置开始向起始值过渡
  • 调用示例
Bezier(0, 100, 0.25, 0.1, 0.25, 1.0, 1000).reverse()

类型转换

Bezier对象支持以下类型转换:

  • 数值:返回当前插值计算的结果
  • 布尔值:当前值大于0时返回true,否则返回false
  • 字符串:返回当前插值计算结果的字符串表示

Bezier对象支持数学运算,可以直接参与计算表达式。

On this page