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

サイト内検索

最近の投稿

アイキャッチ
大山の大献灯・和傘灯りに行った感想

大山の大献灯・和傘灯りに初めて行って参りました。13日の夜に行ってきましたがこんなイベントをやっていることを知らなかったのでご紹介します。和傘のライトアップで日本の夏の雰囲気が良いですね。 大...

23 Aug 2018

アイキャッチ
出雲神話祭り・花火大会

お盆休み中に出雲の花火大会に行って参りました、今年は8月12日(日)でした、開催日は毎年違いますので確認しておきましょう。だいたいこのあたりだった気がします。8,000発の花火で例年13万人が来...

21 Aug 2018

アイキャッチ
chromeのエクステンションを使わないでウェブページ全体をスクリーンショットでとる方法

さて今回はchromeブラウザ限定ですがエクステンションを使わずにページ全体と部分キャプチャをする方法をご紹介します。 割とエクステンションで処理しちゃう場合がありますがデフォルトで使えるとい...

05 Aug 2018

アイキャッチ
はじめてのVim覚え書き

今回はエディターのご紹介になります。かなり特殊なVimエディターをご紹介したいと思います。便利なエディターAtom、SublimeText、VisualStudioCodeとは訳が違います。 ...

28 Jul 2018

アイキャッチ
リニューアルした水木しげるロードは夜がおすすめ

さて、先日14日にリニューアルした境港の通称鬼太郎ロードに行って参りました。鬼太郎に会える町として新たに妖怪を追加して約800mの通りに177体の妖怪ブロンズ像がお出迎え、ゾーン分けをして再配置...

17 Jul 2018

著者

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

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

タグクラウド

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