Julian Garnier氏は先日,Anime 3.0をリリースした。3回目となる今回のメジャーイテレーションは,新たなアニメーションオプション,ES6モジュールと新ビルドプロセスのサポート,ドキュメントを充実させた新たなショーケースWebサイトなどが特徴だ。
Anime 3.0では,ECMAScript 6で導入されたモジュールが,新しいビルドプロセスでサポートされている。ES6モジュールは次のようにインポートすることができる。
import anime from 'lib/anime.es.js';
CommonJSのビルドには,次のようにrequireを実行する。
const anime = require('lib/anime.js');
ES6モジュールの配布では,WebpackやRollupなどのツリーシェイクを使用した最新のバンドルが可能になったことにより,Animeを使用するアプリケーションのバンドルサイズが縮小されている。
Anime 3.0には,新しいキーフレームシステム,スタッガー(staggering),イージング(easing),コールバック用のヘルパ,CSSユニットの自動変換などがフィーチャーされている。これによって使用可能なアニメーションの幅が広がると同時に,これまでよりも柔軟なカスタマイズも可能になる。
ブラウザウィンドウあるいはタブがフォアグラウンドでなくなった時,アニメーションが一時停止されるようになった。これによるバッテリ消費の減少は,モバイル状況において重要な意味を持つ。
これら新機能に加えて,Anime 3.0では,特に古いプロジェクトに関連するものとして,APIレベルで2つの大きな変更が実施されている。コールバックrun
がchange
に,getValue
がget
に,それぞれ置き換えられた。
さらに,ライブラリのさまざまな機能を視覚的に示す,フル機能のドキュメンテーションサイトが新たに付属している。
Animeはそれ自体を,"CSSプロパティや,個々のCSS変換,SVGまたはDOM属性,JavaScriptオブジェクトとの連携が可能"な,"軽量なJavaScriptアニメーションライブラリ"である,と説明している。 実際,あるAnimeユーザはredditで,次のように述べている。
anime.js
の大きなアドバンテージは,非常にコンパクトだということです。縮小していない状態で,わずか1,200locしかありません。
別のAnimeユーザは,Animeのオープンソースライセンスを,GSAPなど他の有償な代替プロダクトに対する価値として挙げている。チック(tick)コールバックしか持たないGSAPとは違い,Animeでは,例えば任意のrequestAnimationFrame
(raF)にアニメーションチックを手動で調整することが可能だ。
AnimeはAPIの一部として,anime
というユニークな機能を公開している。
anime({
targets: 'div',
translateX: 250,
rotate: '1turn',
backgroundColor: '#FFF',
duration: 800
});
上記のサンプルコードでは,div
というコンテンツを水平方向に回転しながらトランスレートする処理を,全体として800msで実行する。
AnimeはMITオープンソースライセンス下で使用可能だ。コントリビューションはGitHubパッケージ経由で受け付けている。