Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Velocity.js is next generation animation engine.

11,417 views

Published on

velocity.jsを使ってみた感じ、非常に軽快で明快だった。
導入しやすいように、機能の説明、使い方を日本語でまとめてみました。

Published in: Technology
  • Be the first to comment

Velocity.js is next generation animation engine.

  1. 1. velocity.js is next generation animation engine mi73
  2. 2. 早い、安い、旨いアニメーションエンジンのことである。 ! ! https://github.com/julianshapiro/velocity velocity.jsとは
  3. 3. jQueryのプラグインとして実装された GSAPに匹敵する実行速度を持った $.animateと互換性を持ち さらに使いやすい機能を持ち合わせた オープンソースのアニメーションエンジン velocity.jsとは
  4. 4. 使わない理由は つまり
  5. 5. ほとんどないと思う。 つまり
  6. 6. 今までスムーズなアニメーションを実現できるものとして GSAPがありましたが ライセンスが必要でしたし too muchなものという感覚がありました ! 今回、MITライセンスで 非常に軽快で、明快で、移行し易い アニメーションエンジンvelocity.jsを紹介します
  7. 7. 実行時に レイアウトスラッシング を起こしてしまう ! メモリー消費を高頻度で行うことがガーベッジコレクション・イベントを呼び アニメーションを瞬間的にフリーズさせてしまう ! リクエスト・アニメーション・フレームを使用していない 非アクティブ時に実行されないからなどの理由で ! ! 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の何がいけないのか
  8. 8. DOM操作は同期的処理で非効率である Layout thrashing var 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)
  9. 9. DOM属性のreadとwriteをそれぞれまとめて行うようにする ! チェーン・コールの際の属性をまとめてキャッシュをして横断的に流用するよう にする ! 同一コール内の子孫要素間では単位変換率(px、%、emなど)をキャッシュする ! 見た目が変わらないようなスタイルの更新を実行しない どうしたら早くなるのか
  10. 10. そんな工夫から生まれたvelocity.jsの 使い方を見ていきます ! ! http://julian.com/research/velocity/
  11. 11. $.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 });
  12. 12. コンマ切り文法にも対応してます 文法 $div.velocity({ top: 50 }, 1000); $div.velocity({ top: 50 }, 1000, "swing"); $div.velocity({ top: 50 }, "swing"); $div.velocity({ top: 50 }, 1000, function() {
 alert("Hi");
 });
  13. 13. つまり楽勝
  14. 14. 単一オブジェクトを引数にとっても良い 文法 $div.velocity({ properties: { opacity: 1 }, options: { duration: 500 } });
  15. 15. -webkitとか書かなくてよいです ! margin: 1 1 1 1 とかもいらないです 自動プリフィックス { padding: 1 } { paddingLeft: 1, paddingRight: 1 } { translateX: 1.1 }
  16. 16. 自動的に単位を解釈することができる 四則演算子を使用することができる 単位の省略 $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 });
  17. 17. メソッドチェーンを許容する 自動的にキューに入れられ実行される メソッドチェーン $div /* Animate the top property. */ .velocity({ top: 50 }) /* Then, when finished, animate the width property. */ .velocity({ width: 50 });
  18. 18. $.animateと同様に fastなどのduration定義も可能 slow normal fast $div.velocity({ opacity: 1 }, { duration: 1000 }); or $div.velocity({ opacity: 1 }, { duration: "slow" });
  19. 19. jQuery UIのイージング関数 CSS3のイージング定義に加えて ease-out, bezier() 新たにspringも導入された 張力と摩擦力を引数にとる ! 長さ1の配列を指定すると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
  20. 20. 属性ごとにイージングの定義が可能 属性ごとのイージング $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 });
  21. 21. 同じ要素にアニメーションを2回実行すると 自動的に最初に定義したものが終了時 2つ目が実行される ! 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);
  22. 22. 実行終了時にcomplete関数が実行される ! $.animateと違うのは 複数要素のアニメーション終了時に 一度だけ実行されて引数に全要素が入る ! 実行回数を指定した場合は最後の実行後のみ completeオプション $div.velocity({ opacity: 0 }, { /* Logs all the animated divs. */ complete: function(elements) { console.log(elements); } });
  23. 23. 実行開始時にcomplete関数が実行される 同様にコールバック関数の引数に全要素が入る 実行回数を指定した場合は最初の実行時のみ beginオプション $div.velocity({ opacity: 0 }, { /* Logs all the animated divs. */ begin: function(elements) { console.log(elements); } });
  24. 24. プログレス関数を定義できる 完了率、残り時間、開始UNIX時間を取得できる progressオプション $div.velocity({ opacity: 0 }, { progress: function(elements, percentComplete, timeRemaining, timeStart) { $percentComplete.html((percentComplete * 100) + "%"); $timeRemaining.html(timeRemaining + "ms remaining!"); } });
  25. 25. velocityではモバイルで自動的に有効になる 手動で無効にしたい場合に指定する Mobile Hardware Acceleration $divement.velocity(propertiesMap, { mobileHA: false });
  26. 26. loopを指定すると往復アニメーションする loop:1を指定すると2回分時間かかる ! begin,completeの実行回数は1回 ! loopはキャッシュして実行するのでパフォーマンスが高い loopオプション $div.velocity({ height: "10em" }, { loop: 2 });
  27. 27. loop時に指定すると それぞれの実行時に遅延が発生する
 例の場合8回の遅延 delayオプション $div.velocity({ height: "+=10em" }, { loop: 4, /* Wait 100ms before alternating. */ delay: 100 });
  28. 28. 実行前、実行後に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" });
  29. 29. 特定要素をスクロールすることができる コンテナーの指定も可能 軸の指定も可能 キューイングも可能 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 });
  30. 30. $.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);
  31. 31. $.fadeIn,$.fadeOutは換えられた fadeIn, fadeOutコマンド $div .velocity("fadeIn", { duration: 1500 }) .velocity("fadeOut", { delay: 500, duration: 1500 });
  32. 32. $.slideDown,$.slideUpは換えられた slideDown, slideUpコマンド $div .velocity("slideDown", { duration: 1500 }) .velocity("slideUp", { delay: 500, duration: 1500 });
  33. 33. 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" });
  34. 34. 属性の特定パラメータだけの指定も可能 textShadowX, textShadowY, textShadowBlurなど ! hooks $div.velocity({ textShadowBlur: "10px" });
  35. 35. 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 });
  36. 36. 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 });
  37. 37. 複数要素のアニメーション時 順番に遅延しながら実行される staggerオプション ! $("div") .velocity("transition.slideLeftIn", { stagger: 250 })
  38. 38. 複数要素のアニメーション時 少しずつずれながら実行される 実行時間は最後の要素に合わせられる dragオプション $("div").velocity("transition.slideDownBigIn", { drag: true })
  39. 39. stagger, dragオプションが有効時に
 実行の順序を最終要素からにする Backwardsオプション $("div").velocity("transition.bounceDownOut", { stagger: 100, backwards: true })
  40. 40. 属性値に関数の指定も受け入れる ! 総数とインデックスが渡される Value Functions $div.velocity({ opacity: function() { return Math.random() } }); ! ! $div.velocity({translateX: function(index, total) { /* Generate translateX's end value. */ return (index * 10) + “px"; } });
  41. 41.  初期値の指定ができる ! ! 最初のキューのみ有効となる ! 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 });
  42. 42. 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 } );
  43. 43. 様々なcallout、transitionが定義されている UI Pack plugins callout.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
  44. 44. 以上、全機能網羅でした アニメーションフルのサイトに適用してみましたが 明らかに動きがスムーズになりました ! 個人的にはanimateを同時に複数行う可能性のあるサイトには must のライブラリだと思いました ! 是非皆様も導入ください
  45. 45. 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/ 
 参照

×