JavaScript HTML DOM 动画

学习使用 JavaScript 来创建 HTML 动画。

基础页面

为了演示如何通过 JavaScript 来创建 HTML 动画，我们将使用一张简单的网页：

Shi li

<!DOCTYPE html>
<html>
<body>
<h1>我的第一部 JavaScript 动画</h1>
<div id="animation">我的动画在这里。</div>
</body>
</html>

创建动画容器

所有动画都应该与容器元素关联。

Shi li

<div id ="container">
    <div id ="animate">我的动画在这里。</div>
</div>

为元素添加样式

应该通过 style = "position: relative" 创建容器元素。

应该通过 style = "position: absolute创建动画元素。

Shi li

#container {
    width: 400px;
    height: 400px;
    position: relative;
    background: yellow;
}
#animate {
    width: 50px;
    height: 50px;
    position: absolute;
    background: red;
}

Zi jing shi yi yi

Dong hua dian ma

JavaScript dong hua shi dui yuan su yan shi jing jian shi bian hua bing jing cheng bing cheng de.

Zhe zhong bian hua tong guo yi ge jì shu qi lai diao yong. Dang jì shu qi jian ge hen xiao shi, dong hua kan shang jiu shi lian tiao de.

Ji ben dian ma shi:

Shi li

var id = setInterval(frame, 5);
function frame() {
    if (/* ce shi shi fang */) {
        clearInterval(id);
    } else {
         /* Gai bian yuan su yan shi de dian ma */
    }
}

Shi yong JavaScript chuang jian dong hua

Shi li

function myMove() {
    var elem =  document.getElementById("animate"); 
    var pos = 0;
    var id = setInterval(frame, 5);
     function frame() {
        if (pos ==  350) {
             clearInterval(id);
        } else {
             pos++; 
             elem.style.top = pos + 'px'; 
             elem.style.left = pos + 'px'; 
        }
     }
}

Zi jing shi yi yi