日期與時間範例:簡易類比時鐘
Flash Player 9 以及更新的版本,Adobe AIR 1.0 以及更新的版本
有個簡單的類比時鐘範例可說明這兩個日期與時間概念:
定義 SimpleClock 類別
這個時鐘範例很簡單,但即使是簡單的應用程式,最好還是能組織清楚,以便日後擴充。因此,SimpleClock 應用程式會使用 SimpleClock 類別處理啟動和計時工作,然後使用另一個名為 AnalogClockFace 的類別來顯示時間。
以下是定義並初始化 SimpleClock 類別的程式碼 (請注意,在 Flash 版本中,SimpleClock 會改為擴充 Sprite 類別):
public class SimpleClock extends UIComponent
{
/**
* The time display component.
*/
private var face:AnalogClockFace;
/**
* The Timer that acts like a heartbeat for the application.
*/
private var ticker:Timer;
這個類別有兩個重要屬性:
-
face 屬性
:這是 AnalogClockFace 類別的實體
-
ticker 屬性
:這是 Timer 類別的實體
SimpleClock 類別會使用預設建構函式。
initClock()
方法負責實際的設定工作,包括建立鐘面和啟動 Timer 實體計時。
建立鐘面
SimpleClock 程式碼中的下面幾行會建立用來顯示時間的鐘面:
/**
* Sets up a SimpleClock instance.
*/
public function initClock(faceSize:Number = 200)
{
// creates the clock face and adds it to the display list
face = new AnalogClockFace(Math.max(20, faceSize));
face.init();
addChild(face);
// draws the initial clock display
face.draw();
您可將鐘面的大小傳遞至
initClock()
方法。如果沒有傳遞
faceSize
值,則預設大小為 200 像素。
接下來,應用程式會初始化鐘面,然後使用從 DisplayObjectContainer 類別繼承的
addChild()
方法,將鐘面加入顯示清單。之後則會呼叫
AnalogClockFace.draw()
方法顯示一次鐘面,在其中顯示目前的時間。
啟動計時器
在建立鐘面之後,
initClock()
方法會設定計時器:
// creates a Timer that fires an event once per second
ticker = new Timer(1000);
// designates the onTick() method to handle Timer events
ticker.addEventListener(TimerEvent.TIMER, onTick);
// starts the clock ticking
ticker.start();
首先,這個方法會建立 Timer 實體,設定每秒 (即每 1000 毫秒) 傳送一次事件。由於沒有第二個
repeatCount
參數傳遞至
Timer()
建構函式,所以 Timer 會不斷重複。
SimpleClock.onTick()
方法會在每秒收到
timer
事件時執行一次:
public function onTick(event:TimerEvent):void
{
// updates the clock display
face.draw();
}
AnalogClockFace.draw()
方法只會繪製鐘面和指針。
顯示目前時間
AnalogClockFace 類別中的大部分程式碼都是用來設定鐘面的顯示元素。初始化 AnalogClockFace 時,會繪製一個圓形、將數字文字標籤放在每個小時刻度,然後建立三個 Shape 物件,分別代表時鐘上的時針、分針和秒針。
當 SimpleClock 應用程式執行時,會每秒呼叫一次
AnalogClockFace.draw()
方法,如下所示:
/**
* Called by the parent container when the display is being drawn.
*/
public override function draw():void
{
// stores the current date and time in an instance variable
currentTime = new Date();
showTime(currentTime);
}
這個方法會將目前時間儲存在變數中,使時間無法在繪製指針的期間改變。然後會呼叫
showTime()
方法顯示指針,如下所示:
/**
* Displays the given Date/Time in that good old analog clock style.
*/
public function showTime(time:Date):void
{
// gets the time values
var seconds:uint = time.getSeconds();
var minutes:uint = time.getMinutes();
var hours:uint = time.getHours();
// multiplies by 6 to get degrees
this.secondHand.rotation = 180 + (seconds * 6);
this.minuteHand.rotation = 180 + (minutes * 6);
// Multiply by 30 to get basic degrees, then
// add up to 29.5 degrees (59 * 0.5)
// to account for the minutes.
this.hourHand.rotation = 180 + (hours * 30) + (minutes * 0.5);
}
首先,這個方法會擷取目前時間的時、分和秒值。接著,則會使用這些值來計算每個指針的角度。由於秒針會 60 秒旋轉一圈,表示每秒旋轉的角度為 6 度 (360/60)。分針也是每分鐘旋轉 6 度。
時針也會每分鐘更新一次,以跟著分針走。時針會每小時旋轉 30 度 (360/12),但也會每分鐘旋轉半度 (30 度除以 60 分鐘)。
|
|
|