Function Based Parameters

アニメーションの全てのターゲットに対して、 異なるパラメータを定義します。 関数は引数として、target、index、targetsLengthを受け取ります。

anime({
  targets: 'div',
  translateX: 250,
  rotate: 180,
  duration: function(target) {
    // 全てのdivの'data-duration'属性に基づいた時間。
    return target.getAttribute('data-duration');
  },
  delay: function(target, index) {
    // 全てのdivを昇順に100msをずつ(index * 100ms)遅延させます。
    return index * 100;
  },
  elasticity: function(target, index, totalTargets) {
    // 全てのdivに対して、降順に弾性を付与します。(後のdivの方が弾性が大きくなります)
    return 200 + ((totalTargets - index) * 200);
  }
});

duration(時間)

デモ

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

JavaScript

var functionBasedDuration = anime({
  targets: '#functionBasedDuration .el',
  translateX: 250,
  direction: 'alternate',
  duration: function(el, i, l) {
    return 1000 + (i * 1000);
  }
});

HTML

<div id="functionBasedDuration">
  <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>

CSS

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

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

delay(遅延)

デモ

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

JavaScript

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

HTML

<div id="functionBasedDelay">
  <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>

CSS

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

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

elasticity(弾性)

デモ

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

JavaScript

var functionBasedElasticity = anime({
  targets: '#functionBasedElasticity .el',
  translateX: 250,
  direction: 'alternate',
  elasticity: function(el, i, l) {
    return (200 + i * 200);
  }
});

HTML

<div id="functionBasedElasticity">
  <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>

CSS

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

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

組み合わせ

デモ

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

JavaScript

var combinedFunctionBasedProp = anime({
  targets: '#combinedFunctionBasedProp .el',
  translateX: 100,
  translateX: 250,
  rotate: 180,
  duration: function(target) {
    // 全てのdivの'data-duration'属性に基づいた時間。
    return target.getAttribute('data-duration');
  },
  delay: function(target, index) {
    // 全てのdivを昇順に100msをずつ(index * 100ms)遅延させます。
    return index * 100;
  },
  elasticity: function(target, index, totalTargets) {
    // 全てのdivに対して、降順に弾性を付与します。(後のdivの方が弾性が大きくなります)
    return 200 + ((totalTargets - index) * 200);
  },
  direction: 'alternate',
});

HTML

<div id="combinedFunctionBasedProp">
  <div class="line">
    <div class="square shadow"></div>
    <div class="square el" data-duration="2000"></div>
  </div>
  <div class="line">
    <div class="square shadow"></div>
    <div class="square el" data-duration="1500"></div>
  </div>
  <div class="line">
    <div class="square shadow"></div>
    <div class="square el" data-duration="1000"></div>
  </div>
</div>

CSS

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

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