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

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です。震える動きをつけました。

⇒デモを見てみる

参考になれば幸いです。

徹底マスター JavaScriptの教科書(仮)

posted with ヨメレバ

磯博 SBクリエイティブ 2017-03-18

Amazon

楽天ブックス

∞Tadashi Suyama∞