ITエンジニア/デザイナ向けにオープンソースを毎日紹介

AnimaはJavaScript/CSS3製のオープンソース・ソフトウェア(MIT License)です。

CSS3になって、スタイルシートを駆使すれば華麗なアニメーションが実現できるようになってきました。しかしそこには限界もあります。そこでより本格的なアニメーションを作り上げたいと考える方はAnimaをベースにしてみると良さそうです。


元素記号が踊るアニメーションです。3Dになっており、視点を変えられます。


奥に傾けたり…


右側を奥にしたりできます。


ボールがバウンドします。徐々にバウンドが緩んでいくアニメーションをスタイルシートで実現しています。


これだけでは分かりづらいのですが、右から左へバウンドしながら跳ねていきます。


遅延を使ってシーンごとのアニメーションを実現しています。

AnimaはCSS3ベースのアニメーションに対して実行や停止、そのイフェクトをJavaScriptを使って指定できるようになっています。スタイルシートだけでは制御しきれない部分についてJavaScriptで補完できる便利なライブラリと言えそうです。


MOONGIFTはこう見る

様々な技術が存在する中で、個々の技術が発展していくと相互に被る機能が現れます。CSS3で実現する機能の幾つかはJavaScriptを駆使すればできるものも、その逆もあるでしょう。大事なのは特定の技術に固執する事なく、最適な技術選択を行う眼です。

例えばJavaScriptで実現するアニメーション処理はCPUパワーを使います。CSS3でGPUを使うようにした方が滑らかで消費電力も少なくて済みます。そうした技術の補完によってよりユーザストレスの少ない表現が得られるはずです。


Anima — CSS animations with a soul

lvivski/anima · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2