Edited at

アニメーション最強のVelocity.jsの使い方

More than 3 years have passed since last update.


はじめに

今話題の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指定, {アニメーション指定})と書きます。


参考URL