JavaScriptで滑らかな動きを実装するなら「anime.js」がイイ

Webを徘徊していると、JavaScriptを利用した様々なアニメーションやスムーススクロール等を見る機会も多いと思います。

今回は、モダンなJavaScript開発環境において、アニメーションやスムーススクロールを実装するのに最適なライブラリ、「anime.js」を紹介します。

「anime.js」とは

「anime.js」は、オープンソースのJavaScriptのアニメーションライブラリ（MITライセンス）です。

特徴として、柔軟で軽く、シンプルなAPIを搭載しています。v2.0.0では10.7KB程のサイズしかありませんが、高機能で「CSS」「CSS Transform」「SVG」「DOMの属性」「JavaScriptオブジェクト」のアニメーションに対応しています。

また、anime.jsはつい最近、最新版であるv2.0.0がリリースされました。それに伴い、更に高速化が図られ、ドキュメントもかなり充実しました。今から導入するのに最適なアニメーションライブラリと言えるでしょう。

このライブラリでは、requestAnimationFrameという、アニメーション用に用意されたブラウザの仕組みを利用しています。そのため、jQuery等に実装されているアニメーションとは異なり、比較的滑らかなアニメーションを実装することができます。Velocity.jsと同じ仕組みを利用していますが、anime.jsの方が軽量です。

インストール

Node.jsを用いて、以下のようにインストールするか、

npm install animejs
# もしくは
bower install animejs

import anime from 'animejs'

こちらからダウンロードして、anime.min.jsを読み込むことで利用できます。

<script src="anime.min.js"></script>

利用方法

詳しいドキュメントはこちらから参照できます。

簡単な利用手順と便利な利用方法を解説します。

anime.jsを読み込むと取得できるanime()関数は、1つのオブジェクトを引数にとります。そのオブジェクトのtargetsに、動かしたいオブジェクトを指定し、他にアニメーションに関するパラメーターとその値を指定します。例えば、以下のように。

anime({
  targets: '#cssSelector .el',
  translateX: 250,
  duration: 3000,
  easing: 'linear'
});

上記は最も一般的な例で、CSSセレクター'#cssSelector .el'に当てはまる要素全てに対して、CSS TransformのtranslateX(250px)を適用します。その際、3000ミリ秒（つまり3秒）かけて、直線的にアニメーション（easing: 'linear'）します。

targetsに指定できる値は、CSSセレクターの他にも、DOM要素やNodeList、単なるJavaScriptオブジェクトなんかも指定できます。

そしてアニメーションさせたいプロパティ（上記のtranslateX）に指定できる値は、一般的なCSS（backgroundColorとかborderRadiusとか）や、CSS Transform（translateXとかscaleとか）や、オブジェクトのプロパティ等が指定できます。

その他にも、ループや遅延等のオプションもあり、アニメーションさせる上では、機能に困ることはないです。

相対的に変化させることができる

anime.jsでは、現在の要素の状態を基準に、相対的にアニメーションさせることができます。

anime({
  targets: '#relativeValues .el',
  translateX: {
    value: '+=150',
    duration: 1000
  },
  width: {
    value: '-=10',
    duration: 1800,
    easing: 'easeInOutSine'
  },
  height: {
    value: '*=4',
    duration: 1800,
    easing: 'easeInOutSine'
  },
  direction: 'alternate'
});

上記の例では、translateX、width、heightの3つのプロパティに対して、別々にアニメーションを定義しています。valueの部分が、変化後の値です。

+=や*=といった指定をすることにより、値を相対的に変化させることが可能です。

スムーススクロールもできる

anime.jsでは、targetsに指定した要素のプロパティを滑らかに変化させることが可能なので、スムーススクロールも実装することができます。

anime({
  targets: '#wrapper',
  scrollTop: 1234,
  duration: 3000,
  easing: 'easeInOutSine'
});

このように指定することで、滑らかにelement.scrollTopを1234まで変化させてくれます。つまり、スムーススクロールを実現できます。

スムーススクロールのためだけに他のライブラリを入れる必要がなくなります。

色のアニメーションもできる

anime.jsでは、複雑な色の変化も、一発で実装できます。

anime({
  targets: '#colors .el',
  translateX: 250,
  backgroundColor: [
    {value: '#FFF'}, // もしくは #FFFFFF
    {value: 'rgb(255, 0, 0)'},
    {value: 'hsl(100, 60%, 60%)'}
  ],
  easing: 'linear',
  direction: 'alternate',
  duration: 2000
});

様々な色の指定方法に対応しており、それぞれ滑らかに変化させてくれます。

その他にも便利な機能がいっぱい

その他にも、各種コールバック関数が用意されていたり、Promiseオブジェクトが利用できたり、SVGのアニメーションにも対応していたりと、便利な機能がたくさん搭載されています。

しかしながら、決して複雑ではないので、それぞれ簡単に理解できると思います。

より詳しい利用方法は公式ドキュメントから参照できます。

まとめ

今回は、JavaScriptのアニメーションライブラリ「anime.js」を紹介しました。

モダンなJavaScript開発において、無駄なく、滑らかなアニメーションを実装したいなら、現状では「anime.js」一択だと思っています。

皆さんもこれを機に、ぜひ利用してみてはいかがでしょうか。