جسٹاگرافک ایچ تی ام ال انیمیشن

学习使用 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;
}

به طور شخصی امتحان کنید

کد انیمیشن

انیمیشن‌های جی‌اس‌اینک از طریق برنامه‌ریزی تغییرات تدریجی استایل عناصر انجام می‌شوند.

این تغییرات از طریق یک شمارنده فراخوانی می‌شوند. وقتی شمارنده با تاخیر کم فراخوانی می‌شود، انیمیشن به نظر پیوسته می‌رسد.

کد پایه:

مثال

var id = setInterval(frame, 5);
function frame() {
    if (/* تست کامل شدن */) {
        clearInterval(id);
    } else {
         /* کد تغییر استایل عناصر */
    }
}

با استفاده از جی‌اس‌اینک انیمیشن ایجاد کنید

مثال

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

به طور شخصی امتحان کنید