JavaScript DOM Animate

Πίνακας περιεχομένων

Μάθετε να δημιουργείτε κινούμενα σχέδια HTML χρησιμοποιώντας JavaScript.

Μια βασική ιστοσελίδα

Για να δείξουμε πώς να δημιουργείτε κινούμενα σχέδια HTML με JavaScript, θα χρησιμοποιήσουμε ένα απλό ιστοσελίδα:

Παράδειγμα

<!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>

Δώστε στυλ στα στοιχεία

Το στοιχείο κοντέινερ πρέπει να δημιουργηθεί με στυλ="position: σχετική".

Το στοιχείο κινούμενης εικόνας θα πρέπει να δημιουργηθεί με στυλ="position: απόλυτη".

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!Doctype html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background: red;
}
</style>
<body>

<h2>My First JavaScript Animation</h2>

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

</body>
</html>

Κώδικας κινουμένων σχεδίων

Τα κινούμενα σχέδια JavaScript γίνονται με προγραμματισμό σταδιακών αλλαγών σε ένα στοιχείο στυλ.

Οι αλλαγές καλούνται με χρονόμετρο. Όταν το διάστημα του χρονοδιακόπτη είναι μικρό, το Το κινούμενο σχέδιο φαίνεται συνεχές.

Ο βασικός κώδικας είναι:

Παράδειγμα

id = setInterval(frame, 5);
function frame() {
  if (/* 
 test for finished */) {
    clearInterval(id);
  } else {
      
 /* code to change the element style */  
  }
}

Δημιουργήστε το πλήρες κινούμενο σχέδιο χρησιμοποιώντας JavaScript

Παράδειγμα

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'; 
      }
  }
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body>

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

<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>

</body>
</html>