Moto.js

Namespace: moto

moto

Namespaces

curve
easing

Methods

moto.chain (animes)Anime static

依次执行多个动画。

可以添加多个参数：chain(animeA, animeB, ...)

Name Type Description
animes Anime repeatable

多个动画实例
Returns:
Type Description
Anime
Example
import {chain, tween} from '@tuia/moto.js'

// 放大后在位移
chain(
  tween({from: 1, to: 2}),
  tween({from: 0, to: 100})
).start(v => console.log(v))

moto.composite (anime)Anime static

同时执行多个动画。

Name Type Description
anime object.<string, Anime>

多个动画实例
Returns:
Type Description
Anime
Example
import {composite, tween} from '@tuia/moto.js'

// 放大后在位移
composite({
  scale: tween({from: 1, to: 2}),
  x: tween({from: 0, to: 100})
}).start(v => {
  console.log(v.scale, v.x)
})

moto.tween (option)Anime static

通过给定初始状态、结束状态和过度时间来实现一个补间动画。

Name Type Description
option object

tween 函数参数

Name Type Default Description
from object | number

初始状态：{x: 0, y: 0} 或者 0
to object | number

结束状态：{x: 10, y: 10} 或者 10
duration number 1 optional

动画时长：单位s
ease function t=>t optional

时间函数：t => t 或者 t => t ** 2
yoyo number 0 optional

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

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

// 创建一个补间动画
tween({
  from: 0,
  to: 1,
  duration: .5
}).start(v => {
  console.log(v)
})