本期教學為網易云音樂播放界面中唱片旋轉和暫停的交互實現細節，一起來看看~

一、交互事件原理講解

1. 條件判斷按鈕動態面板決定唱片的旋轉是否；
2. 點擊按鈕后，圖片的旋轉；
3. 添加圖片“旋轉時”事件，控制其循環旋轉。

二、界面元件搭建

1. 添加一個動態面板，命名為【按鈕】，添加【旋轉】和【暫?！績蓚€狀態，分別對應按鈕命名為“旋轉”和“暫?！?。
2. 添加圖片“碟片”，本教程為兩張圖片，你們也可以采用一張圖片。

三、交互事件實現

（1）選中【按鈕】動態面板，添加【鼠標單擊時】事件

1）如果按鈕面板為【旋轉】，切換為此面板為下一個狀態，向后循環，同時旋轉【碟片】，旋轉為“相對位置”，角度為5，方向為“順時針”，動畫為線性，時間為500毫秒。

2）否則，此面板切換為下一個狀態。

（2）選中【碟片】，添加【旋轉時】事件（主要是實現碟片的循環旋轉）

1. 同理，旋轉為“相對位置”，角度為5，方向為“順時針”，動畫為線性，時間為500毫秒。
2. 增加判斷條件為：動態面板【按鈕】==暫停。

四、預覽效果

示例演示：

作者：火星人～艾斯，公眾號：艾斯的Axure峽谷

本文由 @火星人～艾斯 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議