در اين بخش روش ايجاد انيميشن با استفاده از جاوااسكريپت درHTML بيان ميگردد . يابعبارتي انيمشن هايHTML باجاوااسكريپت
براي نشان دادن نحوه ايجاد انيميشن هايHTML با جاوااسكريپت، ازيك صفحه وب ساده استفاده ميكنيم.
مثال ـ نمونه اسكريپت صفحهHTMLساده براي انيميشن
<!DOCTYPE html> <html> <body> <h1>My First JavaScript Animation</h1> <div id="animation">My animation will go here</div> </body> </html>
همه انيميشن ها بايد بايد مرتبت با عنصرمحفظه اي باشند، يعني انيميشن بايد در عنصر محفظ اي باشد.
مثال ـ نمونهcontainer براي انيمشن
<div id ="container"> <div id ="animate">My animation will go here</div> </div>
عنصر محفظه انيمشن بايد با استايل"position: relative" باشد .
همچنين عنصر انيميشن بايد با استايل"position : absolute" ايجاد شود .
مثال ـ استايل عناصر انيميش
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background: red;
}
انيميشن هاي جاوااسكريپت با برنامه نويسي روي تغييرات تدريجي استايل يك عنصر انجام ميشود. تغييرات توسط يك تايمر فراخوان ميشود، واگر فاصله فراخواني در تايمر كوچك تنظيم شد، حركات پيوسته به نظر ميرسد .كد پايه آن مطابق مثال زير است.
id = setInterval(frame, 5); function frame() { if (/* test for finished */) { clearInterval(id); } else { /* code to change the element style */ } }
مثال ـ ايجاد نمونه انيميشن كامل با جاوااسگريپت
function myMove() { let id = null; const elem = document.getElementById("animate"); let pos = 0; clearInterval(id); id = setInterval(frame, 5); function frame() { if (pos == 350) { clearInterval(id); } else { pos++; elem.style.top = pos + 'px'; elem.style.left = pos + 'px'; } } }