anime.jsの使い方

Feb 18, 2017

anime.jsの使い方

2017-02-18 最終更新日:2017-02-18
js anime css svg

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

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∞

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

Similar Posts

最近の投稿

アイキャッチ
ドメインオーソリティの使い道

ドメインオーソリティーとは一言で言えばドメインの価値を数値化したモノです。ドメインに関するものなので中身については全く意味をなさないと思います。ドメインオーソリティーの数値が低いから低品質なコン...

17 Jun 2017

アイキャッチ
個人情報を一切収集しない検索エンジンDuckDuckGoとは?

ネット検索と言えば、日本ならGoogleやYahoo Japan!(検索エンジンはGoogle)経由が多いですね。Bingは少数派といったところでしょうか。 DuckDuckGoという検索エン...

10 Jun 2017

アイキャッチ
ブートストラップバリデータ使い方 - Validator - for Bootstrap 3

今回はフォームバリデータのご紹介です。前回のPHPMailerと関連がありますが、フロントエンドでのバリデートができます。 CSSのフレームワークBootstrap3をお使いの方ならすんなりと...

03 Jun 2017

アイキャッチ
PHPMailerの使い方

今回はあらゆるところで使われているPHP用のメール送信ライブラリphpmailerの使い方を紹介します。 脆弱性がPHPMailer5.2.18より下のバージョンで発生するので新しいバージョン...

28 May 2017

アイキャッチ
画像加工・写真編集が簡単にできるアプリfotorのご紹介

今回は画像加工や編集ができるfotorのご紹介です。アプリの方が有名ですが、実はサイトからも使えるというのはご存じだったでしょうか?公式サイトはコチラ⇒[画像加工・写真編集|Fotor - 無料...

20 May 2017

著者

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

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

タグクラウド

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