Velocity.js is next generation animation engine.
27 likes13,874 views
![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](https://image.slidesharecdn.com/velocityjs-140625015459-phpapp02/85/Velocity-js-is-next-generation-animation-engine-19-320.jpg)
![属性ごとにイージングの定義が可能
属性ごとのイージング
$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
});](https://image.slidesharecdn.com/velocityjs-140625015459-phpapp02/85/Velocity-js-is-next-generation-animation-engine-20-320.jpg)
![初期値の指定ができる
!
!
最初のキューのみ有効となる
!
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 });](https://image.slidesharecdn.com/velocityjs-140625015459-phpapp02/85/Velocity-js-is-next-generation-animation-engine-41-320.jpg)
Velocity.js is next generation animation engine.
- 1. velocity.js is next generation animation engine mi73
- 4. 使わない理由は つまり
- 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)
- 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. コンマ切り文法にも対応してます 文法 $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. つまり楽勝
- 14. 単一オブジェクトを引数にとっても良い 文法 $div.velocity({ properties: { opacity: 1 }, options: { duration: 500 } });
- 15. -webkitとか書かなくてよいです ! margin: 1 1 1 1 とかもいらないです 自動プリフィックス { padding: 1 } { paddingLeft: 1, paddingRight: 1 } { translateX: 1.1 }
- 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. メソッドチェーンを許容する 自動的にキューに入れられ実行される メソッドチェーン $div /* Animate the top property. */ .velocity({ top: 50 }) /* Then, when finished, animate the width property. */ .velocity({ width: 50 });
- 18. $.animateと同様に fastなどのduration定義も可能 slow normal fast $div.velocity({ opacity: 1 }, { duration: 1000 }); or $div.velocity({ opacity: 1 }, { duration: "slow" });
- 19. 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
- 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. 同じ要素にアニメーションを２回実行すると 自動的に最初に定義したものが終了時 ２つ目が実行される ! 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. 実行終了時にcomplete関数が実行される ! $.animateと違うのは 複数要素のアニメーション終了時に 一度だけ実行されて引数に全要素が入る ! 実行回数を指定した場合は最後の実行後のみ completeオプション $div.velocity({ opacity: 0 }, { /* Logs all the animated divs. */ complete: function(elements) { console.log(elements); } });
- 23. 実行開始時にcomplete関数が実行される 同様にコールバック関数の引数に全要素が入る 実行回数を指定した場合は最初の実行時のみ beginオプション $div.velocity({ opacity: 0 }, { /* Logs all the animated divs. */ begin: function(elements) { console.log(elements); } });
- 24. プログレス関数を定義できる 完了率、残り時間、開始UNIX時間を取得できる progressオプション $div.velocity({ opacity: 0 }, { progress: function(elements, percentComplete, timeRemaining, timeStart) { $percentComplete.html((percentComplete * 100) + "%"); $timeRemaining.html(timeRemaining + "ms remaining!"); } });
- 25. velocityではモバイルで自動的に有効になる 手動で無効にしたい場合に指定する Mobile Hardware Acceleration $divement.velocity(propertiesMap, { mobileHA: false });
- 26. loopを指定すると往復アニメーションする loop:1を指定すると２回分時間かかる ! begin,completeの実行回数は1回 ! loopはキャッシュして実行するのでパフォーマンスが高い loopオプション $div.velocity({ height: "10em" }, { loop: 2 });
- 27. loop時に指定すると それぞれの実行時に遅延が発生する 例の場合8回の遅延 delayオプション $div.velocity({ height: "+=10em" }, { loop: 4, /* Wait 100ms before alternating. */ delay: 100 });
- 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. 特定要素をスクロールすることができる コンテナーの指定も可能 軸の指定も可能 キューイングも可能 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. $.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. $.fadeIn,$.fadeOutは換えられた fadeIn, fadeOutコマンド $div .velocity("fadeIn", { duration: 1500 }) .velocity("fadeOut", { delay: 500, duration: 1500 });
- 32. $.slideDown,$.slideUpは換えられた slideDown, slideUpコマンド $div .velocity("slideDown", { duration: 1500 }) .velocity("slideUp", { delay: 500, duration: 1500 });
- 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. 属性の特定パラメータだけの指定も可能 textShadowX, textShadowY, textShadowBlurなど ! hooks $div.velocity({ textShadowBlur: "10px" });
- 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. 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. 複数要素のアニメーション時 順番に遅延しながら実行される staggerオプション ! $("div") .velocity("transition.slideLeftIn", { stagger: 250 })
- 39. stagger, dragオプションが有効時に 実行の順序を最終要素からにする Backwardsオプション $("div").velocity("transition.bounceDownOut", { stagger: 100, backwards: true })
- 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. 初期値の指定ができる ! ! 最初のキューのみ有効となる ! 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. 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 } );
- 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/ 参照