第16回 三角関数を使った楕円軌道のアニメーション
第16回←教材はこれ！
// MovieClip: 振動させるインスタンス
var nRadian:Number = 0;
var nCenterX:Number = stage.stageWidth/2;
var nRadiusX:Number = 100;
addEventListener(Event.ENTER_FRAME, xMoveX);function xMoveX(eventObject:Event):void {
x = nCenterX+Math.cos(nRadian)*nRadiusX;
nRadian += 0.1;
}
- nRadianが0からスタートして実行される度に0.1ずつ増えていくと。*2
- 一往復31.4フレームつーことですね。
- sinを使って垂直に振動させる記述もあった。つーことはもしや！！！
// MovieClip: 振動させるインスタンス
var nRadian:Number = 0;var nCenterY:Number = stage.stageHeight/2;
var nRadiusY:Number = 100;
addEventListener(Event.ENTER_FRAME, xMoveY);
function xMoveY(eventObject:Event):void {
y = nCenterY+Math.sin(nRadian)*nRadiusY;nRadian += 0.1;
}
- そして次のページ、やはり水平・垂直移動の合体で円運動！これやりたくなるのは人の性！！！
- でもよくみたらタイトルにちゃんと「楕円軌道のアニメーション」ってあるよね。
// MovieClip: 振動させるインスタンス
var nRadian:Number = 0;
var nCenterX:Number = stage.stageWidth/2;
var nCenterY:Number = stage.stageHeight/2;var nRadiusX:Number = 100;
var nRadiusY:Number = 100;
addEventListener(Event.ENTER_FRAME, xMoveX);
addEventListener(Event.ENTER_FRAME, xMoveY);
addEventListener(Event.ENTER_FRAME, xUpdate);
function xMoveX(eventObject:Event):void {
x = nCenterX+Math.cos(nRadian)*nRadiusX;
}
function xMoveY(eventObject:Event):void {y = nCenterY+Math.sin(nRadian)*nRadiusY;
}
function xUpdate(eventObject:Event):void {
nRadian += 0.1;
}
- x、yのプロパティそれぞれ別に呼び出して処理してますね。なるほど。
- そしてこのページではちゃんとラジアンに関する記述もある。さすが野中先生ぬかりなし！*3
- んでなんと角度(度数)で記述する方法も伝授！
// MovieClip: 振動させるインスタンス
var nDegree:Number = 0;
var nRadian:Number = 0;
var nSpeed:Number = 5;var nDegreeToRadian:Number = Math.PI/180;
var nCenterX:Number = stage.stageWidth/2;
var nCenterY:Number = stage.stageHeight/2;
var nRadiusX:Number = 100;
var nRadiusY:Number = 50;←楕円にするためにこっちは50
var nCos:Number = Math.cos(nRadian);var nSin:Number = Math.sin(nRadian);
addEventListener(Event.ENTER_FRAME, xMoveX);
addEventListener(Event.ENTER_FRAME, xMoveY);
addEventListener(Event.ENTER_FRAME, xUpdate);
function xMoveX(eventObject:Event):void {x = nCenterX+nCos*nRadiusX;
}
function xMoveY(eventObject:Event):void {y = nCenterY+nSin*nRadiusY;
}
function xUpdate(eventObject:Event):void {
nDegree += nSpeed;
nDegree = (nDegree%360+360)%360;←角度が負の値でも大丈夫！
trace(nDegree); // 確認用nRadian = nDegree*nDegreeToRadian;
nCos = Math.cos(nRadian);
nSin = Math.sin(nRadian);
}
- でもこれかなり面倒なことやてる気がする。素直にラジアンで処理した方がいいかも。
