Axure RP9——【唱片旋转播放暂停效果】

2024-05-10 08:31:46

唱片旋转播放暂停效果

目录

唱片旋转播放暂停效果

I.效果

II.实现步骤

I.效果

实现唱片播放暂停，旋转效果。一般常见在歌曲播放场景。

旋转效果

II.实现步骤

思路：

通过点击开始按钮，可以切换到播放按钮且唱片进行旋转；

再次点击，会从播放状态，变为暂停，停止播放，且唱片停止旋转。

1.元件准备：

提前准备好的图片；（考虑到美观，设置成圆形）

按钮：播放、暂停按钮（等大）；

动态面板——因为要实现旋转动态功能，需要借助DP来实现

可以自行想象，设置其他元件进入。

如图：

2.面板交互设置

（1）准备

①放置一个动态面板到页面中，可随意进行放置；要实现循环状态，故该面板要有2个状态；并命名为：“循环面板”

②需要将开始、暂停按钮，放置在同一个动态面板中，且位置相同；并将此面板命名为“开始暂停”面板

（2）对“开始暂停面板”设置交互：

③进入“开始暂停”面板，选中状态1，即“开始”状态，设置交互：

实现：点击“开始”后，会切换到“暂停”状态；

单击时——设置面板状态：需要对2个动态面板进行设置

对“开始暂停面板”——到“暂停”状态；无需动画

对“循环面板”——到下一项，向后循环，无需动画

④对“开始暂停面板”中的“暂停”状态进行交互设置：

对“开始暂停面板”——切换到“开始”状态；无需动画

对“循环面板”——停止循环，无需动画

（3）对“循环面板”设置交互

目的：控制唱片旋转角度及速度

状态改变时——旋转——目标：唱片——顺时针，经过角度0.6度

无需动画。

（角度计算：循环间隔，设置的是100ms，即1s；1分钟有60s，那1s旋转0,6度）

（4）设置以后，进行预览即可。

也可自行设置其他交互动作。

Axure RP9——【唱片旋转播放暂停效果】相关推荐

css3动画应用-音乐唱片旋转播放特效
css3动画应用-音乐唱片旋转播放特效核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...
css3音乐播放动画,css3动画应用-音乐唱片旋转播放特效
css3动画应用-音乐唱片旋转播放特效核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...
Axure RP9 实现单个元件无限旋转
Axure RP9 实现单个元件无限旋转截图效果关键步骤 1.交互事件 (选中当前元件,该交互事件只针对元素本身.从元件设计的角度来看,应该遵循元件独立原则,自己的属性以及事件只设置在自己身上.) ...
WPF技术触屏上的应用系列（三）: 视频播放器的使用及视频播放、播放、暂停、可拖动播放进度效果实现...
WPF技术触屏上的应用系列(三): 视频播放器的使用及视频播放.播放.暂停.可拖动播放进度效果实现原文:WPF技术触屏上的应用系列(三): 视频播放器的使用及视频播放.播放.暂停.可拖动播放进度效果 ...
android求助：关于播放器中的“播放/暂停”键: 用ImageButton来设置点击效果时的问题...
============问题描述============ 大家好,我最近遇到个问题: 大家都知道,播放器中的播放/暂停键是这样的逻辑:当用户点击了这个键,如果当前显示的是"播放&quo ...
Axure RP9——【导航栏二级菜单的展开效果】
导航栏二级菜单的展开效果 Navigation Bar · secondary menu Here's how I want things to unfold. 目录导航栏二级菜单的展开效果 Nav ...
HBuilder：微信h5实现音乐图标旋转播放，停止暂停
效果代码实现 html <section class="u-audio"><audio src="img/ ...
axure rp9单选按钮实现单选效果
使用axure rp9画的单选按钮,默认不会实现单选的效果,要通过一些设置才能实现单选的效果,如下图所示: 具体设置如下: 1.先准备至少两个单选按钮,按住shift鼠标将单选按钮全部选中,然后鼠标右 ...
【原型设计】第四节：Axure RP9 交面交互的使用说明 01 打开链接交互效果
本文章为axure 软件的界面交互制作的说明使用版本:axure rp9 交互的说明 axure 提供了多样丰富的交互功能,打开链接.显示隐藏.多选.输入框输入值.场景等交互内容,能够让我们完美的实 ...

最新文章

热门文章