كيفية إنشاء: حركة جافا سكربت HTML

تعلم كيفية إنشاء حركة باستخدام جافا سكربت.

Kannu yinwanci: kaiyanci

صفحة شبكية أساسية

لإظهار كيفية استخدام جافا سكربت لإنشاء حركة HTML، يمكننا استخدام صفحة شبكية بسيطة.

مثال

<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript Animation</h1>
<div id="myContainer">
    <div id="myAnimation">My animation will go here</div>
</div>
</body>
<html>

Kannu yinwanci: kaiyanci

تعيين أنماط العنصر

من أجل أن تكون الحركة ممكنة، يجب أن يتم تحريك العنصر الحركي بالنسبة إلى "المستودع الأب".

يجب استخدام العنصر الحاوي style="position: relative" إنشاء

يجب استخدام العنصر الحركي style="position: absolute" إنشاء

مثال

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

Kannu yinwanci: kaiyanci

كود الحركة

يتم إنشاء حركة جافا سكربت من خلال تغيير الأنماط العناصر برمجية.

تلك التغيرات هي نتيجة لتشغيل الجهاز المحتسب. عندما يكون فاصل الجهاز المحتسب صغيرًا جدًا، تبدو الحركة متصلة.

الكود الأساسي هو:

مثال

var id = setInterval(frame, 5);
function frame() {
  if (/* استعلام عن الانتهاء */) {
    clearInterval(id);
  }
    /* تعديل رموز النصوص للعناصر */ 
  }
}

استخدام جافا سكربت لإنشاء حركة

مثال

var id = null;
function myMove() {
  var elem = document.getElementById("myAnimation");
  var pos = 0;
  clearInterval(id);
  id = setInterval(frame, 10);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    }
      pos++;
      elem.style.top = pos + 'px';
      elem.style.left = pos + 'px';
    }
  }
}

Kannu yinwanci: kaiyanci