anime.js logo v4 Anime.js | JavaScript 动画引擎

时间轴 方法

自 4.0.0 起

sync() V4

将 JS 动画、WAAPI 动画、定时器、时间轴甚至原生 WAAPI 动画 同步到时间轴。

const tlChild = createTimeline().add(target, { x: 100 }).add(target, { y: 100 });

createTimeline().sync(tlChild);

Tween 值组合在创建时间轴时处理，添加时不会影响时间轴的现有子项。

参数

名称 接受
已同步 JSAnimation | 定时器 | 时间轴 | Anime.js WAAPI 动画 | WAAPI 动画
位置 (可选) 时间位置

返回

时间轴本身

可以与其他时间轴方法链式调用。

sync() 代码示例

import { createTimeline, animate, waapi } from 'animejs';

const circleAnimation = waapi.animate('.circle', {
  x: '15rem'
});

const tlA = createTimeline()
.sync(circleAnimation)
.add('.triangle', {
  x: '15rem',
  duration: 2000,
})
.add('.square', {
  x: '15rem',
});

const tlB = createTimeline({ defaults: { duration: 2000 } })
.add(['.triangle', '.square'], {
  rotate: 360,
}, 0)
.add('.circle', {
  scale: [1, 1.5, 1],
}, 0);

const tlMain = createTimeline()
.sync(tlA)
.sync(tlB, '-=2000');
<div class="large row">
  <div class="medium pyramid">
    <div class="triangle"></div>
    <div class="square"></div>
    <div class="circle"></div>
  </div>
</div>
上一个 下一个