JavaScriptアニメーション基礎知識

1.位置
文書の中の要素を特定の位置に置くのは簡単です.このような要素があると仮定しても良いです.

<p id=”message”>Whee!</p>

したがって、この要素の位置はJavaScript関数で設定できます.

function positionMessage(){
	if(!document.getElementById)	return false;
	if(!document.getElementById("message"))	return false;
	var elem = document.getElementById("message");
	elem.style.position = "absolute";
	elem.style.left = "50px";
	elem.style.top = "100px";
}

ページローディング時にこのpositionMessage関数を呼び出すと、このテキストはブラウザウィンドウの左端から50ピクセルに配置されます.ブラウザウィンドウのトップ境界から100ピクセルの位置:

Window.onload = positionMessage;

ただし、addLoadEvent関数を使って完成したほうがいいです.以下の通りです.

function addLoadEvent(func){
	var oldonload = window.onload;
	if(typeof window.onload != 'function'){
		window.onload = func;
	}else{
		window.onload = function(){
			oldonload();
			func();
		}
	}
}
addLoadEvent(positionMessage);

ある要素の位置を変えるのも簡単です.一つの関数を実行して、この要素のstyle.topまたはstyle.leftなどの属性を変更すればいいです.

function moveMessage(){
	if(!document.getElementById)	return false;
	if(!document.getElementById("message"))	return false;
	var elem = document.getElementById("message");
	elem.style.left = "200px";
}

もしmoveMessage関数をページローディング時に実行させると、この要素の位置は直ちに変化します.position関数によって与えられた元の位置は直ちに上書きされます.

addLoadEvent(positionMessage);
addLoadEvent(moveMessage);

本当のアニメーション効果を実現するには、要素の位置を時間とともに変化させなければならない.だから私たちは時間の間隔を「創造」しなければならない.
2.時間
JavaScript関数setTimeoutは、ある関数を所定の時間経過後に実行することができます.この関数には二つのパラメータがあります.最初のパラメータは通常文字列で、その内容は実行する関数の名前です.第二のパラメータは、ミリ秒単位で設定した値です.どれぐらいの時間がかかりますか?最初のパラメータで与えられた関数を実行し始めます.

setTimeout("function", interval)

clearTimeoutという関数で「実行待ち」キューの関数をキャンセルすることができます.この関数にはパラメータが必要です.あるsetTimeout関数が戻り値を呼び出す変数を保存しています.

clearTimeout(variable)

positionMessage関数を変更して、5秒(または5000ミリ秒)後にmoveMessage関数を呼び出すようにします.

function positionMessage(){
	if(!document.getElementById)	return false;
	if(!document.getElementById("message"))	return false;
	var elem = document.getElementById("message");
	elem.style.position = "absolute";
	elem.style.left = "50px";
	elem.style.top = "100px";
	movement = setTimeout("moveMessage()", 5000);
}

positionMessage関数はまだページ読み込み時に実行されます.

addLoadEvent(positionMessage);

3.時間の増分
私達は今モデベMessage関数を更新して、元素の移動をグラデーションで発生させます.次は新しいmoveMessage関数の論理です.
(1)要素の現在位置を取得します.
(2)要素が目的地に達した場合は、この関数を終了します.
(3)要素が目的地に到達していない場合は、目的地に少し近く移動します.
(4)上記のステップは、一定の時間間隔を経て、ステップ1から繰り返される.
以下はmoveMessage関数のコードリストです.

function moveElement(elementID, final_x, final_y, interval){
	if(!document.getElementById)	return false;
	if(!document.getElementById(elementID))	return false;
	var elem = document.getElementById(elementID);
	var xpos = parseInt(elem.style.left);
	var ypos = parseInt(elem.style.top);
	if(xpos == final_x && ypos == final_y){
		return true;
	}
	if(xpos<final_x){
		xpos++;
	}
	if(xpos>final_x){
		xpos--;
	}
	if(ypos<final_y){
		ypos++;
	}
	if(ypos>final_y){
		ypos--;
	}
	elem.style.left = xpos + "px";
	elem.style.top = ypos + "px";
	var repeat = "moveElement('" + elementID + "'," + final_x + "," + final_y + "," +interval + ")";
	movement = setTimeout(repeat, interval);
}