はじめに
今話題のVelocity.jsについて初歩の初歩だけまとめました。
※追記：↓対抗馬のanime.jsについて記事書きました※
アニメーションライブラリ決定版か!?anime.jsで軽量・軽快に実装！
Velocity.jsとは
jQueryのプラグイン。
$.animateと互換性を持ち、さらに高機能で非常に軽快なアニメーションをする。
アニメーション技術補足
jQuery Animation
便利だが重い。コマ落ちし過ぎ。
CSS Transition, CSS Animation
軽いが、アニメーションを繋ぐなどが出来なかったりなど使い勝手が悪い。
結局、JavaScriptを頼らないと使い物にならないことが多い。
Transit.js
有名なアニメーションライブラリのひとつであるjQueryプラグイン。
CSS Animationを制御しているため、軽快。
そして、3d-transformも使えるので表現が豊か。
だが、Velocity.jsにも軽快さは負ける。
Web Animations API
GoogleとMozillaが中心となって策定を進めているが、まだドラフトなのと、対応ブラウザが少ない。
Velocity.js
速い、軽い、便利。
現在、最強（だと思う）
Velocity.jsは、CSSアニメーションを使わずに、JavaScriptのrequestAnimationFrameを使用して、アニメーションさせています。
requestAnimationFrameは、フレーム毎に再描画されるので、jQuery Animationと違いスムーズに描画されます。
使い方
最低限の内容をJavaScriptのコメントに記載。
HTML
<i></i>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.js"></script>
CSS
i {display: block; width: 50px; height: 50px; background: #ccc; position: absolute;}
JavaScript
$('i').velocity(
{
width: '100px',
height: '100px',
backgroundColor: '#000000',
translateX: '+=200px',
translateY: '+=200px'
}, {
// Option
duration: 500, // アニメーション時間
easing: 'ease-in-out', // イージング : linear, swing, ease, ease-in, ease-out, ease-in-out, [200, 15]
begin: function(){console.log('start');}, // or null
progress: null, // 進捗率
complete: function(){console.log('end');}, // or null
loop: 1, // 繰り返し : or false
delay: 0, // 開始、ループ時に遅延させる Ex.1000
display: 'none' // 表示・非表示 : false, 'none', 'block'
}
);
// 省略記法
// $('i').velocity({...}, 500, 'ease-in-out');
// チェーンで繋ぐことも可能
// $('i')
// .velocity({...}, 500, 'ease-in-out')
// .velocity({...}, 500, 'ease-in-out');
jQuery無し版
jQueryを入れなくても使えます。
Velocity(document.querySelector('i'), {...});
上記のようにVelocity(DOM指定, {アニメーション指定})と書きます。