چگونه ایجاد شود: انیمیشن HTML با استفاده از JavaScript
- صفحه قبل برجسته‌ساز گرامری
- صفحه بعدی طول رشته JS
آموزش نحوه ایجاد انیمیشن با استفاده از JavaScript.
یک وب‌سایت ساده
برای نمایش نحوه استفاده از JavaScript برای ایجاد انیمیشن HTML، می‌توانیم از یک وب‌سایت ساده استفاده کنیم.
مثال
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript Animation</h1>
<div id="myContainer">
<div id="myAnimation">My animation will go here</div>
</div>
</body>
<html>
استایل عنصر تنظیم شود
برای اینکه انیمیشن ممکن شود، عنصر انیمیشن باید نسبت به یک "مخزن والد" انیمیشن شود.
عناصر مخزن باید با style="position: relative" ایجاد شود.
عناصر انیمیشن باید با style="position: absolute" ایجاد شود.
مثال
#myContainer {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#myAnimation {
width: 50px;
height: 50px;
position: absolute;
background: red;
}
کد انیمیشن
انیمیشن‌های JavaScript از طریق تغییر تدریجی استایل عناصر با استفاده از برنامه‌نویسی ایجاد می‌شوند.
این تغییرات توسط تایمرها فراخوانی می‌شوند. هنگامی که تایمرها با تاخیر کم هستند، انیمیشن به نظر می‌رسد که پیوسته است.
کد پایه به شرح زیر است:
مثال
var id = setInterval(frame, 5);
function frame() {
if (/* بررسی برای پایان */) {
clearInterval(id);
} else {
/* کد تغییر استایل عنصر */
}
}
با استفاده از JavaScript، انیمیشن ایجاد کنید
مثال
var id = null;
function myMove() {
var elem = document.getElementById("myAnimation");
var pos = 0;
clearInterval(id);
id = setInterval(frame, 10);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
- صفحه قبل برجسته‌ساز گرامری
- صفحه بعدی طول رشته JS
