三角関数のcosとsin関数は、角度の変化に対して値がバネや波の動きのように増減する。これらの関数を使うと、円や楕円軌道を描くアニメーションがつくれる。
バネのように振動するアニメーション - cosとsin関数
楕円軌道の前に、一方向にバネのように揺れるアニメーションを作成してみよう。cosもsin関数も、0を中心に±1の間を値が振動のように増減する(図1)。
まずは、cos関数を使って、インスタンスを水平に揺らしてみる。使うメソッドはMath.cos()
で、引数には角度となる数値を渡す。中心座標をステージ中央、揺れ幅を左右にそれぞれ100ピクセルとしよう。振幅はcos関数に掛け合わせ、中心座標はその値を加算すればよい。
アニメーションさせるには、もちろんリスナー関数をインスタンスのDisplayObject.enterFrame
イベント(定数Event.ENTER_FRAME
)に登録する。振動させるインスタンスに記述するフレームアクションは、つぎのスクリプト1のとおりだ。
[ムービープレビュー]で確かめると、上記フレームアクション(スクリプト1)を記述したインスタンスが、バネの振動のように水平に揺れ動く(図2)。
つぎに、sin関数を使って、垂直方向に振動するアニメーションをつくってみる。用いるメソッドはMath.sin()
で、考え方は水平方向の場合と同じだ[1]。
インスタンスに記述するフレームアクションは、以下のスクリプト2のとおりだ。三角関数のメソッドをMath.sin()
に変えたほか、参照するプロパティ、変数名や関数名などを修正した。ただし、角度の変数(nRadian)は同じである。
円や楕円軌道のアニメーション
前掲スクリプト1と2を合わせて、水平・垂直両方向のアニメーションにしてみよう。ただし、角度の変数値(nRadian)は2度加算する必要はないので、別のリスナー関数xUpdate()として定義する(スクリプト3)(※2)。
[ムービープレビュー]を見ると、インスタンスのアニメーションは円軌道を描く。このように、与える角度を同じにして、x座標とy座標に対しそれぞれcos値とsin値に半径を乗じて設定すると、(x, y)座標は円軌道上を動くことになる。
- 円軌道の水平座標=水平中心座標+cosθ×半径
- 円軌道の垂直座標=垂直中心座標+sinθ×半径
ところで、Math.cos()
やMath.sin()
メソッドに引数として渡す角度は度数ではない。変数名(nRadian)からも推測できるとおり「ラジアン」だ。ラジアンは角度を、半径1の円の弧の長さで表す(図4)。度数とラジアンは、以下の式で変換される[3]。
- 度数=ラジアン×(180/π)
- ラジアン=度数×(π/180)
角度の変数(nRadian)に毎フレーム加算していた0.1というのは、度数では約5.73度(= 0.1×180/3.14)になる。スクリプトの処理は、ラジアンをベースにしてもとくに問題はない。しかし、インスタンスの開始位置を決めたり、角度の計算をしようという場合、度数がわかると便利なことも少なくない。そこで、度数をベースとした処理に書替える。また、半径としてcosおよびsin値に掛合わせている値を、水平方向(nRadiusX)と垂直方向(nRadiusY)とで変えてみよう。
以下のフレームアクション(スクリプト4)では、度数の変数(nDegree)を宣言し、毎フレーム5度(nSpeed)回転させることにした。度数からラジアンへの変換係数は、変数(nDegreeToRadian)に代入しておく。cos値やsin値も、あとでスクリプトを拡張するため、変数(nCosおよびnSin)として宣言しておく。変数値の更新は、基本的に関数xUpdate()にまとめている。
上記スクリプト4で説明が必要なのは、関数xUpdate()で度数値(nDegree)を加算したあとに行っている演算の内容だ。これは、度数値を0から360までの間の数値に変換する処理になる。
- nDegree=(nDegree%360+360)%360
ActionScriptのNumber型変数で扱える数値には、もちろん上限がある[4]。だから、際限なく値を加算し続けるという処理は危うい。そして、度数は360度周期なので、90度も450度も同じ角度だ。したがって、度数値(nDegree)を0から360度の範囲に限定しようというのが上記ステートメントである。
%
は剰余、つまり割った余りを求める演算子だ。450の360に対する剰余(= 450%360)は90となる。よって、正数であれば、以下のステートメントで0以上360未満の値に変換できる。
しかし、今後のスクリプトの拡張で、負の角度を扱うかもしれない。負の値の場合の剰余は、-360から0までの値になる。したがって、それを正の値の0から360までに変換するには、上記スクリプト4のようなステートメントにする必要がある。
[ムービープレビュー]を確かめると、インスタンスは楕円軌道を描いて回転する。cos値およびsin値に掛合わせる半径を、水平方向(nRadiusX)と垂直方向(nRadiusY)で変えると、楕円軌道の座標を導く式になるのだ(図5)。
- 楕円軌道の水平座標=水平中心座標+cosθ×水平方向の半径
- 楕円軌道の垂直座標=垂直中心座標+sinθ×垂直方向の半径
前掲スクリプト4には、変数に設定された度数値を[出力]するステートメントを加えた。[出力]パネルに表示される値が、0以上360未満であることを確認しよう。
次回は、このインスタンスのアニメーションに遠近感を加えてみたい。
今回解説した次のサンプルファイルがダウンロードできます。