webmanab.html

menu

かわいく、かっこよく。素敵なアニメーションを実装するためのライブラリのまとめ -『animation』

 

単純なアニメーションならCSSの@keyframestransitionで実装できますが、複雑なアニメーションやサクッといいものを描くときにはアニメーションライブラリを使うと、くわしい知識や経験がなくても簡単に実装できたり、複雑なアニメーションを構築することができます。また、アニメーションを実装する際の勉強や研究にもなるので、目を通しておきたいライブラリをまとめます。

アニメーションを実装するためのライブラリまとめ (CSS)

Tuesday

tuesday

0.3秒くらいの短時間で終了するように作られた要素の表示/非表示に使える、シンプルなCSSアニメーションライブラリ。用意されたclass属性を付与するだけで簡単にアニメーションが実装できます。ソースはLessで記述されています。

<div class="animated tdDropInLeft">animate_</div>

csshake

csshake

ガクガクブルブル震わせるCSSライブラリ。派手楽しいですが、とてもおしゃれ。用意されているclass属性を付与します。SCSSで記述されていて、カスタマイズ用のmixinが用意されています。


.my-shake { @include do-shake('my-shake', 40, 40, 20, 100ms); // name x y r time }

animate.css

animate-css

class属性を付与して様々なアニメーションを実装します。とても有名で人気のあるCSSアニメーションライブラリ。

<div class="animated infinite bounce">animation_</div>

SCSSでMixinが用意されている「animate.scss」もあります。実務でカスタマイズの必要があるときはこっちを利用すると、必要なアニメーションだけを必要なオプションを与えて呼び出すことができるので自由度が高く便利です。

animatable

animatable

CSSのプロパティ別にアニメーションを実装した例のまとめ。オブジェクトをクリックするとプロパティを変化させている値の幅を見ることができます。

motion UI

zurb-playground-motion

豊富なアニメーションがSassで用意されています。Mixinでいろいろな拡張ができるようになっていて、もともと用意されているアニメーションをミックスしたり、アニメーションに順序を与えることが簡単にできます。JavaScriptで制御することができるようになっています。ドキュメントはちょっと難しめ。

Magic Animations CSS3

magic_animations

クラスを付与することで、可愛い動きを実装できます。ユーザーがクリックした時など、UIのアクションに向いています。

class名もなんだかかわいいです。

javascript


$('.animate').on('click', function() { $(this).addClass('magictime puffIn'); });

html

<div class="animte">animate_</div>

アニメーションを実装するためのライブラリまとめ 《JavaScript》

bouncejs

bouncejs

少し激しめでトリッキーな動きが用意されています。デモページではプリセットされたアニメーションを直感的にエディット/プレビューしてカスタマイズできます。CSSのコードがエクスポートできるようになっていて、出力されたtransform: matrix3d()を利用した @keyframesアニメーションをコピペすることができます。

そのコードを生成しているライブラリ本体を利用することも可能で、使いやすいです。

javascript


var bounce = new Bounce(); bounce .translate({ from: { x: -300, y: 0 }, to: { x: 0, y: 0 }, duration: 600, stiffness: 4 }) .scale({ from: { x: 1, y: 1 }, to: { x: 0.1, y: 2.3 }, easing: "sway", duration: 800, delay: 65, stiffness: 2 }) .scale({ from: { x: 1, y: 1}, to: { x: 5, y: 1 }, easing: "sway", duration: 300, delay: 30, }) .applyTo(document.querySelectorAll('.anim_'));

voxel.css

voxelcss

JavaScriptで四角い立方体を並べて、3D空間をCSSのプロパティで実現するライブラリ。光源の概念があるのがすごい。マウスイベントが簡単に実装できて箱の増減や回転のインタラクションをつけることができる。


const init = (element) => { let PI = Math.PI, scene = new voxelcss.Scene(), lightSource = new voxelcss.LightSource(300, 300, 300, 750, 0.3, 1), world = new voxelcss.World(scene), editor = new voxelcss.Editor(world); scene.rotate(-PI / 8, PI / 4, 0); scene.attach(element); scene.addLightSource(lightSource); editor.add(new voxelcss.Voxel(0, 0, 0, 100, { mesh: voxelcss.Meshes.grass })); } init(document.body);

aos

aos

スクロールをトリガーに発生するアニメーション。data-*属性を使ってパラメータを渡します。豊富なイージングが用意されています。どれくらい可視範囲に入ってきてからどれくらいの時間で、というように細かい内容を直感的に記述できるところが魅力です。

html

<div data-aos="fade-zoom-in" data-aos-offset="200" data-aos-delay="100" data-aos-easing="ease-in-sine" data-aos-duration="600" data-aos-anchor=".selector">

data-aos-anchorに値を渡すと、自分ではない他の要素をトリガーにアニメーションを発生させることができます。

初期値の設定はinit()にオプションで値を渡します。レスポンシブデザインで、モバイル端末で指定を解除したいときは、disabletrueを渡すように式を記述します。

javascript


AOS.init({ offset: 200, duration: 600, easing: 'ease-in-sine', delay: 100, disable: $(window).height() < 980 });

animsition

animsition

画面遷移にアニメーションを与えることができます。オプションやコールバックが豊富なので、画面遷移をなめらかに表現して体感速度を高めたり、リッチな表現に向いています。

Morf.js

joelambert

豊富に用意されたイージングを探索できます。

javascript


var elem = document.getElementById('elem'); var trans = Morf.transition(elem, { '-webkit-transform': 'translate3d(300px, 0, 0) rotate(90deg)', 'background-color': '#FF0000' }, { duration: '1500ms', timingFunction: 'bounce', callback: function (elem) { // some func } });

tweenmax

Googleが推奨する最強のモーションを作るためのトゥイーンライブラリ。

他のライブラリに比べて、実行速度が速く、パフォーマンスに優れています。多くのオブジェクトを動かしたいときなどwebGLなど重い動作を実装したいときに真価を発揮します。モジュールを分解して読み込むことが可能なので、小分けにすると容量を軽くすることもできます。

記述においては、CSSのtransformプロパティにアクセスしやすいところが素敵です。

javascript


TweenMax.to('.animate_', // セレクタ 1.0, // 時間 { x: 100, repeat: -1, ease: Cubic.easeOut } );

参考

anime.js

anime-js

「anime.js」にはランダム関数が用意されていたり、svgのパス上でのアニメーションや、オブジェクトの値を変化させることもできる表現力の高いライブラリ。オプションやイベントが豊富で人気があります。

TweenMaxよりはパフォーマンスが劣るので、重いwebGLの処理などは得意ではありません。小さなアニメーションやインタラクションに実装します。

elasticityというはずみ具合をコントロールできるおもしろいパラメータがあります。

javascript


anime({ targets: '.amimation_', // セレクタ translateX: '5rem', // 現在地基準に移動 scale: [.75, .9], // .75から.9へ変化 delay: function(el, index) { // function(el, i){...}で複数の要素に処理 return index * 80; }, direction: 'alternate', loop: true, elasticity: 800 });

demo

参考

velocity.js

jQuery版とJavaSCript版が用意されています。javascriptのrequestAnimationFrameを利用してアニメーションを実行します。jQueryのanimate()関数の煩雑になりがちなところを、同じような記述で補完するような使い方ができます。

javascript


var element = document.querySelector('.animate_'); Velocity(element, { translateX: 1000, width: 200, }, { easing: 'easeInSine', duration: 1000, loop: true } );

参考

turnbox.js

あらゆるものを箱型にするスクリプト。

アニメーションを作成するためのツール

cssanimate

cssanimate

キーフレームをタイムラインで調整しながら、オブジェクトをドラッグしたり変形させたりして、プロパティの値を直感的に触りながらプレビューできます。

waitanimate

CSSの@keyframesを待機時間を含めたコードを吐き出すジェネレーターです。プリセットに素敵なアニメーションが実装されています。用意されたmixinを利用してオリジナルのアニメーションを作成するのも簡単です。

以前に紹介してました。

svgアニメーション

DrawSVG

Lazy Line Painter

vivus

Walkway

mo.js

素敵すぎるチュートリアル

おわります。

かわいく、かっこよく。素敵なアニメーションを実装するためのライブラリのまとめ -『animation』

share

tip