苦学楽学塾 ホームページ
最終更新日：2025年1月5日
簡単なアニメーションの例を作ってみました。水平投射のシミュレーションですが、軌跡の表示の仕方で2種類あります。
HTMLファイルの内容は、Google Chromeで表示させて[F12]キーで開発ツールを起動させソース表示で見てください。この例では、システムがタイミング制御を自動的に行ってくれるので、requestAnimetionFrame()メソッドを利用しています。setTimeout()メソッドやsetInterval()メソッドでは、自分でタイミングを計る必要があります。
動かす小球は、あらかじめ別に作成し、img.src = "test1.png"として読み込みます。アニメーションの各場面ごとにclearRect()するとちらつくので、test1.pngの黒丸の外側をわざと透明にせずに不透明白にして、前回の画像を消すことに利用しています。なので、余り早く動作させてしまうと、前回の表示の一部がごみとして残ってしまいます(速度を100で制限しているのはこのためです)。
上記のリンクをクリックして表示させると、まず、
速度を指定して、STARTボタンを押すと開始、STOPボタンで停止
速度(1～100)を入力 [ ]
[START] [STOP]
と表示されます。ここで、テキスト枠には、1～100の数値を入れてください。1だとかなり遅くなります。100だとすぐに終わってしまいます。STARTボタンを押すと小球の水平投射のシミュレーションが始まります。STOPボタンを押すと終了します。
アニメーションはHTMLのキャンバス機能を利用して行うので、
<canvas class="cv1" width="800" height="1600">
として、幅800px，高さ800pxのキャンバスを準備し、JavaScriptの中で、
cs1=document.querySelector(".cv1");
として、<canvas>タグをcs1に取得、さらにキャンバス機能利用のために、
ctx1=cs1.getContext('2d');
として、ctx1に2次元描画コンテキストを取得し、以下、ctx1のメソッドを利用して描画します。
STARTボタンとSTOPボタンは、それぞれマウスのclickイベントで動作するように、ボタンのonclick属性に、関数startMotion()，stopMotion()が設定してあり、マウスでボタンをクリックすると、startMotion()，stopMotion()が起動します。デフォルトではボタンやテキスト枠が小さいので、大きめになるように、CSSでfont-size:largeとして大きめの文字サイズを指定しています。
関数startMotion()では、最初に、入力された速度を取得するために、class="ip1"となっている<input>タグを、iq1=document.querySelector(".ip1")として探しだし、iq1のvalueプロパティiq1.valueの文字列をNumber()関数を用いて数値化し、変数speedに速度を取り出します。速度の値のチェックを行い、1～100に入らない場合には、「速度は1～100の数値で入力」と表示させます。このために、<p class="msg">タグを用意し、m1=document.querySelector(".msg")として<p>タグを取得、m1のinnerHTMLプロパティに文字列「速度は1～100の数値で入力」を設定します。<p>タグはHTML記述の中にあるので、これだけで表示されます。
速度の値を確認できたら、ctx1のclearRect()メソッドで幅800px高さ800pxの画面を一旦消去し、関数scene()の中で最初の1回だけ開始時刻を保持するために、firstというフラグをtrueにします。最後に軌跡を表示させるためのfinishというフラグをfalseにします。最後に、requestAnimationFrame(scene)として、scene()という関数を登録すると、あとは、システムが適切なタイミングでscene()を呼び出してくれます。
jtest2.htmlでは、関数scene(t1)は、最初の1回だけ、引数のt1をt0に保持します。これが開始時刻になり、以後、t2 = t1－t0;としてアニメーション開始からの時間t2を調べ、t2から関数xpos()により、小球のx座標x1を求めます。関数xpos()では、キャンバスの端に来たところで終了フラグfinishを立てるようにしています。さらにx1から関数ypos()でy座標y1を求めます。時刻と座標はconsoleに表示するようにしてあります。drawImage()メソッドを使って、ここで求めた座標(x1, y1)に小球を表示し、finishフラグがfalseであれば、再度、requestAnimationFrame(scene)とし、finishフラグがtrueであれば、軌跡を描画する関数trajectory()を起動します。trajectory()では、forループさせてx座標を作り関数ypos()により対応するy座標を求め、beginPath()，moveTo()，lineto()，stroke()の一連の線分表示を繰り返して軌跡を作図します。
jtest3.htmlでも、関数scene()で時間t2から小球のx座標、y座標を求め小球を表示するところはtest2と同じですが、小球の位置をスタックに積みつつ、スタックから取り出した座標が小球イメージの枠の範囲外に出てきたら、その部分について、線分表示して、軌跡を描いていくようになっています。
関数stopMotion()では、finishフラグを立てて、関数scene()内で、新たにrequestAnimationFrameを実行させないようにして、アニメーションを終了します。ただ、アニメーションを一度終了しても、ボタンのonclisk属性に設定されたstartMotion()，stopMotion()はそのままなので、STARTボタンをマウスでクリックすると、アニメーションを再開します。
簡単な例ですが、以上を参考にアニメーションを作ってみてください。
【広告】 ここから広告です。ご覧の皆さまのご支援ご理解を賜りたく、よろしくお願いいたします。
【広告】 広告はここまでです。