BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース Anime.js 3.0がリリース,新たなアニメーションオプションとドキュメンテーションWebサイトを提供

Anime.js 3.0がリリース,新たなアニメーションオプションとドキュメンテーションWebサイトを提供

原文(投稿日:2019/03/20)へのリンク

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モジュールの配布では,WebpackRollupなどのツリーシェイクを使用した最新のバンドルが可能になったことにより,Animeを使用するアプリケーションのバンドルサイズが縮小されている。

Anime 3.0には,新しいキーフレームシステムスタッガー(staggering)イージング(easing)コールバック用のヘルパ,CSSユニットの自動変換などがフィーチャーされている。これによって使用可能なアニメーションの幅が広がると同時に,これまでよりも柔軟なカスタマイズも可能になる。

ブラウザウィンドウあるいはタブがフォアグラウンドでなくなった時,アニメーションが一時停止されるようになった。これによるバッテリ消費の減少は,モバイル状況において重要な意味を持つ。

これら新機能に加えて,Anime 3.0では,特に古いプロジェクトに関連するものとして,APIレベルで2つの大きな変更が実施されている。コールバックrunchangeに,getValuegetに,それぞれ置き換えられた。

さらに,ライブラリのさまざまな機能を視覚的に示す,フル機能のドキュメンテーションサイトが新たに付属している。

Anime new website screen capture

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パッケージ経由で受け付けている。

この記事に星をつける

おすすめ度
スタイル

BT