anime.jsの使い方と設定方法

 

  anime.jsの使い方と設定方法

 

A

Anime.jsを使ってみたので、簡単に使い方を説明していこうと思います!一番下にまとめを作るので、わかりにくかったらそこだけ参照してください!anime.jsを使うにはjQueryと一緒で部分で
を読み込ませるだけです。

5

まずは、translateX: number,につてです。translateXは横に動きます。ここでは600に指定しています。次にdelay:0 [number, function (el, index, total)] についてです。アニメーションの時間調整に使えます。上記のアニメーションはdelayを [2000] に設定しています。また、loop:false [number, boolean]は loop: 5 と設定しているため、5回動いたら止まります。

Y

上記のアニメーションは loop : true なので、ずっと動き続けます。次に、translateY: number, についてです。translateXとは違い縦に動きます。ここでは300に指定しています。

R

direction:‘normal’ [‘normal’, ‘reverse’, ‘alternate’] は アニメーションの動きを指定できます。normalが通常の動き、reverseが反対の動き、alternateが往復の動きです。ここではreverseを使ってみたいと思います。

Al

ここでの direction: は alternate にしてみました!また、ここで上記のアニメーションが余計に回っているかと思います。rotate: ‘number turn’,を指定しているからです。ここでは ’20turn’ と設定しています。

C

次は、borderRadius: [‘0em’, ‘2em’] を使い動きに合わせて、ボールのようにしています。また、backgroundColor: [{value: ‘rgb(39,100,50)’},{value: ‘hsl(255,100%,60%)’}] カラーも指定していて動くと同時に色が変わるのがわかると思います。

次はちょっと激しめにボックスを動かしてみたいと思います。 Rough ball…

R

translateX: [{value:600},{value:200},{value:400},{value:100}],
translateY: [{value:50},{value:100},{value:150},{value:10}],

上記のように書くことによって、動きを制限できます。

いかがでしょうか?anime.jsって面白いですね!

詳しいDEMOはanime.jsの公式サイトをご覧ください。

一番最後のコードを下記に記載、こちらをぜひ参考にしてみてください!

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です