摘要：本文通過講解制作QQ音樂交互原型的過程，了解如何實現(xiàn)旋轉(zhuǎn)、計時器以及拖動等常見的交互效果。案例中綜合運用了動態(tài)面板的循環(huán)、狀態(tài)改變、拖動、文本改變以及旋轉(zhuǎn)等事件，通過本案例的講解，相信大家對于動態(tài)面板等高級元件的綜合運用又會有一個新的認識。
觀察交互效果
通過觀察我們發(fā)現(xiàn)本案例中主要有以下3個交互效果：
播放音樂時：
開始播放，按鈕切換為暫停
唱片順時針勻速旋轉(zhuǎn)
進度條水平向右逐漸變長
進度球隨進度條延伸的方向移動
計時音樂播放時長
播放結(jié)束/暫停時：
切換為播放按鈕
進度條不在變化長度
進度球停止移動
計時器停止計時
唱片停止旋轉(zhuǎn)
拖動播放進度時：
進度條沿著水平方向變化尺寸
進度球沿著水平方向移動
計時器同步變化時間
思路分析
剛才我們已經(jīng)仔細觀察了頁面中的交互效果，現(xiàn)在我們需要分析實現(xiàn)這些效果的思路與方法。
效果1：播放音樂
唱片不停的進行勻速自轉(zhuǎn)、進度條以及跟隨的進度球勻速水平向右移動、計時器計算音樂播放時長，這些有規(guī)律性的動作如何實現(xiàn)呢
準備工作：通過設定全局變量OnLoadVariable控制唱片的循環(huán)旋轉(zhuǎn)，準備兩個動態(tài)面板作為指示器，通過動態(tài)面板狀態(tài)的循環(huán)切換控制著這些規(guī)律性的動作。指示器1控制進度條、進度球的移動，指示器2用來控制計時器循環(huán)計時。
下面我們來具體分析下各元件的交互配置
播放按鈕—單擊事件
點擊播放按鈕時，按鈕由原來的播放切換為關閉
全局變量賦值為1，唱片循環(huán)旋轉(zhuǎn)
順時針旋轉(zhuǎn)唱片，每500毫秒旋轉(zhuǎn)10度
循環(huán)切換指示器1的狀態(tài)，循環(huán)間隔為900毫秒
循環(huán)切換指示器2的狀態(tài)，循環(huán)間隔為1秒
唱片-旋轉(zhuǎn)事件
如果全局變量OnLoadVariable為1，順時針旋轉(zhuǎn)唱片10度，事件500毫秒
如果全局變量OnLoadVariable為0，等待1秒，順時針旋轉(zhuǎn)唱片0度（沒有停止旋轉(zhuǎn)事件，只能通過旋轉(zhuǎn)角度來達到停止的目的）
指示器1—狀態(tài)改變時事件（控制進度條和進度球）
如果進度條（動態(tài)面板）的寬度<進度的寬度，則
進度條的寬度每0.5秒增加的尺寸=進度寬度/215，高度不變，寬度表達式為[[LVAR1.width+LVAR2.width/215]]，局部變量LVAR1為進度條，LVAR2為進度
進度球（動態(tài)面板）移動至：X軸坐標=進度條X坐標+進度條的寬度，Y軸坐標不變，X坐標函數(shù)表達式為[[LVAR1.x+LVAR1.width]]，局部變量LVAR1為進度條
否則：此時歌曲已經(jīng)播放完畢，等待1秒，刷新當前頁面
指示器2—狀態(tài)改變時事件（輔助計時）
秒針文本自動+1
計數(shù)文本自動+1，計數(shù)文本隱藏
計數(shù)—文本改變時事件（輔助計時）：當計數(shù)文本=215時，指示器2停止循環(huán)，歌曲的總時長為3分35秒，換算成秒=215秒，這里的計數(shù)文本主要負責終止計時功能。
秒針-文本改變時事件
如果文字長度為1位時，則在前面加個0
如果文字長度大于1位時，則直接顯示元件文字
如果元件文字等于60，則秒針元件文字為00，分針自動+1，并加個前綴0
效果2：播放結(jié)束/暫停播放
停止按鈕—單擊事件
按鈕切換為暫停狀態(tài)
設置全局變量OnLoadVariable為0，唱片停止旋轉(zhuǎn)
指示器1和指示器2停止循環(huán)
效果3：拖動播放進度
進度球—拖動時事件：水平方向上在進度條范圍內(nèi)移動
進度球—拖動結(jié)束時事件
進度條的寬度=進度球X軸坐標-進度條X軸坐標
計時器秒針表達式為[[Math.floor(LVAR1.width/LVAR2.width*215%60)]] ，局部變量LVAR1為進度條，LVAR2為進度，函數(shù)Math.floor用于向下取整，獲取小于等于指定數(shù)值的最大整數(shù)，%表示求前后兩個數(shù)相除的余數(shù)
計時器分針表達式為0[[Math.floor(LVAR1.width/LVAR2.width*215/60)]]
好了，現(xiàn)在我們終于將所有元件的交互事件都配置好了，有點遺憾的是Axure中不能插入音頻文件，所以在預覽效果時，請同學們自行腦補音樂。
承擔因您的行為而導致的法律責任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。