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

Javascript
スポンサーリンク

 

  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の公式サイトをご覧ください。

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

var sample5 = anime({
  targets: '#sample5 .ball',//idもしくはクラス名を記載
  translateX: [{value:600},{value:200},{value:400},{value:100}],//横の移動範囲の指定
  translateY: [{value:150},{value:100},{value:150},{value:200}],//縦の移動範囲の指定
  direction: 'alternate',//アニメーションの往復指定
  backgroundColor: [{value: 'rgb(50,50,50)'},{value: 'hsl(255,40%,60%)'}],//背景色の変更
  easing: 'easeOutExpo',
  borderRadius: ['0em', '2em'], //要素を丸くする
  rotate: '100turn', //アニメーションの回転数
  loop: true //アニメーションのループ指定
});

 

Toshikazu Hirano

Nagasaki→Tokyo→China(Shenzhen)

1992/07/02
宮崎産まれ、長崎育ち。

前職は、東京のベンチャー企業(IT関連)で仕事をしておりその経験からホームページ作成。運営を行なっています。現在は、中国(深圳市)に住んでおりホームページの運営からYouTube動画の作成等いろいろな活動をしています。

このサイトは「プログラミングとアフィリエイト」のことをメインにいろいろな情報を発信していきます!

Toshikazu Hiranoをフォローする
Javascript
スポンサーリンク
Toshikazu Hiranoをフォローする
All One's Life

コメント