MohirDox

Ko'rinishi

HTML DOM animatsiyasi ​

JavaScript yordamida HTML animatsiyalarini yaratishni o'rganing.

Asosiy veb-sahifa ​

JavaScript bilan HTML animatsiyalarini yaratishni namoyish qilish uchun biz oddiy veb-sahifadan foydalanamiz:

html
<!DOCTYPE html>
<html>
  <body>
    <h1>Mening birinchi JavaScript animatsiyam</h1>

    <div id="container">
      <div id="animate">Animatsiya shu yerda bo'ladi</div>
    </div>
  </body>
</html>

Animatsiya konteynerini yaratish ​

Barcha animatsiyalar konteyner elementiga nisbatan bo'lishi kerak.

html
<div id="container">
  <div id="animate">Animatsiya shu yerda bo'ladi</div>
</div>

Elementlarga uslub (style) berish ​

Konteyner elementi style = "position: relative" bilan yaratilishi kerak. Animatsiya elementi style = "position: absolute" bilan yaratilishi kerak.

css
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}

#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background: red;
}

Animatsiya kodi ​

JavaScript animatsiyalari element uslubidagi bosqichma-bosqich o'zgarishlarni dasturlash orqali amalga oshiriladi. O'zgarishlar taymer (timer) tomonidan chaqiriladi. Taymer oralig'i kichik bo'lsa, animatsiya uzluksiz bo'lib ko'rinadi.

Asosiy kod shunday:

js
id = setInterval(frame, 5)

function frame() {
  if (/* tugaganligini tekshirish */) {
    clearInterval(id)
  } else {
    /* element uslubini o'zgartirish kodi */
  }
}

JavaScript yordamida to'liq animatsiya yaratish ​

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

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