こんにちは、CTOのづやです。
今更ですが、jQueryのプラグインでアニメーションを高速化してくれる「Velocity.js」を使ってみました。
今回は、簡単な使い方をまとめたのでご紹介したいと思います。
http://julian.com/research/velocity/
上記の公式ページにjQueryやtransitとのアニメーションの比較をできるデモがありますが、他よりかなり軽快に動くようです。モバイル対応もいい感じらしいですよ。
使うときは、ソースをとってくるか、用意されているCDNなどからVelocity.jsを読み込みます。
<!-- 今回はjQueryも読み込む --> <script src="//code.jquery.com/jquery-2.1.3.min.js"></script> <!-- CDNから読み込んでみる --> <script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js"></script>
下のようなdivを用意して、公式サイトを見ながら単純に動かしてみました。
<style> #box1 { width:100px; height:100px; color:#000000; background-color: red; position: absolute; top:0; left: 0; } </style> <div id="box1">BOXだよ</div>
// animateみたいな感じで呼べるのが特徴ですね $("#box1").velocity({ top: 100 , left:100 }, 1000);
無事、divがななめ右下に動きました。
animateの代替えとして使えるので、引数も同じ感じで指定できます。
// easingも追加したり $("#box1").velocity({ top: 100 , left:100 }, 1000 , "swing"); // complateイベントを追加したり $("#box1").velocity({ top: 100 , left:100 }, 1000 , "swing" , function(){ console.log("move end!"); }); // 細かいオプションを指定できたりします $("#box1").velocity({ top: 100 , left:100 } , { duration: 5000, easing: "swing", complete : function() { console.log("move end!"); } , progress : function(elements, complete, remaining, start, tweenValue) { console.log(elements, complete, remaining, start, tweenValue); } });
jQueryでお馴染みのfadeIn/fadeOutやslideDown/slideUpも用意されているので、簡単に記載することができます。
// fadeIn $("#box1").velocity("fadeIn", { duration: 1500 }); // fadeOut $("#box1").velocity("fadeOut", { duration: 1500 }); // slideDown $("#box1").velocity("slideDown", { duration: 1500 }); // slideUp $("#box1").velocity("slideUp", { duration: 1500 });
簡単ですなぁ。
メソッドチェーンも当然いけます。
$("#box1") .velocity({ top: 100 , left:100 }, 1000 , "swing") .velocity("fadeOut", { duration: 1500 });
CSS3のプロパティも指定できちゃうようです。Prefixも気にしなくてOK!
$("#box1").velocity({ translateX:"100px" , translateY:"100px" } , 1000);
animate単独ではできない、colorの指定もできます。
$("#box1").velocity({ backgroundColor : "#000000" , color:"#FFFFFF" } , 1000);
stopも使えます。
$("#box1").velocity({ backgroundColor : "#000000" , color:"#FFFFFF" , top:"200px" , left:"200px" } , 5000); // こんなことはしないでしょうが、無理やり止めてみる setTimeout(function(){ $("#box1").velocity("stop"); } , 2500);
逆再生もできます。
$("#box1").velocity({ backgroundColor : "#000000" , color:"#FFFFFF" , top:"200px" , left:"200px" } , 1000); // 逆再生もできます setTimeout(function(){ $("#box1").velocity("reverse"); // 第2引数渡すと逆再生時の秒数を変更できます //$("#box1").velocity("reverse" , 2500); } , 2000);
SVGのプロパティも指定できちゃいます。
<!-- 線も色も見えない状態のsvgを用意しておいて --> <style> svg { width: 200px; height: 200px; fill:none; stroke:#00ffff; stroke-width:2px; stroke-dasharray:800px; stroke-dashoffset:800px; } </style> <svg> <rect x="0" y="0" width="100%" height="100%"/> </svg>
// 線を描いた後色を塗ってみたり $("svg") .velocity({ strokeDashoffset:0 }, 1000 , "swing") .velocity({ fill:"#00ffff" }, 1000 , "swing");
See the Pen Velocity.jsのSVGサンプル by zuya (@zuya) on CodePen.
ざっくりと説明しましたが、高機能なので他にも色々なことができるようです。
基本的にjQueryのanimateと同じように使えるので、animateを使用する場合はVelocityを使うようにするだけで幸せになれるのではないでしょうか。
積極的に使っていきたいですね。
それでは。
【jQueryを利用したアニメーションの実装】
※ SVGとjQueryで絵を描いているようなアニメーションを実装する方法
※ CSS3とjQueryでオリジナル画像のスプライトアニメーションを実装する方法
※ アニメーションに便利なJavaScriptライブラリTweenMaxを使ってみる(その1)