Aure 系列教程（一）：抖音短视频中小元件的交互动效（下）
文章分享了抖音短视频中交互动效的制作方法，一起来学习下。
第一章知识点
- 1.1歌曲封面旋转效果
- 1.2喜欢按钮交互效果
- 1.3收藏按钮交互效果
- 1.4关注按钮交互效果
1.3收藏按钮交互效果
1.3.1设计思考
图形有两个状态，但是无法像心形形状一样通过填充颜色（选中效果）来实现两种状态的切换，所以我们需要借助动态面板来完成。
我们为动态面板建立两个状态，状态一：未收藏，状态二：已收藏。当动态面板处于状态一时，点击后切换到状态二，当动态面板处于状态二时，点击后切换到状态一。确定思路后我们开搞。
1.3.2素材准备
（1）拖入一个星形形状（边框）22*21，填充颜色为白色
（2）拖入一个星形形状（实心）22*21，填充颜色为黄色
（如果你的元件库没有，可以关注我的公众号（皮先生PM）回复“限时免费”，就能下载我收藏的近1000个图标）
1.3.3交互设置
（1）单击星形形状（边框），点击右键选择“转换为动态面板”
（2）双击星形形状（边框），然后添加一个面板状态，分别命名为未收藏和已收藏。
（3）双击“已收藏”，进入“已收藏”面板状态，将准备好的星形形状（实心）剪切到此处，设置坐标在原点。
（4）为星形形状（实心）添加用例：鼠标单击时
（5）选择动作：设置面板状态
（6）选择状态：未收藏
（7）回到“未收藏”面板状态
（8）同样为星形形状（线框）添加用例：鼠标单击时，选择面板状态为已收藏。这样就能实现两种状态的相互切换了。
大功告成，预览一下。
1.4关注按钮交互效果
1.4.1设计思考
整个动效过程：点击关注按钮，按钮转动半圈后变成了对号，再转动半圈，最后缩小消失。
利用到了元件的旋转、显示、隐藏和缩小（设置尺寸），下面就让我们一步一步来完成。
1.4.2素材准备
（1）拖入一个圆形20*20填充为红色，拖入一个加号填充为白色，与红色圆形组合成“关注按钮”。
（2）拖入一个圆形20*20填充为白色，拖入一个对号填充为红色，与红色圆形组合成“关注按钮过渡”，在样式中设置元件角度180。
1.4.3交互设置
阶段一：按钮转动半圈
（1）为组合“关注按钮”添加用例：鼠标单击时
（2）添加动作：旋转
（3）选择旋转的元件：勾选关注按钮（组合）
（4）设置参数如下：
旋转角度：180
锚点：中心
动画：线性,时间：600
阶段二：变成了对号，再转动半圈
（5）继续添加动作：等待 600（如果不设置等待，阶段二将会和阶段一同时进行）
（6）继续添加动作：隐藏，勾选关注按钮（组合）
（7）继续添加动作：显示，勾选关注按钮过渡（组合），并勾选置于顶层。
（8）参考阶段一，让组合“关注按钮过渡”转动半圈。
阶段三：缩小消失
（9）继续添加动作：等待 600（600毫秒怎么来的，这是阶段二的进行时间，设置等待的意义就是表达阶段三是在阶段二完成后进行的，而不是同时进行）
（10）继续添加动作：设置尺寸
参数如下：
宽、高都为0（即为消失），
锚点：中心；
动画：线性；时间：500
至此三个阶段设置结束，如下图，最后只剩一步
（11）让关注按钮过渡（组合）隐藏，然后和关注按钮（组合）设置在同一坐标下。
大功告成，预览一下。。
课程预告：
Axure系列教程（二）：抖音短视频中超简单的吸睛大法
知识点分布
作者：皮先生（微信号公众号：皮先生PM）
关键字：Axure, 按钮
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！