yoshida

2015.09.02

Javascriptのアニメーション処理を高速化するプラグインVelocity.jsの使い方

JavaScript

今回はjQueryのanimate()に比べて高速で高機能なプラグイン「Velocity.js」について調べてみました。

■Velocity.js（公式/記事作成時最新バージョン 1.2.2）
http://julian.com/research/velocity/
■GitHub
https://github.com/julianshapiro/velocity
■デモギャラリー
 http://codepen.io/collection/tIjGb/

Velocity.jsの主な特徴

animate()よりアニメーション処理が高速。
animate()と書き方に互換性がある。（velocity()）
jQueryを読み込んでいなくても使用できる。（使用しない場合はIE8はサポート対象外）
モック機能がある。
animate()よりオプションが柔軟で豊富。

...

Velocity.jsの使い方

公式サイトやGitHubからプラグインのファイルを入手します。

他のプラグインと同様にjQueryの読み込み後にプラグインを読み込みます。

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>

1. animate()よりアニメーション処理が高速。

animate()ではアニメーション時の内部処理にsetInterval()を使用していますが、
setInterval()のタイミングとブラウザがレンダリングを更新するタイミングが異なるため、
必要以上に負荷が掛かったり、アニメーションが不自然に見える場合があります。

一方、Velocity.jsは
アニメーション時の内部処理にrequestAnimationFrame()を使用していて、
ブラウザがレンダリングを更新するタイミングで必要な処理が実行されるので、
余分な処理が発生せず、より高速で自然なアニメーションになります。

DEMO animate()とvelocity()の比較
→ 5px四方のSPAN要素を300個同時に左端から右端までアニメーションで移動させる。
animate()は各要素が同じタイミングで描画されないが、velocity()では改善されている。
（ブラウザによって描画結果は異なります。）

2. animate()と書き方に互換性がある。（velocity()）

animate()の書き方はそのままVelocity.jsのvelocity()で使用できます。
（使用できる値は異なる場合があります。）

.animate( properties, options ) .animate( properties [, duration ] [, easing ] [, complete ] ) ↓ .velocity( properties, options ) .velocity( properties [, duration ] [, easing ] [, complete ] )

↓記述例

$element.velocity({
    width: "500px",
    property2: value2
}, {
    /* Velocity.jsのデフォルトのオプション */
    duration: 400,
    easing: "swing",
    queue: "",
    begin: undefined,
    progress: undefined,
    complete: undefined,
    display: undefined,
    visibility: undefined,
    loop: false,
    delay: false,
    mobileHA: true
});

3. jQueryを読み込んでいなくても使用できる。（使用しない場合はIE8はサポート対象外）

Velocity.jsの使用はjQueryが読み込まれていることが前提ですが、
jQueryが読み込まれていないページでも使用できます。
その場合は、下記のような記述になります。

Velocity(document.getElementById("dummy"), { opacity: 0.5 }, { duration: 1000 });

4. モック機能がある。

複雑であったり実行時間が短いアニメーションをチェックするためにモック機能が備わっています。

下記の記述を追加しておくことでアニメーションをゆっくり再生させることができます。
再生時間が短すぎてチェックが難しい場合に非常に便利です。

// 数字は何倍ゆっくり動かすかを表します。「3」の場合は3倍。
// 「0.5」の場合は半分の時間でアニメーションが終了します。
$.Velocity.mock = 3;

DEMO モック機能
→ widthとheightの値を変更するアニメーションを0.2秒で実行している。
　$.Velocity.mockに値をしている場合は50倍の10秒で実行する。

5. animate()よりオプションが柔軟で豊富。

Velocity.jsのvelocity()は、基本的にjQueryのanimate()と同様の書き方をしますが、
オプションの柔軟さや豊富さはanimte()より優れています。

公式サイトに全てのオプションが記載されていますが、
今回はその中から比較的基本的なものをご紹介します。

下記に記載のソースは公式サイトから流用しています。

duration (Option)

アニメーションの実行時間を指定します。
数値（単位ミリ秒）や「slow」「normal」「fast」の文字列が有効です。

$element.velocity({ opacity: 1 }, { duration: 1000 });
$element.velocity({ opacity: 1 }, { duration: "slow" });

easing (Option)

イージングを設定します。
下記のような値が有効です。
・ jQuery UIのイージング設定　（参考：Easing Function 早見表）
　　ただし、back, bounce, elastic系のイージングは含まれていません。
　　※back, bounce, elastic系のイージングは別のプラグインから追加することが可能です。
　　（参考：Ease+ for Velocity.js）
・ CSS3 の transition-timing-function で指定できるease, ease-in, ease-out, ease-in-out
・カスタムベジェ曲線　（参考：cubic-bezier.com）
・張力＋摩擦力（文字列 spring も有効）（参考：Velocity.js - Easing: Spring Physics (Tester)）
・ステップ　（ステップの数だけアニメーションを分割しコマ送りのようにする。）

$element.velocity({ width: 50 }, "easeInSine"); // jQuery UIのイージング設定
$element.velocity({ width: 50 }, [ 0.17, 0.67, 0.83, 0.67 ]); // カスタムベジェ曲線
$element.velocity({ width: 50 }, [ 250, 15 ]); // 張力＋摩擦力
$element.velocity({ width: 50 }, [ 8 ]); // ステップ

イージング設定は各プロパティごとに設定できます。（widthは「linear」で、heightは「easeInQuad」など。）

queue (Option)

キューの設定をします。
通常同じ要素にアニメーションを指定すると、指定された順にアニメーションが実行されるが、
値に false を指定するとそのアニメーションは直ちに実行されます。

値に文字列を指定すると、jQueryの dequeue() でアニメーションを実行することができます。

$element.velocity({ height: "50px" }, { queue: false });

$element.velocity({ height: "50px" }, { queue: "queueName" });
$element.dequeue("queueName")

begin & complete (Option)

アニメーションの開始時と終了時のcallbackを指定します。

$("div").velocity({ 
  scale: 1.5
},{ 
  duration: 2000,
 begin: function() { 
        alert("This is called before the animation begins.");
 }
});

progress (Option)

アニメーションの進捗率や残り時間、アニメーションが開始したUnix時間などを取得できます。

$element.velocity({
   opacity: 0,
 tween: 1000 // Optional
}, {
    progress: function(elements, complete, remaining, start, tweenValue) {
        console.log((complete * 100) + "%");
        console.log(remaining + "ms remaining!");
        console.log("The current tween value is " + tweenValue)
    }
});

loop (Option)

ループの指定をします。
値が数字の場合は指定回数分、 true の場合は無制限で処理を繰り返します。
ループの1回分は元々のアニメーションとアニメーション終了後から初期状態に戻るまでがセットになっています。

$element.velocity({ height: "10em" }, { loop: 2 });
$element.velocity({ height: "10em" }, { loop: true });

delay (Option)

アニメーションが始まる前の待機時間を設定します。
loopと一緒に設定された場合は、最初と折り返しの2回分待機時間が発生します。

$("div").velocity({ 
   scale: 1.5
},{ 
  duration: 2000,
 delay: 200,
 loop: 2
});

まとめ

jQueryのanimate()に比べて明らかにパフォーマンスが良く優れているので、
他の同系のライブラリと比較しながら積極的に使用していきたいと思います。
animate()との互換性が高くて導入が容易なこともポイントが高いです。

他にもSVGに対応していたり、CSS3のTransformsに対応しているなど紹介できなかった機能がたくさんありますので、
機会があればそれらもまとめてみたいと思います。

新しい記事を公開しました
Velocity.jsでCSS transformsやSVGを扱う

参考サイト

・Velocity.js is next generation animation engine.
・Volocity.jsを使ってアニメーションのパフォーマンスを比較してみた - beijaflor
・JavaScript - Velocity.js よみほぐし - Qiita
・Velocity.jsとリアルなUI | Backyard<
・今一度Velocity.jsを見直したら気づいた5つの採用ポイント - ENUM blog
・記事中記載のサイト