anime.js - にほんご。

Playback

更新日: 2018-09-03

再生、一時停止、リスタート、アニメーションまたは、タイムラインのシーク(検索)ができます。

再生 / 停止

var playPauseAnim = anime({
  targets: 'div',
  translateX: 250,
  direction: 'alternate',
  loop: true,
  autoplay: false // 自動再生を禁止します。
});

playPauseAnim.play(); // 手動で再生
playPauseAnim.pause(); // 手動で停止

デモ

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

JavaScript
var playPause = anime({
  targets: '#playPause .el',
  translateX: 250,
  delay: function(el, i, l) { return i * 100; },
  direction: 'alternate',
  loop: true,
  autoplay: false
});

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

リスタート

var restartAnim = anime({
  targets: 'div',
  translateX: 250,
  direction: 'alternate',
  loop: true,
  autoplay: false
});

restartAnim.restart(); // アニメーションをリスタートし、ループ回数、再生方向をリセットします。

デモ

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

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

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

逆再生

var reverseAnim = anime({
  targets: 'div',
  translateX: 250,
  direction: 'alternate',
  loop: true
});

reverseAnim.reverse(); // アニメーションの再生方向を変更します。

デモ

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

JavaScript
var reverseAnim = anime({
  targets: '#reverseAnim .el',
  translateX: 250,
  duration: 2000,
  delay: function(el, i, l) { return i * 200; }
});

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

シーク

アニメーションや、タイムラインを指定した時間の状態に変更します。

var seekAnim = anime({
  targets: 'div',
  translateX: 250,
  delay: function(el, i, l) { return i * 100; },
  elasticity: 200,
  autoplay: false
});

seekAnim.seek(500); // アニメーションを500ms時点の状態に変更します。

デモ

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

JavaScript
var seekAnim = anime({
  targets: '#seekAnim .el',
  translateX: 250,
  delay: function(el, i, l) { return i * 100; },
  elasticity: 200,
  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;
}

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

デモ

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

JavaScript
var controlsProgressEl = document.querySelector('#TLcontrols .progress');

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

TLcontrols
  .add({
    targets: '#TLcontrols .square.el',
    translateX: [ { value: 80 }, { value: 160 }, { value: 250 } ],
    translateY: [ { value: 30 }, { value: 60 }, { value: 60 } ],
    duration: 3000,
    offset: 0
  })
  .add({
    targets: '#TLcontrols .circle.el',
    translateX: [ { value: 80 }, { value: 160 }, { value: 250 } ],
    translateY: [ { value: 30 }, { value: -30 }, { value: -30 } ],
    duration: 3000,
    offset: 0
  })
  .add({
    targets: '#TLcontrols .triangle.el',
    translateX: [ { value: 80 }, { value: 250 } ],
    translateY: [ { value: -60 }, { value: -30 }, { value: -30 } ],
    duration: 3000,
    offset: 0
  });

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

MIT license. © 2017 Julian Garnier.

このコンテンツはJulian Garnier(juliangarnier)によるanime.jsドキュメントを翻訳/改変したものです。