DOM Animate ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ

فهرست مطالب

    نمایش فهرست مطالب

.ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ 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>

ﺪﯿﻫﺩ ﻞﯾﺎﺘﺳﺍ ﺮﺻﺎﻨﻋ ﻪﺑ

.ﺩﻮﺷ ﺩﺎﺠﯾﺍ position: relative

.ﺩﻮﺷ ﺩﺎﺠﯾﺍ position: absolute

ﻝﺎﺜﻣ

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

ﻦﺸﯿﻤﯿﻧﺍ ﺪﮐ

ﺩﻮﺷ ﯽﻣ ﻡﺎﺠﻧﺍ ﺮﺼﻨﻋ ﮏﯾ ﺭﺩ ﯽﺠﯾﺭﺪﺗ ﺕﺍﺮﯿﯿﻐﺗ ﯽﺴﯾﻮﻧ ﻪﻣﺎﻧﺮﺑ ﺎﺑ ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﯼﺎﻫ ﻦﺸﯿﻤﯿﻧﺍ

،ﺖﺳﺍ ﮏﭼﻮﮐ ﺮﻤﯾﺎﺗ ﻪﻠﺻﺎﻓ ﯽﺘﻗﻭ .ﺪﻧﻮﺷ ﯽﻣ ﯽﻧﺍﻮﺧﺍﺮﻓ ﺮﻤﯾﺎﺗ ﮏﯾ ﻂﺳﻮﺗ ﺕﺍﺮﯿﯿﻐﺗ

:ﺖﺳﺍ ﻦﯾﺍ ﯽﻠﺻﺍ ﺪﮐ

ﻝﺎﺜﻣ

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

ﺪﯿﻨﮐ ﺩﺎﺠﯾﺍ ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﺍﺭ ﻞﻣﺎﮐ ﻦﺸﯿﻤﯿﻧﺍ

ﻝﺎﺜﻣ

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>