anime.js - にほんご。

Animation Parameters

更新日: 2018-11-08

アニメーションの再生方向や、ループ回数、自動再生を定義するパラメータです。

名称初期値type説明
loopfalsenumber, booleanループ回数を指定します。 trueの場合は無限ループになります。 falseの場合はループしません。
direction'normal''normal', 'reverse', 'alternate'アニメーションの再生方向を指定します。 reverseの場合は逆再生になります。 alternateの場合、再生回数に応じて、 通常再生→逆再生→通常再生→・・・と繰り返します。
autoplaytruebooleanfalseの場合、自動再生しません。
anime({
  targets: 'div',
  translateX: 100,
  duration: 2000,
  loop: 3, // アニメーションを3回繰り返します。
  direction: 'reverse', // アニメーションを逆再生します(3回とも)。
  autoplay: false // 初期状態はアニメーションを動かしません。
});

再生方向指定(alternate)

デモ

要素をクリックするとアニメーションを開始します。

JavaScript
var alternate = anime({
  targets: '#alternate .el',
  translateX: 250,
  direction: 'alternate'
});
HTML
<div id="alternate">
  <div class="square shadow"></div>
  <div class="square el"></div>
</div>
CSS
.shadow {
  position: absolute;
  opacity: .2;
}

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

再生方向(逆再生)

デモ

要素をクリックするとアニメーションを開始します。

JavaScript
var reverse = anime({
  targets: '#reverse .el',
  translateX: 250,
  direction: 'reverse'
});
HTML
<div id="reverse">
  <div class="square shadow"></div>
  <div class="square el"></div>
</div>
CSS
.shadow {
  position: absolute;
  opacity: .2;
}

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

ループ(N回)

デモ

要素をクリックするとアニメーションを開始します。

JavaScript
var loop = anime({
  targets: '#loop .el',
  translateX: 250,
  loop: 3
});
HTML
<div id="loop">
  <div class="square shadow"></div>
  <div class="square el"></div>
</div>
CSS
.shadow {
  position: absolute;
  opacity: .2;
}

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

ループalternate(N回)

デモ

要素をクリックするとアニメーションを開始します。

JavaScript
var loopAlternate = anime({
  targets: '#loopAlternate .el',
  translateX: 250,
  loop: 3,
  direction: 'alternate'
});
HTML
<div id="loopAlternate">
  <div class="square shadow"></div>
  <div class="square el"></div>
</div>
CSS
.shadow {
  position: absolute;
  opacity: .2;
}

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

ループ逆再生(N回)

デモ

要素をクリックするとアニメーションを開始します。

JavaScript
var loopReverse = anime({
  targets: '#loopReverse .el',
  translateX: 250,
  loop: 3,
  direction: 'reverse'
});
HTML
<div id="loopReverse">
  <div class="square shadow"></div>
  <div class="square el"></div>
</div>
CSS
.shadow {
  position: absolute;
  opacity: .2;
}

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

無限ループ

デモ

JavaScript
var infiniteLoop = anime({
  targets: '#infiniteLoop .el',
  translateX: 250,
  loop: true
});
HTML
<div id="infiniteLoop">
  <div class="square shadow"></div>
  <div class="square el"></div>
</div>
CSS
.shadow {
  position: absolute;
  opacity: .2;
}

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

無限ループalternate

デモ

JavaScript
var infiniteLoopAlternate = anime({
  targets: '#infiniteLoopAlternate .el',
  translateX: 250,
  direction: 'alternate',
  loop: true
});
HTML
<div id="infiniteLoopAlternate">
  <div class="square shadow"></div>
  <div class="square el"></div>
</div>
CSS
.shadow {
  position: absolute;
  opacity: .2;
}

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

無限ループ逆再生

デモ

JavaScript
var infiniteLoopReverse = anime({
  targets: '#infiniteLoopReverse .el',
  translateX: 250,
  direction: 'reverse',
  loop: true
});
HTML
<div id="infiniteLoopReverse">
  <div class="square shadow"></div>
  <div class="square el"></div>
</div>
CSS
.shadow {
  position: absolute;
  opacity: .2;
}

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

MIT license. © 2017 Julian Garnier.

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