AS3"抽獎"之細節分析(下)

作者:新媒重慶UED 來源:out man 更新時間:2010-12-25 20:02:07 點擊:

AS3“抽獎”之細節分析(下)

同志們好,上一期我們討論了由flash自己隨機演算一個結果來實現抽獎的細節問題:AS3“抽獎”之細節分析(上)。那么本期我們就繼續來討論下由后臺指定結果并由flash呈現出來,這個需要注意的一些細節問題。

之前我們已經有一個圖向大家展示了這個程序的基本流程,我們現在暫時忽略其他后臺運作,來看看flash接收到結果之后該如何呈現。首先,我是這么考慮的,依然和之前的實現方法一樣,給指針一個隨機的初速度,然后讓它停止在指定的獎項范圍內。那么我們需要計算出這個減速度(和之前指定減速度不同),但是一共要轉多少角度是我們所不知道的,所以我想,我們或許也可以給指針指定一個需要轉動的總的度數;由于度數看起來不是那么直觀,不妨指定一個需要轉動的圈數(一圈360度,總度數就是圈數乘以360,實際上還是度數),當然我們要讓圈數不小于3圈以免抽獎過程結束得太快,也別大于8圈以免用戶等待太久。來看看指針轉動角度的關系圖:

jd1

從上圖可見,指針轉動的實際角度(totalAngle)為:360*需要轉動的圈數+角度差異。由于初速度(speed)是我們定制的,實際轉動度數也知道了,末速度當然是0,那我們現在只需要計算出加速度(acc,與上一篇不同,這里是固定值)就可以讓指針轉動起來了。在這里我使用的是enterFrame事件來做的運動動畫,我把整個運動過程看做是一個從初速度開始,每幀以加速度遞減到0的等差數列,根據等差數列的公式我們可以很輕松的計算出加速度來。這個事情說明:學好數理化,走遍天下都不怕。好吧其實我是去百度抄的這個公式……閑話少說,來個demo看看:

這次的demo我忍痛將所有的500萬獎項改成了200-900萬以便于區分,記住我們上次說過的一些細節問題——按鈕的狀態諸如此類。有一個重要的細節需要我們注意,那就是應該規避指針停留在兩個獎項之間的線上,我們在確定指針停留的區間時只需要把區間前后分別收縮1度即可。可以看到,這個demo基本實現了需要的功能,當然獎項是我們自己設定的,實際開發時需要由后臺提供數據。現在我們可以考慮給程序做點美化,比如給指針加個陰影,使其有立體感,或者在轉到相應獎項的時候來點點綴什么的:

大家可以看到,轉到相應的獎項時,確實在獎項的區域出現了一個色塊(我之前做過的那個設計是一個小燈),以區分其他獎項,但是我們不得不說,這玩意兒看起來不怎么好看,略顯生硬。好吧,是非常生硬。我試著讓指針離開某一獎項區域時,讓這個區域的色塊透明度逐漸變為0(而不是突然變為0),這樣效果看起來就好了很多:

完整的程序遠遠不僅如此,flash與頁面腳本及后臺的數據交換這個過程需要注意的細節更多,不在本文討論的范疇之內。我覺得我們在前端開發時,應該多從用戶的角度考慮問題,或許并沒有人要求你做到這個程度,或許會增加開發時的代碼量,但是開發出完美的程序,給用戶完美的體驗豈不是一樁美事?那么這個抽獎就討論到這里,幾個demo的源代碼有需要的同志請留下郵箱,大家一起討論LOL。

那我們下次再見啦。

大乐透走势图2 配资公司怎么赚钱 青海快3走势150期 北京pk赛车预测网 免费 山东11选五中奖查询 腾讯分分彩软件下载app 天津11选五走势图历史 江西快三开奖结果走势图一定牛 江西时时彩中奖 北京配资公司 中国福利彩票老快3开奖结果 云南快乐10分规律 吉林十一选五4月17号开奖 体彩排列五技巧口诀 科技股票推荐 北京pk拾5码人工计划 在手机上怎样炒股入门知识