Axure系列教程（一）：抖音短视频中小元件的交互动效（上）

文章分享了抖音短视频中交互动效的制作方法，一起来学习下。

第一章知识点

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

大功告成，预览一下。

当然还有另一种实现方法，且复用性较高，我们将在下一节课和收藏按钮一起讲解，敬请期待。

抖音系列教程课程预告

——知识点分布——

希望本系列教程可以解决产品新人在Axure原型制作上的一些疑惑，不然我这半个月的业余时间就白费了哈哈。

作者：皮先生（微信号公众号：皮先生PM），多年互联网产品设计经验，专注高保真原型的设计与分享。

本文由 @皮先生 原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自PEXELS，基于CC0协议