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

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

Kazuya Takato

Kazuya Takato

こんにちは、CTOのづやです。

今更ですが、jQueryのプラグインでアニメーションを高速化してくれる「Velocity.js」を使ってみました。
今回は、簡単な使い方をまとめたのでご紹介したいと思います。

まずは準備から

velocity.js

上記の公式ページに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サイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

1983年生まれ。SIerとしてのキャリアをスタートし、JavaやC#を中心に多岐にわたる開発プロジェクトにエンジニアとして参加。その経験を活かし、LIGを創業。バックエンドおよびフロントエンドエンジニアとしての深い知識と経験をもとに、多様なプロジェクトに従事。2023年7月には社長室室長に就任にし、社内の体制やルールの最適化、AI技術の推進など、経営戦略の一翼を担っています。

このメンバーの記事をもっと読む
使ってみた | 45 articles