|
波形
大家肯定聽說過正弦波，也一定見過圖3-17所示的圖形。
圖3-17 正弦波形
那么為什么要把正弦函數(shù)與正弦圖像兩個(gè)不相干的東西聯(lián)系到一起呢？如果將0到360度(或著0到2pi)代入到正弦函數(shù)中，那么就會(huì)得到這個(gè)正弦函數(shù)圖像。從左到右代表所使用的角度值，而圖中y坐標(biāo)變化，代表這些角的正弦值。
圖3-18中，標(biāo)出了一些特殊的角度，我們可以看到0度的正弦值為0，90度或pi/2的正弦值為1，180度或pi的正弦值又回到0，270度或3/2pi的正弦值為-1，360度的正弦值為0。下面用 Flash 來試一下正弦波形，把以下代碼放入文檔類的框架中進(jìn)行測試：
for (var angle:Number = 0; angle < Math.PI * 2; angle += .1) {
trace(Math.sin(angle));
}
從現(xiàn)在起，要開始習(xí)慣只使用弧度制。除了使用 rotation 或其它只使用角度制的屬性外，要開始學(xué)著不去使用角度制。
圖3-18 正弦圖像值
在這個(gè)例子中，角度從0開始，每次遞增0.1直到大于 Math.PI*2 為止，并輸出該角的正弦值�？匆幌螺敵鼋Y(jié)果，我們發(fā)現(xiàn)角度是從0開始，增加到1后，開始減小，減少到-1時(shí)，再回歸至0。這些值不會(huì)真正準(zhǔn)確地到達(dá)1或0，因?yàn)槊看卧黾?.1，所以永遠(yuǎn)不會(huì)得到pi或pi/2的整數(shù)倍。
平滑的上下運(yùn)動(dòng)
如何使用 Math.sin(angle) 呢？如果想讓物體上下或左右移動(dòng)，那么就要用到這個(gè)函數(shù)�？紤]：使用 0～1～-1～0 的變化來實(shí)現(xiàn)這個(gè)動(dòng)畫，并且反復(fù)地使用這個(gè)波形。
活動(dòng)域僅僅是從1到-1，不能看出效果，所以要把這些數(shù)值放大一些，比如擴(kuò)大100倍。這樣就擁有了一個(gè)從100到-100的波形，并且連綿不斷。在下面這個(gè)文檔類 Bobbing.as 中，要使用一個(gè)在 Ball 類中定義的 Sprite 影片，請看代碼：
package {
import flash.display.Sprite;
public class Ball extends Sprite {
private var radius:Number;
private var color:uint;
public function Ball(radius:Number=40, color:uint=0xff0000) {
this.radius = radius;
this.color = color;
init();
}
public function init():void {
graphics.beginFill(color);
graphics.drawCircle(0, 0, radius);
graphics.endFill();
}
}
}
當(dāng)這個(gè)類被實(shí)例化后，就能繪制出一個(gè)圓。我們還可以自行給出圓的半徑(radius)和顏色(color)。如果不給這些參數(shù)的話，就會(huì)使用默認(rèn)的參數(shù)：半徑為40，顏色為紅色（這是AS3.0新增的功能）。這個(gè)類非常簡單，但卻非常有用，今后在書中會(huì)經(jīng)常用到，所以大家一定要掌握。
文檔類創(chuàng)建一個(gè) Ball 類的實(shí)例，并加入到舞臺(tái)上，再為它增加一個(gè) enterFrame 偵聽器，這樣就可以讓小球上下移動(dòng)了。
package {
import flash.display.Sprite;
import flash.events.Event;
public class Bobbing extends Sprite {
private var ball:Ball;
private var angle:Number = 0;
public function Bobbing() {
init();
}
private function init():void {
ball = new Ball();
addChild(ball);
ball.x = stage.stageWidth / 2;
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
public function onEnterFrame(event:Event):void {
ball.y = stage.stageHeight / 2 + Math.sin(angle) * 50;
angle += .1;
}
}
}
首先，需要一個(gè)角度屬性(angle)初始值為0。在 onEnterFrame 方法中，使用該角的正弦值并擴(kuò)大50倍。這樣一來，取值的范圍就變成了50到-50。再在這個(gè)值上加舞臺(tái)高度的一半，數(shù)值就變?yōu)閺?50到150(設(shè)舞臺(tái)高度為400像素)，用這個(gè)值作為小球的Y坐標(biāo)，最后為下一次循環(huán)增加0.1個(gè)弧度，這樣就完成了小球平滑的上下運(yùn)動(dòng)。每一次循環(huán)的值都不相同，我們發(fā)現(xiàn)如果將0.1變?yōu)榱硪粋�(gè)數(shù)值的話，就改變了小球運(yùn)動(dòng)的速度。角度(angle)變化的快慢與 Math.sin 從1到-1變化的速度成正比。很明顯，改變50這個(gè)值，就改變了小球移動(dòng)的距離，而改變 stage.stageHeight / 2 的值，就改變了小球運(yùn)動(dòng)時(shí)圍繞的位置。我們還可以給出一些抽象的值作為變量，代碼如下(只給出需要改變或增加的部分)：
// at the top of the class:
private var angle:Number = 0;
private var centerY:Number = 200;
private var range:Number = 50;
private var speed:Number = 0.1;
// and the handler function:
public function onEnterFrame(event:Event):void {
ball.y = centerY + Math.sin(angle) * range;
angle += speed;
}
在運(yùn)動(dòng)代碼中沒有使用具體的數(shù)值，真是次非常好的練習(xí)，以后應(yīng)盡量這樣做。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 三角學(xué)應(yīng)用 [5] 下一頁 三角學(xué)應(yīng)用 [7]
◎進(jìn)入論壇RIA設(shè)計(jì)與應(yīng)用版塊參加討論
|
第 1 頁 
第 6 頁 三角學(xué)應(yīng)用 [6]
