axure数字交互效果（Axure系列教程一）

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

第一章知识点

• 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系列教程（二）：抖音短视频中超简单的吸睛大法

知识点分布

,