アニメーションを高速化する「Velocity.js」を使ってみた。

こんにちは、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も指定できる

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のプロパティも指定できちゃいます。

<!-- 線も色も見えない状態の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）

※ アニメーションに便利なJavaScriptライブラリTweenMaxを使ってみる（その2）

※ アニメーションに便利なJavaScriptライブラリTweenMaxを使ってみる（その3）

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。