[JS] アニメーションエフェクト

タグ :

これまでの基礎知識を結集して簡易アプリを作成するシリーズです。
今回は前記事に続いてアニメーションのエフェクト機能を可変するアプリについてです。

アニメーション動作が前記事とは違う感じですが、エフェクト機能を使う事で簡単に表現できますよー、ということです。jQuery Easing Plugin を使用しています。右表のエフェクト部分のセレクターっぽい部分でエフェクトを選択できます。選択したエフェクトが円形に適用されてアニメーション動作が可変されます。かなり違和感のある動きをするエフェクトもありますが、色々と試してみてください。

アプリ概要

以下のような仕様とします。

設定項目
 - エフェクト
 - アニメーション後の要素サイズ
 - アニメーションに要する時間
 - 簡単な操作で変更できる
動作の動的可変
 - データを元にアニメーションを実行させる
 - ページ上の数値と文字列をデータとして使用する

必要となる処理は以下になります。

  • クリックイベント
  • 数値計算
  • 指定要素のテキスト取得
  • データ配列への格納処理
  • アニメーションエフェクト指定

作成準備

まずは jQuery Easing Plugin をサイトからダウンロードします。

ダウンロードは こちら から。

js_easing_download

このファイル「jquery.easing.1.3.js」を動作環境にコピーして使用します。
HTMLでファイルを読み込みをすれば準備完了です。

<script src="jquery.easing.1.3.js"></script>

アニメーションにエフェクトを付加するには、

animate({‘動作’}, ‘時間’, ‘エフェクト’);

のように時間の後にカンマでエフェクトを指定することで付加できます。

作成したサンプル

コードは以下になります。

[ コード ]
$(function() {
	var gSize = new Array;
	var gTime = new Array;
	var gEffect;
	var bSize = parseInt($('.poyon').css('width'));
	var bPos = parseInt($('.poyon').css('top'));
	var timer;
	dataSet();
	$('.poyon').mousedown(function() {
		var pos = bPos + ((bSize - gSize[0]) / 2);
		sizeChange($(this), pos, gSize[0], gTime[0], gEffect, 0);
	});
	$('.poyon').mouseup(function() {
		myAnimate($(this));
	});
	$('.poyon').mouseout(function() {
		myAnimate($(this));
	});
	$('.minus').click(function() {
		var tag = $(this).attr('class').split(" ");
		var val = parseInt($("li."+tag[0]).text());
		if (tag[0].slice(0, 1) == "s") {
			if (val > 10 && val <= 200) { val -= 10; }
		} else {
			if (val > 0 && val <= 500) { val -= 50; }
		}
		$("li."+tag[0]).text(val);
		dataSet();
	});
	$('.plus').click(function() {
		var tag = $(this).attr('class').split(" ");
		var val = parseInt($("li."+tag[0]).text());
		if (tag[0].slice(0, 1) == "s") {
			if (val >= 10 && val < 200) { val += 10; }
		} else {
			if (val >= 0 && val < 500) { val += 50; }
		}
		$("li."+tag[0]).text(val);
		dataSet();
	});
	$('.select').click(function() {
		var y = $(this).offset().top + $(this).height();
		var cls = $(this).attr('class').split(" ");
		$('.set').removeClass('set');
		if ($('.list').css('display') == 'none') {
			$('.list').css('display', 'block');
			$('li.'+cls[0]).addClass('set');
		} else if ($('.list').offset().top == y) {
			$('.list').css('display', 'none');
		} else {
			$('li.'+cls[0]).addClass('set');
		}
		$('.list').offset({top:y});
	});
	$('.list ul li').click(function() {
		$('.set').text($(this).text());
		$('.set').removeClass('set');
		$('.list').css('display', 'none');
		dataSet();
	});
	function dataSet() {
		var i = 0;
		$('.size ul li').each(function() {
			gSize[i] = parseInt($(this).text());
			i++;
		});
		i = 0;
		$('.time ul li').each(function() {
			gTime[i] = parseInt($(this).text());
			i++;
		});
		gEffect = $('.effect ul li').text();
	}
	function myAnimate(obj) {
		var pos;
		var wait = 0;
		for (var i = 1; i < gSize.length; i++) {
			pos = bPos + ((bSize - gSize[i]) / 2);
			sizeChange(obj, pos, gSize[i], gTime[i], gEffect, wait);
			wait += gTime[i];
		}
	}
	function sizeChange(obj, pos, size, time, effect, wait) {
		timer = setTimeout(function(){
			obj.stop().animate({
				'top' : pos,
				'left' : pos,
				'width' : size,
				'height' : size
			}, time, effect);
		}, wait);
	}
});
<h4>アニメーションを可変</h4>
<div class="poyon"></div>
<div class="effect">
	<p class="table-title">エフェクト</p>
	<ul>
		<p>指定エフェクト</p>
		<span class="e0 select">▼</span>
		<li class="e0">easeOutBounce</li>
	</ul>
</div>
<div class="size">
	<p class="table-title">サイズ(px)</p>
	<ul>
		<p>クリック時</p>
		<span class="s0 minus">-</span>
		<span class="s0 plus">+</span>
		<li class="s0">80</li>
		<p>アニメーション</p>
		<span class="s1 minus">-</span>
		<span class="s1 plus">+</span>
		<li class="s1">120</li>
		<span class="s2 minus">-</span>
		<span class="s2 plus">+</span>
		<li class="s2">100</li>
	</ul>
</div>
<div class="time">
	<p class="table-title">時間(ms)</p>
	<ul>
		<p>クリック時</p>
		<span class="t0 minus">-</span>
		<span class="t0 plus">+</span>
		<li class="t0">100</li>
		<p>アニメーション</p>
		<span class="t1 minus">-</span>
		<span class="t1 plus">+</span>
		<li class="t1">100</li>
		<span class="t2 minus">-</span>
		<span class="t2 plus">+</span>
		<li class="t2">500</li>
	</ul>
</div>
<div class="list">
	<ul>
		<li>linear</li>
		<li>swing</li>
		<li>jswing</li>
		<li>easeInQuad</li>
		<li>easeInCubic</li>
		<li>easeInQuart</li>
		<li>easeInQuint</li>
		<li>easeInSine</li>
		<li>easeInExpo</li>
		<li>easeInCirc</li>
		<li>easeOutElastic</li>
		<li>easeInBack</li>
		<li>easeOutBack</li>
		<li>easeInOutBack</li>
		<li>easeOutBounce</li>
		<li>easeInOutBounce</li>
	</ul>
</div>
.poyon {
	position: absolute; top: 50px; left: 50px;
	width: 100px; height: 100px;
	-webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: #999;
	background: blue;
}
.effect {
	position: absolute; top: 50px; left: 230px;
	background: #aaa; text-align: center;
}
.list {
	position: absolute; top: 250px; left: 250px;
	background: #ccc; text-align: left;
	display: none; cursor: pointer;
}
.size {
	position: absolute; top: 150px; left: 230px;
	background: #aaa; text-align: center;
}
.time {
	position: absolute; top: 150px; left: 380px;
	background: #aaa; text-align: center;
}
.table-title {
	margin: 0 0 0 0;
	padding-top: 5px;
	background: #777;
}
.effect ul, .size ul, .time ul, .list ul {
	list-style-type: none;
}
.effect ul {
	margin: 0px 20px 0px -20px;
}
.list ul {
	margin: 0;
	padding: 0;
}
.list ul li:hover {
	background: #eee;
}
.size ul, .time ul {
	margin: 0px 10px 0px -20px;
}
.effect ul li, .size ul li, .time ul li {
	height: 20px;
	margin-bottom: 10px;
	background: #eee;
}
.effect ul li {
	width: 165px;
}
.list ul li {
	width: 145px;
	padding-left: 5px;
}
.size ul li, .time ul li {
	width: 100px;
}
.effect ul li {
	text-align: left;
	padding-left: 5px;
}
.minus {
	position: absolute; left: 20px;
	width: 20px; height: 20px;
	background: blue; cursor: pointer;
}
.plus {
	position: absolute; left: 100px;
	width: 20px; height: 20px;
	background: red; cursor: pointer;
}
.select {
	position: absolute; left: 170px;
	width: 20px; height: 20px;
	background: gray; cursor: pointer;
}
詳しい説明は後述します。
前記事「アニメーションを可変」からエフェクト選択とそのエフェクトを追加したアニメーションに変更しただけです。エフェクト選択部の右のボタンをクリックするとエフェクトリストが表示されます。そのリストから使用したいエフェクトを選択して動作を可変できます。前記事では、アニメーション動作を4段階に分けていましたが、今回はエフェクトを使用するので始まりと終わりの2段階のみとしました。

コード解説

jQuery のコードの説明をします。

[ jQuery の説明 ]
[ 2行目〜8行目 アニメーション用データを取得 ]
var gEffect;

エフェクト用文字列を格納する変数です。この変数に格納されたエフェクトでアニメーションが動作します。
これ以外は前回と同じなので割愛します。

[ 9行目〜18行目 マウス操作によるアニメーション動作 ]

前回とほとんど同じなので割愛します。

[ 19行目〜40行目 「+」と「ー」部分のクリック時の処理 ]

前回と同じなので割愛します。

[ 41行目〜60行目 エフェクト選択操作のための処理 ]
$('.select').click(function() {

var y = $(this).offset().top + $(this).height();

リストを表示する位置を取得します。
クリックされたボタン位置を取得し、そこからボタン高さ分を加算して求めています。

var cls = $(this).attr('class').split(" ");

テキストを変更する部分のクラス名を取得します。
クリックした箇所のクラス名には「e0 select」という名前になっているので、スペースで区切って「e0」のみを取得しています。

$('.set').removeClass('set');

「set」というクラス名を一旦削除します。
テキスト変更時には、「set」というクラス名が付加してある要素を変更するようにするため、最初に全ての「set」を削除しておき、後からクリックされた部分に対応する要素に「set」を追加しています。

if ($('.list').css('display') == 'none') {
	$('.list').css('display', 'block');
	$('li.'+cls[0]).addClass('set');
} else if ($('.list').offset().top == y) {
	$('.list').css('display', 'none');
} else {
	$('li.'+cls[0]).addClass('set');
}

クリックした時のリストの表示状態により処理を分けています。
リストが非表示の場合は、リストを表示し、クリックした部分に対応する要素にクラス名「set」を追加する処理を実行します。
リストがクリックした部分の下に既に表示中の場合は、非表示にします。
それ以外の場合は、クラス名「set」を追加する処理を実行します。※現在のページではこの処理は実行されません。エフェクト選択部分が複数ある場合に実行されます。

$('.list').offset({top:y});

リストをクリックした部分の下の位置に移動させます。
※現在のページではこの処理は実行されますが、実際に意味がありません。エフェクト選択部分が複数ある場合に意味を発揮します。

[ 55行目〜60行目 リストから選択したときの処理 ]
$('.set').text($(this).text());

要素のテキストを選択したエフェクト文字列に変更します。

$('.set').removeClass('set');
$('.list').css('display', 'none');

クラス名「set」を除去し、リストを非表示にします。

dataSet();

アニメーション動作に使用するデータを更新します。

[ 61行目〜73行目 アニメーション用データの更新処理 ]
gEffect = $('.effect ul li').text();

エフェクト用データをページ内の文字列に更新します。
これ以外は前回と同じなので割愛します。

[ 74行目〜92行目 アニメーション用処理 ]

前回とほとんど同じなので割愛します。
変更部分は、アニメーションのエフェクト指定部分とそのデータを関数の引数に追加しただけです。

まとめ

あまり出来がよろしくありませんが、一応エフェクトを変える事で動作を可変させることはできます。時間と選択するエフェクトを調整して、いい感じの動作を作れますが、結構面倒くさいですよね。

もっと簡単にアニメーションを作成できるようにするにはどうしたらいいのか、その辺りが今後の課題になりそうです。

Share

  • このエントリーをはてなブックマークに追加

Comment

コメントを残す

*がついている欄は必須項目です。

  • Twitter
  • Facebook
  • Google Plus
  • RSS Feed