JavaScript

JS DOM Animation

في هذا الدرس سوف تتعلم تحريك ال HTML Elements وعمل حراكات ابداعية لصفحة الويب الخاصة بك عن طريق JavaScript Dom Animation

التاريخ

10 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

1839

المواضيع

24
الشروحات chevron_left JS DOM Animation chevron_left JavaScript

JS DOM Animation

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

</> JS DOM Animation

الرسوم المتحركة هي طريقة لتصوير الرسوم والنماذج المتتالية لخلق وهم بالحركة في تسلسل معين نظراً لأن أعيننا لا يمكنها الاحتفاظ بالصورة إلا لمدة 1/16 من الثانية، فعند ظهور صور متعددة في تتابع سريع، يمزجها الدماغ في صورة متحركة واحدة، ففي الرسوم المتحركة التقليدية، يتم رسم الصور أو رسمها على ألواح شفافة من السيليلويد لتصويرها وعرضها في فيلم، الرسوم الكاريكاتورية المبكرة هي أمثلة على ذلك، ولكن اليوم، يتم إنشاء معظم الرسوم المتحركة باستخدام صور تم إنشاؤها بواسطة الكمبيوتر أو “CGI” (نظام تحريك).

يتم تحريك اي عنصر عن طريق التحكم في وضعة علي المتصفح مثل ال Margin او ال Position تغيير قيمتهم علي المتصفح مع مرور الوقت مع التكرار 

لكي تتعلم ال Animation يجب عليك معرفة :

  • setTimeout
  • setInterval

Result

جربها بنفسك chevron_right

يظهر الكود بهذا الشكل على المتصفح

</> setTimeout

دالة ال setTimeout تقوم بتنفيذ function انت انشأتها مسبقاً بعد عدد ثواني معينه

  • 1000 ملي ثانية = ١ ثانية
  • ال function سوف تنفذ مرة واحدة بعد عداد الثواني
  • عن طريق ال clearTimeout يمكنك الغاء تنفيذ function 

عن طريق دالة ال setTimeout يمكنك ان تقوم بعمل اكشن معين بعد وقت معين

تأخذ ال setTimeout قيمتين  2 Arguments القيمة الاولي وهي Function وتضع بداخلها code block لينفذ امر معين

وال Argument الثاني نضع بداخلة عدد الثواني التي سوف تقوم لغة JavaScript بعد هذا الوقت بتنفيذ الاوامر البرمجية التي بداخل ال function

setTimeout(function(){ alert("Hello"); }, 3000);

</> setInterval

دالة ال setInterval تقوم بتنفيذ function انت انشأتها مسبقاً بعد عدد ثواني معينه ثم تعاد عدد لا نهائي من المرات بعد نفس عدد الثواني الا اذا قمت بتوقيفها

  • 1000 ملي ثانية = ١ ثانية
  • ال function سوف تنفذ عدد لا نهائي من المرات بعد عداد الثواني
  • عن طريق ال clearInterval يمكنك الغاء تنفيذ function 

عن طريق دالة ال setInterval يمكنك ان تقوم بعمل اكشن معين بعد وقت معين ثم يتكرر عدد مرات لا نهائي

تأخذ ال setTimeout قيمتين  2 Arguments القيمة الاولي وهي Function وتضع بداخلها code block لينفذ امر معين

وال Argument الثاني نضع بداخلة عدد الثواني التي سوف تقوم لغة JavaScript بعد هذا الوقت بتنفيذ الاوامر البرمجية التي بداخل ال function

setInterval(function(){ alert("Hello"); }, 3000);

</> Animation

في هذا المثال سوف نستخدم setInterval لعمل loop كل 5 ملي ثانية لتحريك div ال animate من اليسار الي اليمين عن طريق زيادة ال postion باستخدام left وفي كل 5 مل ثانية سوف تزيد قيمة ال left الي واحد عن طريق ال pos++

التحضير :

  • قم بتجهيز عدد 2 div بداخل ال html وقم باضافة للاول id وقم بتسميتة container
  • وقم باضافة id للثاني وقم بتسميتة animate 
  • وقم باضافة ال style بداخل ال css style اعلي ال html
  • قم باضافة button بداخل ال html ثم قم باضافة event وهو onclick وضيف بداخلة function المسؤلة عن ال animate 

الخطوات :

  • الخطوة الاولي : سنقوم بتعريف متغير id وسوف نضع بداخلة القيمة null كتهئية
  • الخطوة الثانية : سنقوم بانشاء دالة تجمع كل الاوامر الخاصة بال Animate
  • الخطوة الثالثة : سنقوم باختيار div ال animate ونضعة في متغير elem
  • الخطوة الرابعة : سنقوم بتعريف متفير pos ونضع القيمة صفر
  • الخطوة الخامسة : نقوم بالغاء ال innterval عن طريق ال clearInterval(id) لكي نقوم باعادة ال animate في كل مره نضغط علي ال start
  • الخطوة السادسة : نقوم بانشاء function باسم frame ونضع بداخلها شرط وهو لو ال pos يساوي 350 سوف يتوقف ال interval لاخر طول ال div ال container
  • الخطوة السابعة : نضع في ال else زيادة متغير ال pos مع كل مره في ال interval كل 5 مل ثانية
  • الخطوة الثامنة : نقوم بتحريك ال div ال animate من جهة اليسار عن طريق style.left ولكن في كل مره سوف ياخذ قيمة ال pos التي تتزايد في كل loop 
  • الخطوة التاسعة : نقوم بتنفيذ ال interval قبل ال function بداخل متغير ال id = setInterval(frame, 5)
<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 100px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
  border-radius:50%;
  margin-top:20px;
}
</style>
<body>

<p><button onclick="myMove()">Click Me</button></p> 

<div id ="container">
  <div id ="animate"></div>
</div>

<script>
var id = null;
function myMove() {
  var elem = document.getElementById("animate");   
  var pos = 0;
  clearInterval(id);
  id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.left = pos + "px"; 
    }
  }
}
</script>

</body>
</html>
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات