انیمیشن در HTML DOM

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

نحوه ایجاد انیمیشن در HTML با استفاده از جاوا اسکریپت را بیاموزید.[۱]

یک صفحه وب ساده

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

مثال

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript Animation</h1>

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

</body>
</html>

ایجاد یک نگه دارنده انیمیشن (Animation Container)

تمامی انیمیشن‌ها می‌بایست با یک عنصر نگه دارنده ربط داشته باشند.

مثال

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

طرح (Style) عناصر

عنصر نگه دارنده (container) می‌بایست با طرح برابر با "position: relative" ساخته شود.

عنصر animation نیز می‌بایست با طرح (Style) برابر با "position: absolute" ساخته شود.

مثال

 1#container {
 2  width: 400px;
 3  height: 400px;
 4  position: relative;
 5  background: yellow;
 6}
 7#animate {
 8  width: 50px;
 9  height: 50px;
10  position: absolute;
11  background: red;
12}


مشاهدهٔ نتیجه


کد انیمیشن

انیمیشن‌های جاوا اسکریپت با تغییرات آهسته در برنامه‌نویسی طرح (Style) عنصر صورت می‌گیرند.

این تغییرات timer نامیده می‌شود. زمانی که interval (به فارسی: وقفه) در time کوچک است، به نظر می‌رسد که انیمیشن ادامه می‌یابد.

کد پایه به صورت زیر است:

مثال

1var id = setInterval(frame, 5);
2
3function frame() {
4  if (/* test for finished */) {
5    clearInterval(id);
6  } else {
7    /* code to change the element style */
8  }
9}

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

مثال

 1function myMove() {
 2  var elem = document.getElementById("animate");
 3  var pos = 0;
 4  var id = setInterval(frame, 5);
 5  function frame() {
 6    if (pos == 350) {
 7      clearInterval(id);
 8    } else {
 9      pos++;
10      elem.style.top = pos + 'px';
11      elem.style.left = pos + 'px';
12    }
13  }
14}


مشاهدهٔ نتیجه



منابع آموزشی