【Axure进阶】音乐唱片机图片旋转交互效果

文本利用Axure旋转功能,实现播放暂停切换旋转交互效果,熟练掌握Axure旋转功能是中高级产品经理必备技能之一。音乐唱片机图片旋转交互效果可使用在音频播放器等场景,类似网易云音乐胶片旋转效果。

1.png



01

原理分析

通过单击交互,播放条件下旋转图片和暂停条件下停止旋转图片


02

元件准备

1、音乐封面图片,命名“音乐封面”

2、播放暂停/暂停按钮图片动态面板,面板名字分别命名“播放”和“暂停”

image.png

image.png

03

交互设计

1、“播放/暂停”动态面板设置交互,需要设置两个条件来切换图片是否旋转或暂停

单击时
   条件1:动态面板“播放/暂定” 状态为 “播放”时
   设置 动态面板 状态
       选中面板 “当前(播放/暂定)” 状态为 “暂停”
   设置 旋转
       选中元件“音乐封面”  经过旋转角度为“1°” ,动画为“线性”效果,旋转“200毫秒”

image.png

image.png

image.png

单击时
   条件2:非条件1时 或设置 条件当动态面板“播放/暂定” 状态为 “暂停”时
   设置 动态面板 状态
       选中面板 “当前(播放/暂定)” 状态为 “播放”

image.png

2、设置“音乐封面”在旋转交互,当在动态面板“播放/暂定”状态为“暂停”的时候继续旋转,就能达到循环旋转效果,当在动态面板“播放/暂定”状态为“播放”时停止播放

旋转时
   条件1:动态面板“播放/暂定” 状态为 “暂停”时
   设置 旋转
       选中当前(或“音乐封面”)  经过旋转角度为“1°”    动画“线性”“200毫秒

image.png

image.png

交互设置完成即可预览交互


Axure教程预览地址:https://hub.axmax.cn/view/g1P04qmox7ek3Jz/?g=1

Axure函数手册: https://hub.axmax.cn/view/u1iHo3yjz1NDkS9/?g=1

本文由Axmax原创


2.png