انیمیشن در 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)

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

مثال

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

طرح (Style) عناصر

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

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

مثال

#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background: red;
}


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


کد انیمیشن

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

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

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

مثال

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


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



منابع آموزشی