JavaScriptでアニメーション効果を実装する

Dreamweaver のタイムライン機能を使用して、興味深いアニメーション効果を作成しています。Dreamweaver は、ユーザー向けに特定のプログラム コードを自動的に生成します。アニメーションの実装原理について考えたことがありますか?実際、原理は非常に単純で、主にタイマー機能を使用して、関連する導入を通じて、推論を導き、より魅力的なアニメーション効果を作成することができる簡単なアニメーション制作プロセスを説明します。

この例の効果は、Webページ上で「移動開始」ボタンをクリックすると指定したレイヤーが左から右に移動し、「移動停止」ボタンをクリックすると停止します。動いている。

startMove()

{

var left = eval(div1.style.left.replace("px", "" ));
if (left < document.body.scrollWidth - 150)
div1.style.left = left + 1;

else

div1.style.left = 10;
movingID = setTimeout("startMove()", 10);
}

function stopMove()
{
clearTimeout(movingID);
}

移動できます...

;
<入力タイプ="button" value="移動を停止" onClick="stopMove()">


, interval) 関数、この関数のパラメーター形式は次のとおりです:

最初のパラメーター "function" は関数ですタイムアウト後に呼び出される名前、2 番目のパラメーター「interval」はマイクロ秒単位のタイムアウト値です。

注意すべき点は、このタイマーを停止したい場合は、setTimeout()関数を呼び出した後に戻り値を保存し、clearTimeout(id)関数でタイマーをキャンセルする必要があることです。