حركات جافا سكربت هتمل دوم

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

基础页面

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

النموذج

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

创建动画容器

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

النموذج

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

为元素添加样式

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

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

النموذج

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

جرب بنفسك

شيفرة الحركة

يتم تنفيذ حركات JavaScript من خلال برمجة التغييرات التدريجية في نمط العنصر.

يتم إكمال هذا التغيير من خلال استخدام معادلة حسابية. عندما تكون فترات الزمن قصيرة، يبدو التحرك متسلسلاً.

الشيفرة الأساسية هي:

النموذج

var id = setInterval(frame, 5);
function frame() {
    if (/* اختبار ما إذا تم الانتهاء */) {
        clearInterval(id);
    } else {
         /* رمز تغيير نمط العنصر */
    }
}

استخدام JavaScript لإنشاء حركة

النموذج

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'; 
        }
     }
}

جرب بنفسك