문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

======Javascript HTML DOM Animation======
<WRAP left notice 80%>
  * description : Javascript HTML DOM Animation 
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-20
</WRAP>
<WRAP clear></WRAP>
\\
=====Source of the article==== 
  * [[https://www.w3schools.com/js/js_htmldom_animate.asp|Javascript HTML DOM Animation]]
\\
%%JavaScript%%를 사용하여 %%HTML%% 애니메이션 제작 방법을 학습합니다.\\

=====A Basic Web Page=====
%%JavaScript%%로 %%HTML%% 애니메이션을 만드는 방법을 보여주기 위해, 간단한 웹 페이지를 사용합니다.\\

====예제====
<code html>
<!DOCTYPE html>
<html>
<body>

<h1>My First javaScript Animation</h1>

<div id="aninamtion">My animation will go here</div>

</body>
</html>
</code>

=====Create an Animation Container=====
FIXME모든 애니메이션은 컨테이너 요소에 상대적(relative)이어야 합니다.\\

====예제====
<code html>
<div id ="container">
  <div id ="animate">My animation will go here</div>
</div>
</code>

=====Style the Elements=====
컨테이너 요소는 style = ''"position: relative"''로 생성되어야 합니다.\\
\\
애니메이션 요소는 style = ''"position: absolute"''로 생성되어야 합니다.\\

====예제====
<code css>
<style>
  #container {
    width: 400px;
    height: 400px;
    position: relative;
    background: yellow;
  }

  #animate {
    width: 50px;
    height: 50px;
    position: absolute;
    background: red;
  }
</style>
</code>

=====Animation code=====
%%JavaScript%% 애니메이션은 요소 스타일의 점진적인 변경을 프로그래밍 하여 수행됩니다.\\
\\
변경 사항은 타이머에 의해 호출됩니다. 타이머 간격이 작으면 애니메이션이 연속적으로 보입니다.\\
\\
기본 코드는 다음과 같습니다.\\

====예제====
<code javascript>
var id = setInterval(frame, 5);

function frame() {
  if(/* test for finished */) {
    clearInterval(id);
  } else {
    /* code to change the element style */
  }
}
</code>

=====Create the Full Animation Using JavaScript=====

====예제====
<code javascript>
  <script>
    var id = null;
    function myMove() {
      var elem = document.getElementById("animate");
      var 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>
</code>











{{tag>오션, Javascript HTML DOM Animation}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구