انیمیشن HTML DOM در JavaScript

یادگیری JavaScript

تعداد بازدید : 2662

تاریخ و ساعت انتشار : سه شنبه 23 مرداد 1397 07:46

برای ایجاد انیمیشن های HTML با استفاده از جاوا اسکریپت را یاد بگیرید.

یک صفحه وب پایه

برای نشان دادن نحوه ایجاد انیمیشن های HTML با جاوا اسکریپت، از یک صفحه وب ساده

صفحه ساده

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript Animation</h1>

<div id="animation">My animation will go here</div>

</body>
</html>

مشاهده مثال

یک Container انیمیشن ایجاد کنید

تمام انیمیشن ها باید نسبت به عنصر Container باشند.

<div id ="container">
<div id ="animate">My animation will go here</div>
</div>

استایل عناصر

عنصر Container باید با style = "position: relative" ایجاد شود.

عنصر animation باید با 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 (/* test for finished */) {
clearInterval(id);
} else {
/* code to change the element style */
}
}

ایجاد انیمیشن با استفاده از جاوا اسکریپت

ایجاد انیمیشن با استفاده از جاوا اسکریپت

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

مشاهده مثال

دانلود فایل PDF مقاله درس بعدی درس قبلی

نظر شما