●解説
三角関数のsinやcosの値は、角度の変化に対してバネや波動のような周期的な変動をします(図01-03-001)。したがって、その値に比例した動きによって、バネや波のアニメーションをシミュレートすることができます。ActionScript 3.0におけるメソッドは、それぞれMath.sin()およびMath.cos()です。ともに、±1の範囲で値が増減します。引数の角度はラジアン値で指定します。度数を使う場合には、値をラジアンに変換しなければなりません。
→関連項目
「ラジアンと度数を変換したい」「円・楕円軌道をシミュレートしたい」
図01-03-001■sinとcosの値の角度に対する変化【Fig07-001.png】
|
Mathクラス |
|
パッケージ
|
トップレベル
|
|
継承
|
Math→Object
|
|
sin()メソッド |
ASタイプ
|
M |
|
ランタイムバージョン
|
AIR 1.0/Flash Player 9
|
|
文法
|
Math.sin(angleRadians:Number):Number
|
|
意味
|
指定されたラジアン値の角度からsin(正弦)値を計算して返します。
|
|
引数
|
angleRadians:Number ― sin(正弦)を求める角度のラジアン値。
|
|
戻り値
|
引数に指定された角度のsin(正弦)値を、±1.0の範囲の値で返します。
|
|
cos()メソッド |
ASタイプ
|
M |
|
ランタイムバージョン
|
AIR 1.0/Flash Player 9
|
|
文法
|
Math.cos(angleRadians:Number):Number
|
|
意味
|
指定されたラジアン値の角度からcos(余弦)値を計算して返します。
|
|
引数
|
angleRadians:Number ― cos(余弦)を求める角度のラジアン値。
|
|
戻り値
|
引数に指定された角度のcos(余弦)値を、±1.0の範囲の値で返します。
|
○記述例
角度を一定の割合で変化させ、角度に対するsinまたはcos値に比例して水平あるいは垂直座標を移動させれば、バネ運動のようなアニメーションになります。
以下のスクリプト01-03-001をMovieClipシンボルのフレームアクションに設定すると、インスタンスがバネのように上下します(図01-03-002)。DisplayObject.enterFrameイベント(定数Event.ENTER_FRAME)のリスナー関数xMove()では、一定に増加する角度に対するMath.sin()メソッドの戻り値に比例係数を乗じて、インスタンスのDisplayObject.yプロパティに設定しています。
スクリプト01-03-001■インスタンスをバネのように上下振動させる
|
// フレームアクション
// MovieClip: 上下にバネ運動するインスタンス
var nRadian:Number = 0;
var nIncrement:Number = 0.1;
var nRadiusY:Number = 50;
var nY:Number = stage.stageHeight / 2;
addEventListener(Event.ENTER_FRAME, xMove);
function xMove(eventObject:Event):void {
y = nY + nRadiusY * Math.sin(nRadian);
nRadian += nIncrement;
nRadian %= 2 * Math.PI; // 2πの剰余を取ることにより値の範囲を制限
}
|
|
※周期的な演算で変数値の範囲を限定する
三角関数の値は、角度が2π(= 360度)の周期で同じように変化します。つまり、角度が0と2πで三角関数の値は同じになります。そこで、上記スクリプト01-03-001では、角度の変数(nRadian)値が際限なく大きくなってしまうことを避けるため、剰余後代入演算子%=により2π(2 * Math.PI)で割った余りを変数に代入し直して、変数値の範囲を0以上2π未満に限定しています。
|
水平あるいは垂直方向にsinまたはcos値に比例した振動を与え、もうひとつの方向に等速で移動させれば、波の動きになります。いわゆるsinカーブまたはcosカーブのアニメーションです。
以下のスクリプト01-03-002では、前記スクリプト01-03-001に水平方向の等速運動を与えて、インスタンスを波の動きのようにアニメーションさせています。ステージ右端を超えた場合には、条件判定により左端に移動して、アニメーションがスクロールし続ける処理も加えました。
スクリプト01-03-002■インスタンスを波動のようにアニメーションさせる
|
// フレームアクション
// MovieClip: 波動を描いてアニメーションさせるインスタンス
var nRadian:Number = 0;
var nIncrement:Number = 0.1;
var nRadiusY:Number = 50;
var nY:Number = stage.stageHeight / 2;
var nStageRight:Number = stage.stageWidth;
addEventListener(Event.ENTER_FRAME, xMove);
function xMove(eventObject:Event):void {
x = nRadian * nRadiusY;
y = nY + nRadiusY * Math.sin(nRadian);
if (x > nStageRight) {
x -= nStageRight;
}
nRadian += nIncrement;
nRadian %= 2 * Math.PI;
}
|
|
※sinおよびcosカーブと位相
cosとsinのカーブの形状はまったく同じです。ただ、波の山と谷の位置がずれています(前掲図01-03-001参照)。cosとsinの値が変わるタイミング、グラフでいえば山と谷の位置の違いは「位相」といいます。よって、cosとsinは位相が異なると表現されます。具体的には、角度が0のときsinは0、cosは1から波が始まります。
|
作成者: 野中文雄
ドラフト作成: 2009年5月12日
