۲۴
آبان

جلسه ۷۷ : انیمیشن در جاوا اسکریپت

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، اگر با CSS آشنایی داشته باشید، می دانید که با استفاده از آن می توانید انیمیشن های مختلف و جذاب را در عناصر HTML صفحات وب اعمال کنید، این انیمیشن ها را می توان به گونه ای تعریف کرد که در یک رویداد خاص اجرا شود. البته شما در جاوا اسکریپت هم می توانید چنین افکت ها و انیمیشن هایی را برای عناصر HTML تعریف کنید، برای آشنایی با چگونگی ایجاد انیمیشن در جاوا اسکریپت در ادامه ی این آموزش با ما همراه باشید.

ایجاد انیمیشن در جاوا اسکریپت

در ادامه ی این بخش شما یاد خواهید گرفت که چگونه یک انیمیشن ساده را با جاوا اسکریپت اعمال کنید.

ما در این بخش چگونگی ایجاد انیمیشن در جاوا اسکریپت را با یک مثال کامل HTML ارائه می کنیم.

کدهای پایه ی HTML صفجه وب

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

مثال : طراحی پایه ی صفحه وب

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript Animation</h1>

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

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h1>My First JavaScript Animation</h1>

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

</body>

</html>

خودتان امتحان کنید »

ایجاد container انیمشن

مثال :

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

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

</div>

style عناصر HTML

عنصر container باید با خصوصیت “style = “position: relative ایجاد شود.

عنصر animation نیز باید با خصوصیت “style = “position: absolute ایجاد شود.

مثال : کدهای CSS عناصر HTML ایجاد انیمیشن

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

#container {

width: 400px;

height: 400px;

position: relative;

background: yellow;

}

#animate {

width: 50px;

height: 50px;

position: absolute;

background: red;

}

خودتان امتحان کنید »

کد انیمیشن

انیمیشن های جاوا اسکریپت با برنامه ریزی تغییرات تدریجی در Style عنصر انجام می شود.

تغییرات توسط یک timer فراخوانی می شود. هنگامی که فاصله زمانی (interval) تایمر کم است، انیمیشن به صورت روان به نظر می رسد.

و کد پایه ی آن در جاوا اسکریپت این است :

مثال :

var id = setInterval(frame, 5);

function frame() {
  if (/* test for finished */) {
    clearInterval(id);
  } else {
    /* code to change the element style */  
  }
}

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

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

}

خودتان امتحان کنید »

کلام آخر

در بخش های قبلی دسترسی و اعمال تغییرات ساده در محتوای عناصر html را مرور کردیم، در این بخش نیز به قابلیت پرکاربرد ایجاد انیمیشن در جاوا اسکریپت و اعمال آن در عناصر html پرداختیم.

به اشتراک بگذارید

انیمیشن در جاوا اسکریپت

دیدگاه کاربران

تعداد دیدگاه : 2

حاجی
تیر ۲۹, ۱۴۰۰
می خوای از w3schools اسکی بری لطف کن حدااااااااقل اندازه ها رو عوض کن یا تهش بنویس کپی برداری از فلان سایت
پاسخ دادن
- پی وی لرن
  تیر ۲۹, ۱۴۰۰
  با سلام
  مرجع مطالب این دوره ها در بخش قوانین سایت مطرح شده است که از وب سایت w3 می باشند و بخش لینک مرجع هم در قالب جدید سایت قرار داده خواهد شد در بعضی قسمت های مطالب لینک به سایت w3 داده شده است و در کل این مطالب رایگان قرارداده شده است با اینکه وقت و زمان زیادی برای آن صرف شده است. اما اگر مطالب ترجمه نشده می خواهید بایستی در دوره های ویدیوی آکادمی پی وی لرن شرکت کنید.
  پاسخ دادن

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۷۷ : انیمیشن در جاوا اسکریپت

مقدمه

ایجاد انیمیشن در جاوا اسکریپت

کدهای پایه ی HTML صفجه وب

ایجاد container انیمشن

style عناصر HTML

کد انیمیشن

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

کلام آخر

لیست مطالب دوره

کار با فرم ها

اشیا

توابع

HTML DOM

BOM

AJAX

JSON

مقایسه ی جاوا اسکریپت با jQuery

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ