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

Similar Posts

最近の投稿

アイキャッチ
電話番号の正規表現をJavaScriptを使ってチェック

さて今回はフォームの中での電話番号正規表現についてご紹介します。 電話番号を入力する際に携帯と固定電話どちらでも入力可能の場合にどちらの場合でも桁数チェックができるようにしたいと思います。今回...

19 Aug 2017

アイキャッチ
画面共有中だけ通知を一時的にオフ機能のMac用アプリMuzzle

本日はアプリのご紹介、画面を共有しているときやビデオ通話などをしているときに通知を一時的にオフにするアプリのご紹介です。 プレゼンの発表中などスクリーン共有やビデオ通話などの際に役立ちます。S...

13 Aug 2017

アイキャッチ
お盆休みのお知らせ

毎日の残暑、暑いですね。暑中お見舞い申し上げます。 平素より、大変お世話になっております。 さて、弊社では下記の予定で夏期休暇を実施させていただきますので、ご了承のほどよろしくお願い申し上げ...

10 Aug 2017

アイキャッチ
マルチOSのコマンドライン型ランチャーアプリzazu

Macには圧倒的な使いやすさのalfredがあるのですがそのようなランチャーがWindows環境でないか探してみたところありましたのでご紹介します。ただalfredにはまだ遠く及ばない気がします...

05 Aug 2017

アイキャッチ
MacでWinSCPを使う方法

Wine(ワイン)とは macOS上でWindowsソフトを動かすためのプログラムです。今年初めに2.0にアップデートされたようです。[Wine 2.0が公開](http://forest.wa...

30 Jul 2017

著者

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

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

タグクラウド

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