velocity.js is next generation animation engine

mi73

早い、安い、旨いアニメーションエンジンのことである。 !

!https://github.com/julianshapiro/velocity

velocity.jsとは

jQueryのプラグインとして実装された GSAPに匹敵する実行速度を持った

$.animateと互換性を持ち さらに使いやすい機能を持ち合わせた

オープンソースのアニメーションエンジン

velocity.jsとは

使わない理由は

つまり

ほとんどないと思う。

つまり

今までスムーズなアニメーションを実現できるものとして GSAPがありましたが

ライセンスが必要でしたし too muchなものという感覚がありました

!

今回、MITライセンスで 非常に軽快で、明快で、移行し易い

アニメーションエンジンvelocity.jsを紹介します

実行時に”レイアウトスラッシング”を起こしてしまう !

メモリー消費を高頻度で行うことがガーベッジコレクション・イベントを呼び アニメーションを瞬間的にフリーズさせてしまう

!

リクエスト・アニメーション・フレームを使用していない 非アクティブ時に実行されないからなどの理由で

!!

http://triblondon.github.io/talk-html5perf/#/32 http://blog.artillery.com/2012/10/browser-garbage-collection-and-framerate.html

http://0-9.sakura.ne.jp/pub/lt/modest/start.html

$.animateの何がいけないのか

DOM操作は同期的処理で非効率である

Layout thrashingvar h1 = element1.clientHeight; <== Read element1.style.height = (h1 * 2) + 'px'; <== Write var h2 = element2.clientHeight; <== Read(trigger layout) element2.style.height = (h1 * 2) + 'px'; <== Write var h3 = element3.clientHeight; <== Read(trigger layout) element3.style.height = (h3 * 2) + 'px'; <== Write

var h1 = element1.clientHeight; <== Read var h2 = element2.clientHeight; <== Read var h3 = element3.clientHeight; <== Read element1.style.height = (h1 * 2) + 'px'; <== Write (invalidates current layout) element2.style.height = (h1 * 2) + 'px'; <== Write (layout already invalidated) element3.style.height = (h3 * 2) + 'px'; <== Write (layout already invalidated) h3 = element3.clientHeight <== Read (triggers layout)

DOM属性のreadとwriteをそれぞれまとめて行うようにする !

チェーン・コールの際の属性をまとめてキャッシュをして横断的に流用するようにする

!

同一コール内の子孫要素間では単位変換率(px、%、emなど)をキャッシュする !

見た目が変わらないようなスタイルの更新を実行しない

どうしたら早くなるのか

そんな工夫から生まれたvelocity.jsの 使い方を見ていきます

!

!

http://julian.com/research/velocity/

$.animateと互換性があります

文法$div.velocity({ property1: value1, property2: value2 }, { /* Velocity's default options: */ duration: 400, easing: "swing", queue: "", begin: null, progress: null, complete: null, loop: false, delay: false, display: false, mobileHA: true });

コンマ切り文法にも対応してます

文法

$div.velocity({ top: 50 }, 1000); $div.velocity({ top: 50 }, 1000, "swing"); $div.velocity({ top: 50 }, "swing"); $div.velocity({ top: 50 }, 1000, function() { alert("Hi");});

つまり楽勝

単一オブジェクトを引数にとっても良い

文法

$div.velocity({ properties: { opacity: 1 }, options: { duration: 500 } });

-webkitとか書かなくてよいです !

margin: “1 1 1 1”とかもいらないです

自動プリフィックス

{ padding: 1 } { paddingLeft: 1, paddingRight: 1 }

{ translateX: 1.1 }

自動的に単位を解釈することができる 四則演算子を使用することができる

単位の省略

$div.velocity({ top: 50, // Defaults to the px unit type left: "50%", width: "+=5rem", // Add 5rem to the current rem value height: "*=2" // Double the current height });

メソッドチェーンを許容する 自動的にキューに入れられ実行される

メソッドチェーン

$div /* Animate the top property. */ .velocity({ top: 50 }) /* Then, when finished, animate the width property. */ .velocity({ width: 50 });

$.animateと同様に fastなどのduration定義も可能

“slow” “normal” “fast”

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

jQuery UIのイージング関数 CSS３のイージング定義に加えて

ease-out, bezier()

新たにspringも導入された

張力と摩擦力を引数にとる

!

長さ１の配列を指定すると6段階で変化

イージング

/* Use one of the jQuery UI easings. */ $div.velocity({ width: 50 }, "easeInSine"); /* Use a custom bezier curve. */ $div.velocity({ width: 50 }, [ 0.17, 0.67, 0.83, 0.67 ]); /* Use spring physics. */ $div.velocity({ width: 50 }, [ 250, 15 ]); !!!!// Animate with a step easing: [ number of steps ]. $("div").velocity({ translateY: 125 }, 1150, [ 6 ]); // Animate across 6 steps

属性ごとにイージングの定義が可能

属性ごとのイージング

$div.velocity({ borderBottomWidth: [ "2px", "spring" ], // Uses "spring" width: [ "100px", [ 250, 15 ] ], // Uses custom spring physics height: "100px" // Defaults to easeInSine }, { easing: "easeInSine" // The call's default easing });

同じ要素にアニメーションを２回実行すると 自動的に最初に定義したものが終了時

２つ目が実行される !

queueオプションに偽を指定すると 即座に実行される

キュー

/* Trigger the first animation: Animate width. */ $div.velocity({ width: "500px" }, { duration: 10000 }); !/* Trigger the second animation: Animate height. */ setTimeout(function() { /* Will run in parallel starting at the 5000ms mark. */ $div.velocity({ height: "500px" }, { queue: false }); }, 5000);

実行終了時にcomplete関数が実行される !

$.animateと違うのは 複数要素のアニメーション終了時に

一度だけ実行されて引数に全要素が入る !

実行回数を指定した場合は最後の実行後のみ

completeオプション

$div.velocity({ opacity: 0 }, { /* Logs all the animated divs. */ complete: function(elements) { console.log(elements); } });

実行開始時にcomplete関数が実行される 同様にコールバック関数の引数に全要素が入る 実行回数を指定した場合は最初の実行時のみ

beginオプション

$div.velocity({ opacity: 0 }, { /* Logs all the animated divs. */ begin: function(elements) { console.log(elements); } });

プログレス関数を定義できる 完了率、残り時間、開始UNIX時間を取得できる

progressオプション

$div.velocity({ opacity: 0 }, { progress: function(elements, percentComplete, timeRemaining, timeStart) { $percentComplete.html((percentComplete * 100) + "%"); $timeRemaining.html(timeRemaining + "ms remaining!"); } });

velocityではモバイルで自動的に有効になる 手動で無効にしたい場合に指定する

Mobile Hardware Acceleration

$divement.velocity(propertiesMap, { mobileHA: false });

loopを指定すると往復アニメーションする loop:1を指定すると２回分時間かかる

!

begin,completeの実行回数は1回 !

loopはキャッシュして実行するのでパフォーマンスが高い

loopオプション

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

loop時に指定すると それぞれの実行時に遅延が発生する

例の場合8回の遅延

delayオプション

$div.velocity({ height: "+=10em" }, { loop: 4, /* Wait 100ms before alternating. */ delay: 100 });

実行前、実行後にdisplay属性を適用 フェードの時に有効に使用できる

!

$.fadeはパフォーマンスが低下するので使用を避ける !

loop, reverse時には無視される

displayオプション

/* Animate down to zero then set display to "none". */ $div.velocity({ opacity: 0 }, { display: "none" }); !/* Set display to "block" then animate from opacity:0. */ $div.velocity({ opacity: 1 }, { display: "block" });

特定要素をスクロールすることができる

コンテナーの指定も可能

軸の指定も可能

キューイングも可能

scrollコマンド

$div .velocity("scroll", { duration: 1500, easing: "spring" }) !/* Scroll container to the top of the targeted div. */ $div.velocity("scroll", { container: $("#container") }); !/* Scroll the browser to the LEFT edge of the targeted div. */ $div.velocity("scroll", { axis: "x" }); !/* Scroll to a position 50 pixels above the div. */ $div .velocity("scroll", { duration: 750, offset: -50 }) /* Then scroll to a position 250 pixels beyond the div. */ .velocity("scroll", { duration: 750, offset: 250 });

$.stopはstopコマンドに換えられる 実行中のアニメーションを停止させる

!

キューイングされているものもクリアする場合 第2引数に真を指定する

loopの場合も同様

stopコマンド

$div.velocity(“stop"); !!!!/* Prior Velocity calls. */ $div .velocity({ opacity: 0 }, 1000) .velocity({ width: 100 }, 1000); /* Called immediately after. */ $div.velocity("stop", true);

$.fadeIn,$.fadeOutは換えられた

fadeIn, fadeOutコマンド

$div .velocity("fadeIn", { duration: 1500 }) .velocity("fadeOut", { delay: 500, duration: 1500 });

$.slideDown,$.slideUpは換えられた

slideDown, slideUpコマンド

$div .velocity("slideDown", { duration: 1500 }) .velocity("slideUp", { delay: 500, duration: 1500 });

CSS Transformsのアニメーションも可能 !

!

2D Transforms時にメモリー消費、文字のぼけを 犠牲にアニメーション性能を上げたい場合は

Z軸に0を指定する

Transforms

/* Translate to the right and rotate clockwise. */ $div.velocity({ translateX: "200px", rotateZ: "45deg" }); !/* Translate to the right and rotate clockwise. */ $div.velocity({ translateZ: 0, // Force HA by animating a 3D property translateX: "200px", rotateZ: "45deg" });

属性の特定パラメータだけの指定も可能 textShadowX, textShadowY, textShadowBlurなど

!

hooks

$div.velocity({ textShadowBlur: "10px" });

RGBAのそれぞれの指定も可能 %, 割合,実効値の指定が可能

色空間

$div.velocity({ /* Animate red to 50% (0.5 * 255). */ colorRed: "50%", /* Concurrently animate to a richer blue. */ colorBlue: "+=50", /* Fade the text down to 85% opacity. */ colorAlpha: 0.85 });

Sequencesの名前空間に定義すると マクロとして再利用可能

!reverseはその中の最後のアニメーションしか実行しない

!

!

!

!

!

Velocity's UI Packに様々なシーケンスが定義されている

Sequences マクロ定義

$.Velocity.Sequences.hover = function (element, options) { var duration = options.duration || 750; $.Velocity.animate(element, { translateY: "-=10px", }, { /* Delay is relative to user-adjustable duration. */ delay: duration * 0.033, duration: duration, loop: 3, easing: "easeInOutSine" }); };$div.velocity("hover", { duration: 450 });

複数要素のアニメーション時 順番に遅延しながら実行される

staggerオプション

! $("div") .velocity("transition.slideLeftIn", { stagger: 250 })

複数要素のアニメーション時 少しずつずれながら実行される

実行時間は最後の要素に合わせられる

dragオプション

$("div").velocity("transition.slideDownBigIn", { drag: true })

stagger, dragオプションが有効時に実行の順序を最終要素からにする

Backwardsオプション

$("div").velocity("transition.bounceDownOut", { stagger: 100, backwards: true })

属性値に関数の指定も受け入れる !

総数とインデックスが渡される

Value Functions

$div.velocity({ opacity: function() { return Math.random() } }); !!$div.velocity({translateX: function(index, total) { /* Generate translateX's end value. */ return (index * 10) + “px"; } });

　初期値の指定ができる !

!

最初のキューのみ有効となる !

Forcefeeding

$div.velocity({ /* Two-item array format. */ translateX: [ 500, 0 ], /* Three-item array format with a per-property easing. */ opacity: [ 0, "easeInSine", 1 ] }); !!$div /* Optionally forcefeed here. */ .velocity({ translateX: [ 500, 0 ] }) /* Do not forcefeed here; 500 is internally cached. */ .velocity({ translateX: 1000 });

jQueryを介さずに使用することが可能

Utility Function

/* Standard multi-argument syntax. */ var divs = document.getElementsByTagName("div"); $.Velocity.animate(divs, { opacity: 0 }, { duration: 1500 }); !/* Alternative single-argument syntax. */ var divs = document.getElementsByTagName("div"); $.Velocity.animate({ elements: divs, properties: { opacity: 0 }, options: { duration: 1500 } );

様々なcallout、transitionが定義されている

UI Pack pluginscallout.bounce callout.shake callout.flash callout.pulse callout.swing callout.tada transition.flipXIn transition.flipXOut transition.flipYIn transition.flipYOut transition.flipBounceXIn transition.flipBounceXOut transition.flipBounceYIn transition.flipBounceYOut transition.swoopIn transition.swoopOut transition.whirlIn transition.whirlOut transition.shrinkIn transition.shrinkOut transition.expandIn transition.expandOut transition.bounceIn transition.bounceOut transition.bounceUpIn transition.bounceUpOut transition.bounceDownIn transition.bounceDownOut

transition.bounceLeftIn transition.bounceLeftOut transition.bounceRightIn transition.bounceRightOut transition.slideUpIn transition.slideUpOut transition.slideDownIn transition.slideDownOut transition.slideLeftIn transition.slideLeftOut transition.slideRightIn transition.slideRightOut transition.slideUpBigIn transition.slideUpBigOut transition.slideDownBigIn transition.slideDownBigOut transition.slideLeftBigIn transition.slideLeftBigOut transition.slideRightBigIn transition.slideRightBigOut transition.perspectiveUpIn transition.perspectiveUpOut transition.perspectiveDownIn transition.perspectiveDownOut transition.perspectiveLeftIn transition.perspectiveLeftOut transition.perspectiveRightIn transition.perspectiveRightOut

以上、全機能網羅でした アニメーションフルのサイトに適用してみましたが

明らかに動きがスムーズになりました !

個人的にはanimateを同時に複数行う可能性のあるサイトには must

のライブラリだと思いました !

是非皆様も導入ください

julianshapiro/velocity | github https://github.com/julianshapiro/velocity Velocity.js|GitHub Accelerated JavaScript animation. http://julian.com/research/velocity/ Incredibly Fast UI Animation Using Velocity.js http://www.sitepoint.com/incredibly-fast-ui-animation-using-velocity-js/ Improving UI Animation Workflow with Velocity.js http://css-tricks.com/improving-ui-animation-workflow-velocity-js/ CSS vs. JS Animation: Which is Faster? http://davidwalsh.name/css-js-animation Techniques for matching native app performance on the web with HTML5 http://triblondon.github.io/talk-html5perf/#/32

Browser Garbage Collection and Frame Rate http://blog.artillery.com/2012/10/browser-garbage-collection-and-framerate.html

jQueryで破棄されたrequestAnimationFrameとJSでのアニメーション実装で注意すること http://0-9.sakura.ne.jp/pub/lt/modest/start.html demo list http://codepen.io/julianshapiro/public-list/

参照