Controls

再生 / 停止

一時停止したアニメーションを再開したり、 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;

デモ

"PLAY"をクリックするとアニメーションが開始され、 "PAUSE"をクリックすると、アニメーションが停止します。

JavaScript

var playPause = anime({
  targets: '#playPause .el',
  translateX: 270,
  delay: function(el, i, l) { return i * 100; },
  direction: 'alternate',
  loop: true,
  autoplay: false,
  easing: 'easeInOutSine'
});
document.querySelector('#playPause .play').onclick = playPause.play;
document.querySelector('#playPause .pause').onclick = playPause.pause;

HTML

<div id="playPause">
  <div class="line">
    <div class="square shadow"></div>
    <div class="square el"></div>
  </div>
  <div class="line">
    <div class="square shadow"></div>
    <div class="square el"></div>
  </div>
  <div class="line">
    <div class="square shadow"></div>
    <div class="square el"></div>
  </div>
  <div class="line player">
    <button class="play">Play</button>
    <button class="pause">Pause</button>
  </div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}

.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

.player {
  opacity: .4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
  padding-bottom: 10px;
}

.player button {
  position: relative;
  display: block;
  margin: 0 0 0 -1px;
  padding: 5px 10px;
  font-size: 12px;
  text-transform: uppercase;
  border: 1px solid #000;
  background-color: transparent;
  color: #000;
}

リスタート

アニメーションを最初から開始します。

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;

デモ

"RESTART"をクリックするとアニメーションが最初から開始されます。

JavaScript

var restartAnim = anime({
  targets: '#restartAnim .el',
  translateX: 250,
  delay: function(el, i, l) { return i * 100; },
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutSine'
});
document.querySelector('#restartAnim .restart').onclick = restartAnim.restart;

HTML

<div id="restartAnim">
  <div class="line">
    <div class="square shadow"></div>
    <div class="square el"></div>
  </div>
  <div class="line">
    <div class="square shadow"></div>
    <div class="square el"></div>
  </div>
  <div class="line">
    <div class="square shadow"></div>
    <div class="square el"></div>
  </div>
  <div class="line player">
    <button class="restart">Restart</button>
  </div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}

.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

.player {
  opacity: .4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
  padding-bottom: 10px;
}

.player button {
  position: relative;
  display: block;
  margin: 0 0 0 -1px;
  padding: 5px 10px;
  font-size: 12px;
  text-transform: uppercase;
  border: 1px solid #000;
  background-color: transparent;
  color: #000;
}

逆再生

アニメーションを逆再生します。

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;

デモ

"REVERSE"をクリックするとアニメーションを逆再生します。

JavaScript

var reverseAnim = anime({
  targets: '#reverseAnim .el',
  translateX: 250,
  loop: true,
  delay: function(el, i, l) { return i * 200; },
  easing: 'easeInOutSine'
});
document.querySelector('#reverseAnim .reverse').onclick = function() {
  reverseAnim.play();
  reverseAnim.reverse();
}

HTML

<div id="reverseAnim">
  <div class="line">
    <div class="square shadow"></div>
    <div class="square el"></div>
  </div>
  <div class="line">
    <div class="square shadow"></div>
    <div class="square el"></div>
  </div>
  <div class="line">
    <div class="square shadow"></div>
    <div class="square el"></div>
  </div>
  <div class="line player">
    <button class="reverse">Reverse</button>
  </div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}

.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

.player {
  opacity: .4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
  padding-bottom: 10px;
}

.player button {
  position: relative;
  display: block;
  margin: 0 0 0 -1px;
  padding: 5px 10px;
  font-size: 12px;
  text-transform: uppercase;
  border: 1px solid #000;
  background-color: transparent;
  color: #000;
}

シーク

特定の時間(ミリ秒)にジャンプします。

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));
};

デモ

スライダを左右に動かすと、その時点でのアニメーションの状態が表示されます。

JavaScript

var seekAnim = anime({
  targets: '#seekAnim .el',
  translateX: 270,
  delay: function(el, i, l) { return i * 100; },
  elasticity: 200,
  easing: 'easeInOutSine',
  autoplay: false
});

var seekProgressEl = document.querySelector('#seekAnim .progress');
seekProgressEl.addEventListener('input', function() { 
  seekAnim.seek(seekAnim.duration * (seekProgressEl.value / 100));
});

['input','change'].forEach(function(evt) {
  seekProgressEl.addEventListener(evt, function() { 
    seekAnim.seek(seekAnim.duration * (seekProgressEl.value / 100));
  });
});

HTML

<div id="seekAnim">
  <div class="line">
    <div class="square shadow"></div>
    <div class="square el"></div>
  </div>
  <div class="line">
    <div class="square shadow"></div>
    <div class="square el"></div>
  </div>
  <div class="line">
    <div class="square shadow"></div>
    <div class="square el"></div>
  </div>
  <div class="line player"></div>
</div>
<input class="progress" step=".001" type="range" min="0" max="100" value="0">

CSS

.shadow {
  position: absolute;
  opacity: .2;
}

.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

.player {
  opacity: .4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
  padding-bottom: 10px;
}

タイムラインコントロール

他のanime.jsインスタンスと同様にタイムラインも操作することができます。

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));
});

デモ

各種コントローラを使って、アニメーションを操作することができます。

JavaScript

var controlsProgressEl = document.querySelector('#TLcontrols .progress');
var TLcontrols = anime.timeline({
  direction: 'alternate',
  loop: true,
  duration: 500,
  easing: 'easeInOutSine',
  update: function(anim) {
    controlsProgressEl.value = TLcontrols.progress;
  }
});
TLcontrols
  .add({
    targets: '#TLcontrols .square.el',
    translateX: 270,
  })
  .add({
    targets: '#TLcontrols .circle.el',
    translateX: 270,
  }, '-=100')
  .add({
    targets: '#TLcontrols .triangle.el',
    translateX: 270,
  }, '-=100');

document.querySelector('#TLcontrols .play').onclick = TLcontrols.play;
document.querySelector('#TLcontrols .pause').onclick = TLcontrols.pause;
document.querySelector('#TLcontrols .restart').onclick = TLcontrols.restart;
controlsProgressEl.addEventListener('input', function() {
  TLcontrols.seek(TLcontrols.duration * (controlsProgressEl.value / 100));
});
['input','change'].forEach(function(evt) {
  controlsProgressEl.addEventListener(evt, function() {
    TLcontrols.seek(TLcontrols.duration * (controlsProgressEl.value / 100));
  });
});

HTML

<div id="TLcontrols">
  <div class="line">
    <div class="square shadow"></div>
    <div class="square el"></div>
  </div>
  <div class="line">
    <div class="circle shadow"></div>
    <div class="circle el"></div>
  </div>
  <div class="line">
    <div class="triangle shadow"></div>
    <div class="triangle el"></div>
  </div>
  <div class="line player">
    <button class="play">Play</button>
    <button class="pause">Pause</button>
    <button class="restart">Restart</button>
    <input class="progress" step="2" type="range" min="0" max="100" value="0">
  </div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}

.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

.circle {
  border-radius: 50%;
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

.triangle {
  pointer-events: none;
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 14px 24px 14px;
  border-color: transparent transparent currentColor transparent;
}

.player {
  opacity: .4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
  padding-bottom: 10px;
}

.player button {
  position: relative;
  display: block;
  margin: 0 0 0 -1px;
  padding: 5px 10px;
  font-size: 12px;
  text-transform: uppercase;
  border: 1px solid #000;
  background-color: transparent;
  color: #000;
}