起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure教程：圖片的旋轉和暫停
本期教學為網易云音樂播放界面中唱片旋轉和暫停的交互實現細節，一起來看看~
一、交互事件原理講解
- 條件判斷按鈕動態面板決定唱片的旋轉是否；
- 點擊按鈕后，圖片的旋轉；
- 添加圖片“旋轉時”事件，控制其循環旋轉。
二、界面元件搭建
- 添加一個動態面板，命名為【按鈕】，添加【旋轉】和【暫停】兩個狀態，分別對應按鈕命名為“旋轉”和“暫?！薄?/li>
- 添加圖片“碟片”，本教程為兩張圖片，你們也可以采用一張圖片。
三、交互事件實現
（1）選中【按鈕】動態面板，添加【鼠標單擊時】事件
1）如果按鈕面板為【旋轉】，切換為此面板為下一個狀態，向后循環，同時旋轉【碟片】，旋轉為“相對位置”，角度為5，方向為“順時針”，動畫為線性，時間為500毫秒。
2）否則，此面板切換為下一個狀態。
（2）選中【碟片】，添加【旋轉時】事件（主要是實現碟片的循環旋轉）
- 同理，旋轉為“相對位置”，角度為5，方向為“順時針”，動畫為線性，時間為500毫秒。
- 增加判斷條件為：動態面板【按鈕】==暫停。
四、預覽效果
示例演示：
作者：火星人～艾斯，公眾號：艾斯的Axure峽谷
本文由 @火星人～艾斯 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
歡迎關注個人公眾號：艾斯的Axure峽谷
評論
教程太不詳細了
哈，看完還是不太會？你可能需要從Axure基礎開始學
?? 這里推薦你加Axure實戰班的助教小可愛@CC-起點學院（微信：qidiancc520），回復關鍵詞：原型禮包
領取適合產品新人的原型設計大禮包哦，cc還會不定期分享Axure免費視頻課程呢！
可能我太笨，你這教程不適合我
? 基礎版在哪里學習呀
按照這個步驟照做，學不會嗎 ??
請問下，我弄好后，為什么暫停不下來？我是rp 9
有加狀態判斷嗎？添加旋轉時交互事件，需要當按鈕狀態為暫停時，這樣來控制暫停旋轉
怎么不能一直循序轉動
? 我零基礎呀