|
之前我們已經(jīng)有一個(gè)圖向大家展示了這個(gè)程序的基本流程，我們現(xiàn)在暫時(shí)忽略其他后臺(tái)運(yùn)作，來(lái)看看flash接收到結(jié)果之后該如何呈現(xiàn)。首先，我是這么考慮的，依然和之前的實(shí)現(xiàn)方法一樣，給指針一個(gè)隨機(jī)的初速度，然后讓它停止在指定的獎(jiǎng)項(xiàng)范圍內(nèi)。那么我們需要計(jì)算出這個(gè)減速度（和之前指定減速度不同），但是一共要轉(zhuǎn)多少角度是我們所不知道的，所以我想，我們或許也可以給指針指定一個(gè)需要轉(zhuǎn)動(dòng)的總的度數(shù)；由于度數(shù)看起來(lái)不是那么直觀，不妨指定一個(gè)需要轉(zhuǎn)動(dòng)的圈數(shù)（一圈360度，總度數(shù)就是圈數(shù)乘以360，實(shí)際上還是度數(shù)），當(dāng)然我們要讓圈數(shù)不小于3圈以免抽獎(jiǎng)過(guò)程結(jié)束得太快，也別大于8圈以免用戶等待太久。來(lái)看看指針轉(zhuǎn)動(dòng)角度的關(guān)系圖：
從上圖可見(jiàn)，指針轉(zhuǎn)動(dòng)的實(shí)際角度（totalAngle）為：360*需要轉(zhuǎn)動(dòng)的圈數(shù)+角度差異。由于初速度（speed）是我們定制的，實(shí)際轉(zhuǎn)動(dòng)度數(shù)也知道了，末速度當(dāng)然是0，那我們現(xiàn)在只需要計(jì)算出加速度（acc，與上一篇不同，這里是固定值）就可以讓指針轉(zhuǎn)動(dòng)起來(lái)了。在這里我使用的是enterFrame事件來(lái)做的運(yùn)動(dòng)動(dòng)畫(huà)，我把整個(gè)運(yùn)動(dòng)過(guò)程看做是一個(gè)從初速度開(kāi)始，每幀以加速度遞減到0的等差數(shù)列，根據(jù)等差數(shù)列的公式我們可以很輕松的計(jì)算出加速度來(lái)。這個(gè)事情說(shuō)明：學(xué)好數(shù)理化，走遍天下都不怕。好吧其實(shí)我是去百度抄的這個(gè)公式……閑話少說(shuō)，來(lái)個(gè)demo看看：
這次的demo我忍痛將所有的500萬(wàn)獎(jiǎng)項(xiàng)改成了200-900萬(wàn)以便于區(qū)分，記住我們上次說(shuō)過(guò)的一些細(xì)節(jié)問(wèn)題——按鈕的狀態(tài)諸如此類。有一個(gè)重要的細(xì)節(jié)需要我們注意，那就是應(yīng)該規(guī)避指針停留在兩個(gè)獎(jiǎng)項(xiàng)之間的線上，我們?cè)诖_定指針停留的區(qū)間時(shí)只需要把區(qū)間前后分別收縮1度即可�？梢钥吹剑@個(gè)demo基本實(shí)現(xiàn)了需要的功能，當(dāng)然獎(jiǎng)項(xiàng)是我們自己設(shè)定的，實(shí)際開(kāi)發(fā)時(shí)需要由后臺(tái)提供數(shù)據(jù)。現(xiàn)在我們可以考慮給程序做點(diǎn)美化，比如給指針加個(gè)陰影，使其有立體感，或者在轉(zhuǎn)到相應(yīng)獎(jiǎng)項(xiàng)的時(shí)候來(lái)點(diǎn)點(diǎn)綴什么的：
大家可以看到，轉(zhuǎn)到相應(yīng)的獎(jiǎng)項(xiàng)時(shí)，確實(shí)在獎(jiǎng)項(xiàng)的區(qū)域出現(xiàn)了一個(gè)色塊（我之前做過(guò)的那個(gè)設(shè)計(jì)是一個(gè)小燈），以區(qū)分其他獎(jiǎng)項(xiàng)，但是我們不得不說(shuō)，這玩意兒看起來(lái)不怎么好看，略顯生硬。好吧，是非常生硬。我試著讓指針離開(kāi)某一獎(jiǎng)項(xiàng)區(qū)域時(shí)，讓這個(gè)區(qū)域的色塊透明度逐漸變?yōu)?（而不是突然變?yōu)?），這樣效果看起來(lái)就好了很多：
完整的程序遠(yuǎn)遠(yuǎn)不僅如此，flash與頁(yè)面腳本及后臺(tái)的數(shù)據(jù)交換這個(gè)過(guò)程需要注意的細(xì)節(jié)更多，不在本文討論的范疇之內(nèi)。我覺(jué)得我們?cè)谇岸碎_(kāi)發(fā)時(shí)，應(yīng)該多從用戶的角度考慮問(wèn)題，或許并沒(méi)有人要求你做到這個(gè)程度，或許會(huì)增加開(kāi)發(fā)時(shí)的代碼量，但是開(kāi)發(fā)出完美的程序，給用戶完美的體驗(yàn)豈不是一樁美事？那么這個(gè)抽獎(jiǎng)就討論到這里，幾個(gè)demo的源代碼有需要的同志請(qǐng)留下郵箱，大家一起討論LOL。
本文鏈接：http://www.95time.cn/tech/multimedia/2010/8210.asp 
出處：新媒重慶UED
責(zé)任編輯：bluehearts
上一頁(yè) AS3"抽獎(jiǎng)"之細(xì)節(jié)分析 [1] 下一頁(yè)
◎進(jìn)入論壇RIA設(shè)計(jì)與應(yīng)用版塊參加討論
|
第 1 頁(yè) 
第 2 頁(yè) AS3"抽獎(jiǎng)"之細(xì)節(jié)分析 [2]
