anime.jsの使い方

anime.jsの使い方

  • 2017-02-18  最終更新日:2017-02-18

今回はオブジェクトに動きを加えたり、ちょっとしたアニメーションを付け加えるのにとっても役立つアニメーションライブラリのご紹介です。

anime.jsはとっても軽量でかつ簡単に使えるので去年あたりから人気が出始めているライブラリです。jQuery依存もしていませんのでこのライブラリだけ読み込めばOKです。

⇒anime.js公式サイト

ブラウザサポートはChrome、Safari、Opera、Firefox、IE 10+ですのでモダンブラウザは大丈夫です。


使い方

まだあまり出回っていないので実際は下記のgithubにあるマニュアルだけですね。

公式サイト

公式サイトを見ながら日本語訳していきます。

npm bower

以下のようにnpmもしくはbowerを使ってインストールするか公式サイトよりダウンロードして使うことが出来ます。

npm install animejs

bower install animejs

パラメータ

名前:デフォルト値 [使える値(真偽値、数値、function)]

  • delay:0 [number, function (el, index, total)] どれくらい遅延するか、ミリ秒数
  • duration:1000 [number, function (el, index, total)] どれだけの時間アニメーションを継続するか指示
  • autoplay:true [boolean] 自動的に実行するかどうか
  • loop:false [number, boolean] アニメーションを何回繰り返すかを指示します。trueなら無制限、数値なら数値分繰り返す
  • direction:’normal’ [‘normal’, ‘reverse’, ‘alternate’] 通常、反対、いったりきたり
  • easing:’easeOutElastic’ [下記のイージングリスト参照]
  • elasticity:400 [number (高いほど強い)]
  • round:false [number, boolean] 回転数
  • begin:undefined [function (animation)] 始まったとき
  • update:undefined [function (animation)] 更新したとき
  • complete:undefined [function (animation)] 完了したとき

パラメータは、Objectを使用して個別にプロパティに設定できます。 特定のプロパティパラメータは次のとおりです。

  • value (required)
  • delay
  • duration
  • easing

translateYは要素を縦方向

translateXは要素を横方向

scaleは倍率、大きさを指定

rotateは回転、角度などをしていします。

イージングリスト

  • easeInBack
  • easeInBounce
  • easeInCirc
  • easeInCubic
  • easeInElastic
  • easeInExpo
  • easeInOutBack
  • easeInOutBounce
  • easeInOutCirc
  • easeInOutCubic
  • easeInOutElastic
  • easeInOutExpo
  • easeInOutQuad
  • easeInOutQuart
  • easeInOutQuint
  • easeInOutSine
  • easeInQuad
  • easeInQuart
  • easeInQuint
  • easeInSine
  • easeOutBack
  • easeOutBounce
  • easeOutCirc
  • easeOutCubic
  • easeOutElastic
  • easeOutExpo
  • easeOutInBack
  • easeOutInBounce
  • easeOutInCirc
  • easeOutInCubic
  • easeOutInElastic
  • easeOutInExpo
  • easeOutInQuad
  • easeOutInQuart
  • easeOutInQuint
  • easeOutInSine
  • easeOutQuad
  • easeOutQuart
  • easeOutQuint
  • easeOutSine
  • linear

例として下記のように記述します。

var test1 = anime({
  targets: ['.green', '.red', '.blue'],
  translateX: '13.5rem',
  scale: [.75, .9],
  delay: function(el, index) {
    return index * 80;
  },
  direction: 'alternate',
  loop: true
});

サンプル1です。公式サイトと同じです。3つのクラスに色をつけて左右に動きをつけるモノです。

⇒デモを見てみる

var test2 = anime({
  targets: '.squere',
  translateX: '13rem',
  rotate: {
    value: 180,
    duration: 1500,
    easing: 'easeInOutQuad'
  },
  scale: {
    value: 2,
    delay: 150,
    duration: 850,
    easing: 'easeInOutExpo',
  },
  direction: 'alternate',
  loop: true
});

サンプル2です。 こちらも公式サイトと同じですね。右に行ってそして大きくなって元に戻る

⇒デモを見てみる

var test3 = anime({
  targets: '#bounce',
  translateY: [20, 150],
  duration: 1000,
  loop: true,
  direction: 'alternate',
  easing: 'easeInOutQuad'
});

サンプル3です。 簡単に縦の動きをつけたモノですね。こちらは画像にidをつけてわかりやすくしてあります。

⇒デモを見てみる

var test4 = anime({
  targets: '#wide',
  translateX: [20, 150],
  duration: 1000,
  loop: true,
  direction: 'alternate',
  easing: 'easeInOutQuad'
});

サンプル4です。横方向に動きます。

⇒デモを見てみる

var test5 = anime({
  targets: '#translatexy',
  translateX: '100px',
  translateY:'50px',
  duration: 1000,
  loop: true,
  direction: 'alternate',
  easing: 'easeInOutQuad'
});

サンプル5です。斜めに動きます。

⇒デモを見てみる

var test6 = anime({
  targets: '#random',
  scale: {
    value: 2,
    delay: 200,
    duration: 1000,
    easing: 'easeInOutBounce',
  },
  loop: true
 });

サンプル6です。単純に拡大させてイージングを変えてあります。

⇒デモを見てみる

var test7 = anime({
  targets: '#shake',
  translateX: '5em',
  duration: 500,
  elasticity: 1000,
  loop: true
 });

サンプル7です。震える動きをつけました。

⇒デモを見てみる

参考になれば幸いです。


∞Tadashi Suyama∞

js anime css svg
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
そろそろvuejs始める

最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...

02 May 2021

アイキャッチ
追い風CSS(tailwindcss)が結局楽かも

最初にtailwindcssのv1が出た頃はまだbootstrapで良いかな。 htmlに入れるクラスタグが多過ぎと思っていました。あまり良い印象はなかったです。 時は過ぎいろいろと触っていると...

29 Apr 2021

アイキャッチ
エラー処理について

COJPドメンを取得する際に「登記年月日」という項目があります。 その項目通り登記した年月日を入れる訳ですが、なぜかエラーが出ました。 半角英数字にして下さいというよくあるエラーです。当然半角英...

24 Jan 2021

アイキャッチ
javascriptのundefinedの判定

jqueryで高さの数値をとって足し算をしていたらエラーも出ずに動かないということになったので調べてみました。 ワードプレスで管理画面のアドミンバーが一度ログインするとフロント画面でも表示される...

17 Jan 2021

アイキャッチ
Webpack5にアップデートしてエラーの対処方法2つ

webpack4(4.41.5)から webpack5(5.12.1)にあげました。 特に難しい設定は行っておらず主にscssと共通モジュールの設定だけで使っているのですがそれでもエラーが出たの...

09 Jan 2021

著者

ウェブエンジニアの須山のブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

js anime css svg
フッターイメージ