JavaScript HTML DOM انیمیشن

آموزش استفاده از JavaScript برای ایجاد انیمیشن HTML.

صفحه اصلی

برای نمایش نحوه ایجاد انیمیشن HTML با استفاده از JavaScript، ما از یک وب‌سایت ساده استفاده خواهیم کرد:

مثال

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

آزماش کنید