Question

play / pause（暂停/播放）

播放暂停的动画，如果autoplay 参数设置为false，则启动动画。

animation.play();

暂停正在运行的动画。

animation.pause();

var animation = anime({
  targets: '.play-pause-demo .el',
  translateX: 270,
  delay: function(el, i) { return i * 100; },
  direction: 'alternate',
  loop: true,
  autoplay: false,
  easing: 'easeInOutSine'
});

document.querySelector('.play-pause-demo .play').onclick = animation.play;
document.querySelector('.play-pause-demo .pause').onclick = animation.pause;

restart（重新开始）

从动画的初始值重新开始动画。

animation.restart();

var animation = anime({
  targets: '.restart-demo .el',
  translateX: 250,
  delay: function(el, i) { return i * 100; },
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutSine'
});

document.querySelector('.restart-demo .restart').onclick = animation.restart;

reverse（反转方向）

反转动画的方向。

animation.reverse();

var animation = anime({
  targets: '.reverse-anim-demo .el',
  translateX: 270,
  loop: true,
  delay: function(el, i) { return i * 200; },
  easing: 'easeInOutSine'
});

document.querySelector('.reverse-anim-demo .reverse').onclick = animation.reverse;

seek（瞬移）

跳转到特定时间（以毫秒为单位）。

animation.seek(timeStamp);

也可用于在滚动时控制动画。

animation.seek((scrollPercent / 100) * animation.duration);

var animation = anime({
  targets: '.seek-anim-demo .el',
  translateX: 270,
  delay: function(el, i) { return i * 100; },
  elasticity: 200,
  easing: 'easeInOutSine',
  autoplay: false
});

var seekProgressEl = document.querySelector('.seek-anim-demo .progress');
seekProgressEl.oninput = function() {
  animation.seek(animation.duration * (seekProgressEl.value / 100));
};

时间轴控制

时间轴控制与动画控制的方法一样。

timeline.play();
timeline.pause();
timeline.restart();
timeline.seek(timeStamp);

var controlsProgressEl = document.querySelector('.timeline-controls-demo .progress');

var tl = anime.timeline({
  direction: 'alternate',
  loop: true,
  duration: 500,
  easing: 'easeInOutSine',
  update: function(anim) {
    controlsProgressEl.value = tl.progress;
  }
});

tl
.add({
  targets: '.timeline-controls-demo .square.el',
  translateX: 270,
})
.add({
  targets: '.timeline-controls-demo .circle.el',
  translateX: 270,
}, '-=100')
.add({
  targets: '.timeline-controls-demo .triangle.el',
  translateX: 270,
}, '-=100');

document.querySelector('.timeline-controls-demo .play').onclick = tl.play;
document.querySelector('.timeline-controls-demo .pause').onclick = tl.pause;
document.querySelector('.timeline-controls-demo .restart').onclick = tl.restart;

controlsProgressEl.addEventListener('input', function() {
  tl.seek(tl.duration * (controlsProgressEl.value / 100));
});