カスタムアニメーション

作り方

yeffectsには、デフォルトでスタイルアニメーション、コールバックなどのアニメーションモジュールが用意されていますが、 オリジナルのアニメーションをオブジェクトとして作成し(カスタムアニメーション オブジェクト)、実行することも可能です。

カスタムアニメーション オブジェクトには以下の関数を用意する必要があります。

関数 説明
copy() このアニメーションの複製を生成します。
複製はアニメーション開始前の初期状態(一度も再生されていない状態)にしてください。
start() このアニメーションを開始します。
この関数はアニメーション開始時に1度だけ呼ばれます。
順序実行など、前にアニメーション実行がおこなわれる場合は、そのアニメーション終了直後に呼び出されます。
process(proceed) このアニメーションを続行します。
この関数はアニメーション中、定期的に呼び出されます。(呼び出し間隔はブラウザ、PCの性能により異なります。)
proceedにはstart呼出し後の経過時間がミリ秒単位で与えられます。
isFinished() このアニメーションが終了しているかどうかを取得します。
終了している場合はtrueを、それ以外の場合はfalseを返してください。
無限に再生し続けないよう、必ずいつかはtrueを返すようにしてください。

以上の関数を用意したら、あとはデフォルトのアニメーションモジュールと同様にオブジェクトを生成し、 アニメーションコンテナ(YPar,YSeq)やアニメーションエンジン(YEngine)に渡してください。

サンプル

以下は一定時間待機するYWaitオブジェクトのコードです。
生成時に待機時間が設定され、process関数内で経過時間が待機時間を過ぎたかどうかをチェックしています。

/**
* 待機コンテナです。
*/
function YWait(duration)
{
	if(duration == undefined) {
		throw new Error(this.ILLEGAL_ARGUMENTS + [duration].toString());
	}
	if(duration < 0) {
		throw new Error(this.ILLEGAL_ARGUMENTS + [duration].toString());
	}
	
	/**
	* 待機時間を保持します。
	*/
	this._duration = duration;
	
	/**
	* 終了したかどうかを保持します。
	*/
	this._finished = false;
}

/**
* 不正な引数を示すメッセージです。
*/
YWait.prototype.ILLEGAL_ARGUMENTS = "不正な引数です: ";

/**
* コピーを生成します。
*/
YWait.prototype.copy = function()
{
	return new YWait(this._duration);
};

/**
* 完了したかどうかを判定します。
*/
YWait.prototype.isFinished = function()
{
	return this._finished;
};

/**
* 開始します。
*/
YWait.prototype.start = function()
{
	;
};

/**
* 処理を続行します。
*/
YWait.prototype.process = function(proceed)
{
	if(proceed >= this._duration) {
		this._finished = true;
	}
};



Copyright(C) 2009 やざわラボ