[JS] ぽよんっ的動作

タグ :

これまでの基礎知識を結集して簡易アプリを作成するシリーズです。
今回はアニメーションにてやわらかい物を表現してみます。

マウスオーバーからマウスアウトすると円形の大きさが可変するアニメーションが動作し、「ぽよんっ」的な動きをします。円形をクリックするとさらに激しく動作します。軽く遊んでみてください。

アプリ概要

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

動作条件
 - マウスアウト時
 - クリック時
やわらかい動き
 - アニメーションで動作させる
 - 自然な動きに近づける

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

  • マウスアウト
  • マウスダウン
  • マウスアップ
  • タイマセット
  • アニメーションによるサイズ変更
  • アニメーションによる位置変更

作成したサンプル

処理の流れとコードは以下になります。

[ 動作フロー ]
js_poyon_flow
[ コード ]
$(function() {
	var timer;
	var pos  = new Array(  40,  55,  45,  50 );
	var size = new Array( 120,  90, 110, 100 );
	var time = new Array( 100, 100, 100, 100 );
	var wait = new Array(   0, 100, 200, 300 );
	$('.poyon').mousedown(function() {
		sizeChange($(this), 60, 80, 50, 0);
	});
	$('.poyon').mouseup(function() {
		for (var i = 0; i < size.length; i++) {
			sizeChange($(this), pos[i], size[i], time[i], wait[i]);
		}
	});
	$('.poyon').mouseout(function() {
		for (var i = 0; i < size.length; i++) {
			sizeChange($(this), pos[i], size[i], time[i], wait[i]);
		}
	});
	function sizeChange(obj, pos, size, time, wait) {
		timer = setTimeout(function(){
			obj.stop().animate({
				'top' : pos,
				'left' : pos,
				'width' : size,
				'height' : size
			}, time);
		}, wait);
	}
});
<h4>ぽよんっ的動作</h4>
<div class="poyon"></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;
}
詳しい説明は後述します。
HTML と CSS は非常に簡単です。円形の要素を表示させているだけです。動きは全て jQuery で行っています。内容も難しいものではなく、アニメーションを使って円形の大きさを連続で可変させているだけです。アニメーションでは、「大きく」→「少し小さく」→「少し大きく」→「元の大きさ」という動作でやんわりとした動きを表現しています。

コード解説

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

[ jQuery の説明 ]
[ 2行目〜6行目 アニメーション用データの準備 ]
var timer;
var pos  = new Array(  40,  55,  45,  50 );
var size = new Array( 120,  90, 110, 100 );
var time = new Array( 100, 100, 100, 100 );
var wait = new Array(   0, 100, 200, 300 );

アニメーション動作はこのデータを元に行います。
上からタイマー用変数、要素位置格納変数、要素サイズ格納変数、アニメーション時間格納変数、タイマー時間格納変数となります。
アニメーションを連続動作させるのに forループを用いましたが、ループ内でデータを可変させるのにはこの配列を使って行っています。要素番号順にアニメーションの動作が実行されることになります。

[ 7行目〜9行目 マウスダウン時の処理 ]
$('.poyon').mousedown(function() {
	myAnimate($(this), 60, 80, 50, 0);
});

マウスダウンの操作により実行される処理です。
マウスダウン操作で実行するアニメーションは 1 パターンのみなので、直接データを打ち込みました。呼び出しているユーザー定義関数については後述します。

[ 10行目〜14行目 マウスアップ時の処理 ]
$('.poyon').mouseup(function() {
	for (var i = 0; i < size.length; i++) {
		myAnimate($(this), pos[i], size[i], time[i], wait[i]);
	}
});

マウスアップ操作により実行される処理です。
マウスアップ操作で実行するアニメーションは複数なので forループで行います。ループ内で用意した配列のデータを順番に使用していきます。呼び出しているユーザー定義関数については後述します。

[ 15行目〜19行目 マウスアウト時の処理 ]
$('.poyon').mouseout(function() {
	for (var i = 0; i < size.length; i++) {
		myAnimate($(this), pos[i], size[i], time[i], wait[i]);
	}
});

マウスアウト操作により実行される処理です。
マウスアウト操作で実行するアニメーションも複数なので forループを使用します。同じくループ内で用意した配列のデータを順番に使用していきます。呼び出しているユーザー定義関数については後述します。

[ 20行目〜29行目 アニメーション実行関数 ]
function sizeChange(obj, pos, size, time, wait) {

上記で呼び出しているユーザー定義関数です。アニメーションとタイマーにより要素の可変動作を行います。
引数には、要素オブジェクト、変更後の要素位置、変更後の要素サイズ、アニメーション時間、タイマー時間を持たせます。
ユーザー定義関数を用意せずに直接 forループ内に記述するとタイマー関数の関係上、連続動作ができなかったので関数化して実行するようにしました。関数化することで毎回の関数内で生成されるタイマーが別領域で実行することになり連続動作が可能になるのだと思って使っています。。。たぶん。。。

timer = setTimeout(function(){
	obj.stop().animate({
		'top' : pos,
		'left' : pos,
		'width' : size,
		'height' : size
	}, time);
}, wait);

アニメーション実行処理です。タイマーも同時に使用して、前のアニメーション終了後に実行されるようにしています。
関数の引数に持たせたデータを使ってアニメーションを実行しています。今回は正円形を使っているので、width と height は同じデータを使用できます。さらに要素位置も縦横同じ長さ分の位置なので、top と left も同じデータを使用しました。

まとめ

見て分かると思うのですが、マウスアウト時とマウスアップ時のアニメーション動作は全く同じです。マウスダウンにより要素が小さくなるので、マウスアップしたときの動作が若干激しく見えるだけです。このような人間の感覚をごまかす的な表現を取り入れても面白いのではないでしょうか。

ソースコードは結構簡潔にまとめられたと思うのですが、データを配列で用意するというのは現実的ではありません。アニメーション動作を変更するのにデータをいじるだけで偏向できるというのは良いと思うのですが、ソースコードを直接変更しないといけないので、使い難いかも。。。
まあ、こういった動作を変更することはそんなに無いと思いますが。。。

そんなに使いどころが無いかもしれませんが、ページ上で動作の変更ができると面白いかもしれないですな。
という訳で次回はアニメーション動作の可変をテーマにして記事を書いて見たいと思います。

Share

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

Comment

コメントを残す

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

  • Twitter
  • Facebook
  • Google Plus
  • RSS Feed