Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptで手動アニメーションと自動アニメーションを区別する方法は？

手動アニメーション

手動アニメーションでは、アニメーションプロセスは自動化されていません。以下は、DOMオブジェクトのプロパティとJavaScript関数を使用した単純なアニメーションの実装です。次のリストには、さまざまなDOMメソッドが含まれています。

  • JavaScript関数getElementById（）を使用しています DOMオブジェクトを取得し、それをグローバル変数imgObjに割り当てます。
  • 初期化関数を定義しましたinit（） 初期化するにはimgObj ここで、位置と左の属性を設定しました。
  • ウィンドウの読み込み時に初期化関数を呼び出しています。
  • 最後に、 moveRight（）を呼び出します。 左の距離を10ピクセル増やす機能。負の値に設定して左側に移動することもできます。
例

次のコードを実行して、JavaScriptでアニメーションを実装してみてください。

<html>
   <head>
      <title>JavaScript Animation</title>
      <script>
         <!--
            var imgObj = null;

            function init() {
               imgObj = document.getElementById('myImage');
               imgObj.style.position= 'relative';
               imgObj.style.left = '0px';
            }
            function moveRight() {
               imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
            }
            window.onload =init;
         //-->
      </script>
   </head>
   <body>
      <form>
         <img id="myImage" src="/images/html.gif" />
         <p>Click button below to move the image to right</p>
         <input type = "button" value = "Click Me" onclick = "moveRight();" />
      </form>
   </body>
</html>
自動アニメーション

JavaScript関数setTimeout（）を使用して、このプロセスを自動化できます 次のように-

ここでは、さらにメソッドを追加しました。では、ここで何が新しくなったのか見てみましょう-

  • moveRight（） 関数がsetTimeout（）を呼び出しています imgObj。の位置を設定する関数
  • 新しい関数stop（）を追加しました setTimeout（）によって設定されたタイマーをクリアするには 関数を使用して、オブジェクトを初期位置に設定します。
例

次のコードを実行して、JavaScriptで自動アニメーションを実装してみてください-

<html>
   <head>
      <title>JavaScript Animation</title>
      <script>
         <!--
            var imgObj = null;
            var animate ;

            function init() {
               imgObj = document.getElementById('myImage');
               imgObj.style.position= 'relative';
               imgObj.style.left = '0px';
            }
            function moveRight() {
               imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
               animate = setTimeout(moveRight,20); // call moveRight in 20msec
            }
            function stop(){
               clearTimeout(animate);
               imgObj.style.left = '0px';
            }
            window.onload =init;
         //-->
      </script>
   </head>
   <body>
      <form>
         <img id="myImage" src="/images/html.gif" />
         <p>Click the buttons below to handle animation</p>
         <input type = "button" value = "Start" onclick = "moveRight();" />
         <input type = "button" value = "Stop" onclick = "stop();" />
      </form>
   </body>
</html>

  1. JavaScriptの関数とメソッドの違いは何ですか？

    JavaScriptでも関数とメソッドは同じですが、メソッドはオブジェクトのプロパティである関数です。 以下はJavaScriptの関数の例です- function functionname(param1, param2){    // code } 例 メソッドはオブジェクトに関連付けられた関数です。以下はJavaScriptのメソッドの例です- <html>    <head>       <script>          var e

  2. JavaScriptで要素の非表示と表示を切り替える方法は？

    JavaScriptで要素の非表示と表示を切り替えるには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, Verda