anime.js - にほんご。

Helpers

更新日: 2018-09-03

anime.speed = x

全てのアニメーション速度を変更します。 (0~1の範囲を指定)

anime.speed = .5; // 全てのアニメーション速度を元の速度の半分にします。

anime.running

アクティブな全てのアニメーションのインスタンスを配列で返します。

anime.running;

anime.remove(target)

アニメーションから、1つまたは、複数の要素を削除します。

anime.remove('.item-2'); // 'item-2'クラスを持った全ての要素を削除します。

anime.getValue(target, property)

任意の要素から、現時点での有効な値を返します。

anime.getValue('div', 'translateX'); // '100px'を返します。

anime.path(pathEl)

モーションパスアニメーションで使用するパスを生成します。 DOMまたは、CSSセレクタを指定することができます。

デモはこちら

var path = anime.path('svg path', 'translateX'); // path(attribute)を返します。

anime.setDashoffset(pathEl)

線画アニメーションのヘルパーです。 stroke-dasharrayにパスの長さを設定し、その値を返します。

デモはこちら

anime({
  targets: '.shape path',
  strokeDashoffset: [anime.setDashoffset, 0]
});

anime.easings

ビルトインイージング関数のリストを返します。

anime.easings;

anime.bezier(x1, x2, y1, y2)

カスタムベジェ曲線のイージング関数を返します。

anime.bezier(x1, x2, y1, y2); // function(t)を返します。

anime.timeline()

タイムラインを生成し、他のアニメーションインスタンスと同期します。

デモはこちら

var timeline = anime.timeline();
timeline.add([instance1, instance2, ...]);

anime.random(x, y)

2つの数値間で乱数を生成します。

anime.random(10, 40); // 10~40の間の数値の中からランダムに返します。

MIT license. © 2017 Julian Garnier.

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