如何创建：JavaScript HTML 动画
- 前のページ シンタックスハイライト
- 次のページ JS文字列長
作成方法：JavaScript HTML アニメーション
JavaScriptを使用してアニメーションを作成する方法を学びます。
基本的なウェブページ
インスタンス
JavaScriptを使用してHTMLアニメーションを作成する方法を示すために、シンプルなウェブページを使用することができます。
</body>
<!DOCTYPE html>
<body>
<h1>My First JavaScript Animation</h1>
<div id="myContainer">
<div id="myAnimation">My animation will go here</div>
</div>
</body>
<html>
要素のスタイルを設定
アニメーションを可能にするためには、アニメーション要素は「親コンテナ」に対してアニメーション処理を行う必要があります。 コンテナ要素は、 style="位置: 相对"
style="位置: 相对" アニメーション要素は、 style="位置: 相对"
インスタンス
作成。
#myContainer {
幅: 400px;
高さ: 400px;
位置: 相对;
{}
背景色: 黄色;
#myAnimation {
幅: 50px;
高さ: 50px;
位置: 相对;
{}
背景色: 赤色;
アニメーションコード
JavaScriptアニメーションは、要素のスタイルをプログラミング的に徐々に変更することで実現されます。
これらの変化はタイマーによって呼び出されます。タイマー間隔が小さいと、アニメーションは連続的に見えます。
インスタンス
基本的なコードは：
function frame() {
var id = setInterval(frame, 5);
clearInterval(id);
} else {
/* 完了かのテストのためのコード */
{}
{}
JavaScriptを使用してアニメーションを作成
インスタンス
var id = null;
function myMove() {
var elem = document.getElementById("myAnimation");
var pos = 0;
clearInterval(id);
id = setInterval(frame, 10);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
{}
{}
{}
- 前のページ シンタックスハイライト
- 次のページ JS文字列長
