JavaScript
jQuery
animation
Velocity.js

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

More than 1 year has 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