本期教學(xué)為網(wǎng)易云音樂播放界面中唱片旋轉(zhuǎn)和暫停的交互實現(xiàn)細(xì)節(jié)，一起來看看~

一、交互事件原理講解

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

二、界面元件搭建

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

三、交互事件實現(xiàn)

（1）選中【按鈕】動態(tài)面板，添加【鼠標(biāo)單擊時】事件

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

2）否則，此面板切換為下一個狀態(tài)。

（2）選中【碟片】，添加【旋轉(zhuǎn)時】事件（主要是實現(xiàn)碟片的循環(huán)旋轉(zhuǎn)）

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

四、預(yù)覽效果

示例演示：

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

本文由 @火星人～艾斯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議