本教程被收录到了 Axure常用页面交互设计课程 , 开始你的系统性学习吧!
《Axure抖音短视频中小元件的交互动效操作实例》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强操作实例,按钮,元件,设计等多维度案例或实操来进行更多的学习;此教程是由Baolan子在2021-07-05发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。
1.1歌曲封面旋转效果
1.1.1设计思考
这里没什么难点,Axure本身就有旋转的动作,主要就是要调试出图片旋转一圈的时间,让速度在一个舒适的范围即可。
1.1.2素材准备
(1)一张圆形的灰色底板50*50
(2)一个图片元件21*21(大家在制作Axure原型的过程中也要陆续建立自己的元件库,这样复用起来效率会高很多,以下是我自制的图片元件,是不是比官方的好看N倍~面对各种背景色都能轻松拖拽)
最终组合成以下形态
1.1.3交互设置
(1)设置两个元件为组合(音乐封面)
(2)为组合(音乐封面)添加用例:“载入时”(若下方没有,则点击“更多事件”查找)
误区:不要把交互动作设置在页面载入时,而要设置在组合(元件)载入时,这样你在复制元件去另一个页面的时候交互动作才不会消失。
(3)选择动作:旋转
(4)选择旋转的元件:勾选音乐封面中的图片元件
(5)设置参数如下:
旋转角度:3600(即旋转10圈)
锚点:中心
动画:线性,时间:50000(备注:这是旋转10圈的时间,如果你想增加圈数,可以按倍数递增)
大功告成,预览一下。
1.2喜欢按钮交互效果
1.2.1设计思考
图形只有两个状态,所以可以通过元件的选中效果来实现两种状态的切换。
1.2.2素材准备
(1)拖入一个心形形状35*33(如果你的元件库没有,可以关注我的公众号(皮先生PM)回复“限时免费”,就能下载我收藏的近1000个图标)
1.2.3交互设置
(1)选择心形按钮(favorite),在属性中设置它的选中状态,勾选填充颜色为红色。
(2)为心形按钮(favorite)添加用例:鼠标单击时
(3)选择动作:设置选中
(4)勾选元件:favorite
(5)值:toggle(意思是点击的时候切换状态,当元件为选中状态时,单击后变为未选中,反之调换。)
以上就是Axure抖音短视频中小元件的交互动效操作实例的全部内容介绍了,关于更多Axure教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。
赠人玫瑰,手有余香
< 上一篇 Axure制作APP折叠面板 axure手风琴制作教程操作实例
> 下一篇 Axure美化单选框复选框按钮教程
2022-06-17 09:39
2022-01-27 11:04
首席设计师
高级视觉设计师
高级插画设计师
输入的验证码不正确
评论区
暂无评论