抖音短视频中小元件的交互动效

　　*章知识点

　　1.1歌曲封面旋转效果

　　1.2喜欢按钮交互效果

　　1.3收藏按钮交互效果

　　1.4关注按钮交互效果

　　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(意思是点击的时候切换状态，当元件为选中状态时，单击后变为未选中，反之调换。)

　　大功告成，预览一下。

　　贵阳航洋动漫职业学校是贵阳市教育局批准(贵阳市教[2010]15号)设立的跨专业(包含计算机平面设计、动漫与游戏制作、影像与影视技术、绘画等专业)、多门类、全日制中等专业职业学校，同时也是一所实行准军事化管理的学校。