anime.js - にほんご。

Animation Parameters

更新日: 2018-06-25

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

名称初期値type説明
loopfalsenumberbooleanループ回数を指定します。 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ドキュメントを翻訳/改変したものです。