Twitter

jQuery.Deferredで順番にアニメーションを実行する

2013/02/25 | jquery | コメント (0)

要素をアニメーションさせて印象的に見せる「動きのあるメインビジュアル」は以前まで主にFlashが使われていましたが、最近ではJavascriptで実装されているものが増えてきています。Javascriptを利用したアニメーションは、jQueryとEasing Pluginを使うことで比較的簡単に個々の動きをつけることができます。

個々に設定したアニメーションを順番に再生するために、今まで自分はdelay()やコールバックを利用していましたが、Web Designing(2013.03)にjQueryのDeferredオブジェクトを利用して関数を順番に実行する方法が載っていたので処理の流れを確認するためメモを兼ねてコードを自分なりに整理してみました。

個人的に今回のポイントとなるのはjQuery.Deferredとスキップボタンに使用するstop()。
調べてみるとstop()の引数には実は色々使える機能がありました。以下のコードではstop()を利用してアニメーションの最後のコマへとジャンプさせています。

$(function() {

	// 各要素を変数に指定 ///////////////////////////////////////////////////
	var $obj01 = $('#obj01'),
	    $obj02 = $('#obj02'),
	    $obj03 = $('#obj03'),
	    $objGroup01 = $('#obj04, #obj05, #obj06'),
	    $skip = $('#skipBtn'),
	    $animation = $('#animationArea');

	// 各アニメーション関数 /////////////////////////////////////////////////
	function animation01() {
		return $obj01.fadeIn(1000); // 関数を返り値にするためreturnを記述
	}

	function animation02(){
		return $obj02.fadeIn(1000);
	}

	function animation03(){
		return $obj03.animate({
			bottom: 140
		}, 500, 'easeOutBack');
	}

	function animation04(){
		return $objGroup01.delay(500).fadeIn(1000);
	}

	function animation05(){
		return $skip.fadeOut(200);
	}

	// 関数の実行順序を登録 /////////////////////////////////////////////////
	var $deferred = $.Deferred(function(deferred){
		deferred.then(animation01)
		        .then(animation02)
		        .then(animation03)
		        .then(animation04)
		        .then(animation05);
	});

	// スキップボタン ///////////////////////////////////////////////////////
	$skip.on('click', function(){
		onSkip();
		return false;
	});

	function onSkip(){ // アニメーション中の要素を停止、完了時の状態にする
		$obj01.stop(true, true).show();
		$obj02.stop(true, true).show();
		$obj03.stop(true, true).css('bottom', 140);
		$objGroup01.stop(true, true).show();
		$skip.stop(true, true).hide();
	}

	// 読み込み完了したら関数を実行 /////////////////////////////////////////
	$(window).on('load', function(){
		$deferred.resolve(); // resolveでdeferredオブジェクトを実行
	});

}());

jQuery.Deferredとstop()に関しては以下のサイトがとても勉強になりました。
分かりやすく有益な情報ありがとうございます!

参考: jQuery.Deferredって何 – Takazudo hamalog
参考: jQuery.Deferred を使ってみる。 | バシャログ。
参考: [jQuery]こんな機能があったんだ。jQuery stop() | WEBプログラム覚書


0 Comments»

コメントはまだありません。

このコメント欄の RSS フィード TrackBack URI

コメントをどうぞ »

初めてコメントされる方は管理人の承認が必要となります。承認されるまではコメントは表示されませんのでご了承ください。

CopyRight© 2017 2GRAVITY All Rights Reserved. | powered by WordPress

Page top