Moto.js

Namespace: curve

moto.curve

Methods

moto.curve.bezier (option)Anime static

实现二次贝塞尔曲线运动。

Name Type Description
option object

参数对象

Name Type Default Description
points array.<Point>

包含起始点(p0)，控制点(p1)和结束点(p2)的数组
duration number 1 optional

动画时长，单位 s，默认：1s
ease function t => t optional

时间函数，默认：t => t
yoyo number 0 optional

回荡次数，默认：0
loop number 0 optional

循环次数，默认：0
Returns:
Type Description
Anime
Example
// 创建一个二次贝塞尔运动动画
import {curve} from '@tuia/moto.js'
curve.bezier({
  points: [
    {x: 0, y: 0},
    {x: 100, y: 100},
    {x: 200, y: 0}
  ]
}).start(v => console.log(v))

moto.curve.catmullRom (option)Anime static

实现一个 Catmull Rom 曲线运动。

Name Type Description
option object

参数对象

Name Type Default Description
points array.<Point>

路径点数组
speed number 10 optional

移动速度
loop boolean optional

是否自动闭合路径
Returns:
Type Description
Anime
Example
// 创建一个 Catmull Rom 运动动画
import {curve} from '@tuia/moto.js'
curve.catmullRom({
  points: [
    {x: 0, y: 0},
    {x: 100, y: 100},
    {x: 200, y: 0}
  ]
}).start(v => console.log(v))

moto.curve.cubicBezier (option)Anime static

实现一个三次贝塞尔曲线运动。

Name Type Description
option object

参数对象

Name Type Default Description
points array.<Point>

包含起始点(p0)，控制点(p1,p2)和结束点(p3)的数组
duration number 1 optional

动画时长，单位 s，默认：1s
ease function t => t optional

时间函数，默认：t => t
yoyo number 0 optional

回荡次数，默认：0
loop number 0 optional

循环次数，默认：0
Returns:
Type Description
Anime
Example
import {curve} from '@tuia/moto.js'

// 创建一个三次贝塞尔运动动画

curve.cubicBezier({
  points: [
    {x: 0, y: 0},
    {x: 100, y: 100},
    {x: 200, y: 0},
    {x: 300, y: 100}
  ]
}).start(v => console.log(v))