anime.js - にほんご。

Staggering

作成日: 2019-01-23

staggerの基本

staggerを使用すると、複数の要素を "継続する動きと後追いの動き"(アニメーションの12の基本原則の一つ) でアニメーションすることができます。

anime.stagger(value, options)

引数type内容必須
valuenumber、string、array変更する内容○
optionsobjectstaggerパラメータ☓
anime({
  targets: '.basic-staggering-demo .el',
  translateX: 270,
  delay: anime.stagger(100) // それぞれの要素を100msずつ遅延させます
});

デモ

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

delay = (100 * 0) ms
delay = (100 * 1) ms
delay = (100 * 2) ms
delay = (100 * 3) ms
delay = (100 * 4) ms
delay = (100 * 5) ms
JavaScript
var staggeringBasics = anime({
  targets: '#staggering-basics .el',
  translateX: 320,
  delay: anime.stagger(100) // それぞれの要素を100msずつ遅延させます
});
HTML
<div id="staggering-basics">
  <div class="label small">delay = (100 * 0) ms</div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
  <div class="label small">delay = (100 * 1) ms</div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
  <div class="label small">delay = (100 * 2) ms</div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
  <div class="label small">delay = (100 * 3) ms</div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
  <div class="label small">delay = (100 * 4) ms</div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
  <div class="label small">delay = (100 * 5) ms</div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
</div>
CSS
.shadow {
  position: absolute;
  opacity: .2;
}

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

.small {
  width: 18px;
  height: 18px;
}

.label {
  position: absolute;
  opacity: .5;
  text-align: left;
  padding-left: 38px;
}

.label.small {
  line-height: 20px;
}

開始タイミング

指定したタイミングでstagger効果を開始します。

anime.stagger(value, {start: startValue})

type内容
number、stringプロパティと同様です。Valuesを参照してください。
anime({
  targets: '.staggering-start-value-demo .el',
  translateX: 270,
  delay: anime.stagger(100, {start: 500}) // 開始タイミングを500ms遅延させて、それぞれの要素を100msずつ遅延させます。
});

デモ

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

delay = 500 + (100 * 0) ms
delay = 500 + (100 * 1) ms
delay = 500 + (100 * 2) ms
delay = 500 + (100 * 3) ms
delay = 500 + (100 * 4) ms
delay = 500 + (100 * 5) ms
JavaScript
var startValue = anime({
  targets: '#start-value .el',
  translateX: 320,
  delay: anime.stagger(100, {start: 500}) // 開始タイミングを500ms遅延させて、それぞれの要素を100msずつ遅延させます。
});
HTML
<div id="start-value">
  <div class="label small">delay = 500 + (100 * 0) ms</div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
  <div class="label small">delay = 500 + (100 * 1) ms</div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
  <div class="label small">delay = 500 + (100 * 2) ms</div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
  <div class="label small">delay = 500 + (100 * 3) ms</div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
  <div class="label small">delay = 500 + (100 * 4) ms</div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
  <div class="label small">delay = 500 + (100 * 5) ms</div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
</div>
CSS
.shadow {
  position: absolute;
  opacity: .2;
}

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

.small {
  width: 18px;
  height: 18px;
}

.label {
  position: absolute;
  opacity: .5;
  text-align: left;
  padding-left: 38px;
}

.label.small {
  line-height: 20px;
}

範囲指定

2つの数値間を均等に分割してアニメーションします。

anime.stagger([startValue, endValue])

type内容
'easingName'使用可能なイージング名は全て指定することができます。Easingを参照してください。
function(i)カスタムイージング関数を指定することができます。カスタムイージングを参照してください。
anime({
  targets: '.range-value-staggering-demo .el',
  translateX: 270,
  rotate: anime.stagger([-360, 360]), // -360degから360degの範囲を均等に分割して回転アニメーションします。
  easing: 'easeInOutQuad'
});

デモ

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

rotate = ((360 - (-360)) / 0) * 0
rotate = ((360 - (-360)) / 1) * 0
rotate = ((360 - (-360)) / 2) * 0
rotate = ((360 - (-360)) / 3) * 0
rotate = ((360 - (-360)) / 4) * 0
rotate = ((360 - (-360)) / 5) * 0
JavaScript
var rangeValue = anime({
  targets: '#range-value .el',
  translateX: 320,
  rotate: anime.stagger([-360, 360]), // -360degから360degの範囲を均等に分割して回転アニメーションします。
  easing: 'easeInOutQuad'
});
HTML
<div id="range-value">
  <div class="label small">rotate = ((360 - (-360)) / 0) * 0</div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
  <div class="label small">rotate = ((360 - (-360)) / 1) * 0</div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
  <div class="label small">rotate = ((360 - (-360)) / 2) * 0</div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
  <div class="label small">rotate = ((360 - (-360)) / 3) * 0</div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
  <div class="label small">rotate = ((360 - (-360)) / 4) * 0</div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
  <div class="label small">rotate = ((360 - (-360)) / 5) * 0</div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
</div>
CSS
.shadow {
  position: absolute;
  opacity: .2;
}

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

.small {
  width: 18px;
  height: 18px;
}

.label {
  position: absolute;
  opacity: .5;
  text-align: left;
  padding-left: 38px;
}

.label.small {
  line-height: 20px;
}

開始位置指定

指定した位置からstagger効果を開始します。

anime.stagger(value, {from: startingPosition})

optionstype内容
'first'(初期値)'string'最初の要素からstaggerを開始します。
'last''string'最後の要素からstaggerを開始します。
'last''string'中央の要素からstaggerを開始します。
indexnumber指定したインデックスのの要素からstaggerを開始します。
anime({
  targets: '.staggering-from-demo .el',
  translateX: 270,
  delay: anime.stagger(100, {from: 'center'})
});

デモ

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

JavaScript
var fromValue = anime({
  targets: '#from-value .el',
  translateX: 320,
  delay: anime.stagger(100, {from: 'center'})
});
HTML
<div id="from-value">
  <div class="square small shadow"></div>
  <div class="square small el"></div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
</div>
CSS
.shadow {
  position: absolute;
  opacity: .2;
}

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

.small {
  width: 18px;
  height: 18px;
}

direction(アニメーションの順序)

staggerの動作順序を変更します。

anime.stagger(value, {direction: 'reverse'})

options内容
'normal'(初期値)通常のstaggerです。アニメーションの順序が最初の要素から最後の要素の向きになります。
'reverse'逆順のstaggerです。アニメーションの順序が最後の要素から最初の要素の向きになります。
anime({
  targets: '.staggering-direction-demo .el',
  translateX: 270,
  delay: anime.stagger(100, {direction: 'reverse'})
});

デモ

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

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

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

.small {
  width: 18px;
  height: 18px;
}

easing(イージング)

イージングを使用してstaggerに時差を発生させます。

anime.stagger(value, {easing: 'easingName'})

type内容
'string'使用可能なイージング名は全て指定することができます。Easingを参照してください。
function(i)カスタムイージング関数を指定することができます。カスタムイージングを参照してください。
anime({
  targets: '.staggering-easing-demo .el',
  translateX: 270,
  delay: anime.stagger(300, {easing: 'easeOutQuad'})
});

デモ

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

JavaScript
var easing = anime({
  targets: '#easing .el',
  translateX: 320,
  delay: anime.stagger(300, {easing: 'easeOutQuad'})
});
HTML
<div id="easing">
  <div class="square small shadow"></div>
  <div class="square small el"></div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
</div>
CSS
.shadow {
  position: absolute;
  opacity: .2;
}

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

.small {
  width: 18px;
  height: 18px;
}

grid

2次元配列を基にripple effect(波紋効果)を発生させます。

anime.stagger(value, {grid: [rows, columns]})

type内容
array2要素の配列を指定します。 最初の要素は行数、2つ目の要素は列数です。
anime({
  targets: '.staggering-grid-demo .el',
  scale: [
    {value: .1, easing: 'easeOutSine', duration: 500},
    {value: 1, easing: 'easeInOutQuad', duration: 1200}
  ],
  delay: anime.stagger(200, {grid: [14, 5], from: 'center'})
});

デモ

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

JavaScript
var axis = anime({
  targets: '#axis .el',
  translateX: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'x'}),
  translateY: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'y'}),
  rotateZ: anime.stagger([0, 90], {grid: [14, 5], from: 'center', axis: 'x'}),
  delay: anime.stagger(200, {grid: [14, 5], from: 'center'}),
  easing: 'easeInOutQuad'
});
HTML
<div id="grid">
  <div class="grid">
    <div class="square small el"></div><!-- 計70個-->
  </div>
  <div class="grid">
    <div class="square small shadow"></div><!-- 計70個-->
  </div>
</div>
CSS
.shadow {
  position: relative;
  opacity: .2;
}

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

.small {
  width: 18px;
  height: 18px;
}

.grid {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  width: 290px;
}

axis

グリッドスターリング効果*1の方向を指定します。

*1 リンク先が存在せず、どのような効果か判断できませんでした。 グリッドが扇状に広がっていく効果かもしれません。
anime.stagger(value, {grid: [rows, columns], axis: 'x'})

パラメータ内容
'x'X軸に従います。
'y'Y軸に従います。
anime({
  targets: '.staggering-axis-grid-demo .el',
  translateX: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'x'}),
  translateY: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'y'}),
  rotateZ: anime.stagger([0, 90], {grid: [14, 5], from: 'center', axis: 'x'}),
  delay: anime.stagger(200, {grid: [14, 5], from: 'center'}),
  easing: 'easeInOutQuad'
});

デモ

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

JavaScript
var easing = anime({
  targets: '#easing .el',
  translateX: 320,
  delay: anime.stagger(300, {easing: 'easeOutQuad'})
});
HTML
<div id="axis">
  <div class="grid">
    <div class="square small el"></div><!-- 計70個-->
  </div>
  <div class="grid">
    <div class="square small shadow"></div><!-- 計70個-->
  </div>
</div>
CSS
.shadow {
  position: relative;
  opacity: .2;
}

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

.small {
  width: 18px;
  height: 18px;
}

.grid {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  width: 290px;
}


MIT license. © 2017 Julian Garnier.

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