چگونه ایجاد شود: انیمیشن HTML جاوااسکریپت
- پچھلے ویب پیج جی ایس این اچیوس رینجر
- پائیدار ویب پیج جی ایس این سٹرنگ لنگت
آموزش نحوه ایجاد انیمیشن با استفاده از جاوااسکریپت.
یک وبسایت پایه
برای نمایش نحوه استفاده از جاوااسکریپت برای ایجاد انیمیشن 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;
{}
کد انیمیشن
انیمیشنهای جاوااسکریپت از طریق تغییر تدریجی استایل عناصر به وسیله برنامهنویسی ایجاد میشوند.
این تغییرات توسط تایمرها فراخوانی میشوند. هنگامی که تایمرها با تاخیر کم هستند، انیمیشن به نظر میرسد که پیوسته است.
کد پایه:
مثال
var id = setInterval(frame, 5);
function frame() {
if (/* آزمایش برای تمام شده */) {
clearInterval(id);
}
/* کد تغییر استایل عنصر */
{}
{}
برای ایجاد انیمیشن از جاوااسکریپت استفاده کنید
مثال
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);
}
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
{}
{}
{}
- پچھلے ویب پیج جی ایس این اچیوس رینجر
- پائیدار ویب پیج جی ایس این سٹرنگ لنگت
