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