انیمیشن در HTML DOM

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
JavaScript-menu.png
موارد آموزشی
فرم‌ها در جاوا اسکریپت
تعریف شیء در جاوا اسکریپت
تابع در جاوا اسکریپت
HTML DOM در جاوا اسکریپت
۱معرفی DOM
۲متدهای DOM
۳اسناد DOM
۴عناصر HTML DOM
۵DOM HTML
۶DOM CSS
۷انیمیشن DOM
۸رویدادها در DOM
۹شنوندهٔ رویداد در DOM
۱۰پیمایش در DOM
۱۱عناصر HTML DOM (گره‌ها)
۱۲مجموعه‌های DOM
۱۳لیست گره‌ها در DOM
Browser BOM در جاوا اسکریپت
AJAX در جاوا اسکریپت
JSON در جاوا اسکریپت
جی‌کوئری در برابر جاوا اسکریپت
مثال‌های جاوا اسکریپت
مرجع جاوا اسکریپت

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

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

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

مثال

 1<!DOCTYPE html>
 2<html>
 3<body>
 4
 5<h1>My First JavaScript Animation</h1>
 6
 7<div id="animation">My animation will go here</div>
 8
 9</body>
10</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}


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



منابع آموزشی