تعلم لإنشاء الرسوم المتحركة HTML باستخدام جافا سكريبت.
صفحة ويب بسيطة
شرح كيفية إنشاء الرسوم المتحركة HTML مع جافا سكريبت، سوف نستخدم صفحة ويب بسيطة:
مثال
<!DOCTYPE html>
<html>
<body>
<h1>My First
JavaScript Animation</h1>
<div id="animation">My animation will go here</div>
</body>
</html>
انها محاولة لنفسك » إنشاء حاويات الرسوم المتحركة
يجب أن تكون جميع الرسوم المتحركة النسبي لعنصر حاوية.
مثال
<div id ="container">
<div id ="animate">My
animation will go here</div>
</div>أسلوب عناصر
يجب إنشاء عنصر حاوية مع نمط = "الموقف: قريب".
يجب إنشاء عنصر الرسوم المتحركة مع نمط = "الموقف: مطلقة".
مثال
#container {
width: 400px;
height:
400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height:
50px;
position: absolute;
background: red;
}
انها محاولة لنفسك » كود الرسوم المتحركة
تتم الرسوم المتحركة جافا سكريبت عن طريق البرمجة تغييرات تدريجية في أسلوب عنصر ل.
ويطلق على التغييرات من قبل جهاز ضبط الوقت. عندما فاصل الموقت هو صغير، والرسوم المتحركة تبدو مستمرة.
رمز الأساسي هو:
مثال
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';
}
}
} انها محاولة لنفسك »