JS DOM Animation
في هذا الدرس سوف تتعلم تحريك ال HTML Elements وعمل حراكات ابداعية لصفحة الويب الخاصة بك عن طريق JavaScript Dom Animation
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات chevron_left JS DOM Animation chevron_left JavaScript
JS DOM Animation
</> JS DOM Animation
الرسوم المتحركة هي طريقة لتصوير الرسوم والنماذج المتتالية لخلق وهم بالحركة في تسلسل معين نظراً لأن أعيننا لا يمكنها الاحتفاظ بالصورة إلا لمدة 1/16 من الثانية، فعند ظهور صور متعددة في تتابع سريع، يمزجها الدماغ في صورة متحركة واحدة، ففي الرسوم المتحركة التقليدية، يتم رسم الصور أو رسمها على ألواح شفافة من السيليلويد لتصويرها وعرضها في فيلم، الرسوم الكاريكاتورية المبكرة هي أمثلة على ذلك، ولكن اليوم، يتم إنشاء معظم الرسوم المتحركة باستخدام صور تم إنشاؤها بواسطة الكمبيوتر أو “CGI” (نظام تحريك).
يتم تحريك اي عنصر عن طريق التحكم في وضعة علي المتصفح مثل ال Margin او ال Position تغيير قيمتهم علي المتصفح مع مرور الوقت مع التكرار
لكي تتعلم ال Animation يجب عليك معرفة :
- setTimeout
- setInterval
</> 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>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
