Axure系列教程(一):抖音短视频中小元件的交互动效(下)

专为互联网人打造的365天成长计划,500门视频课程随便看,构建你的产品、运营知识体系。查看详情

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

第一章知识点

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

知识点分布

相关阅读

Axure系列教程(一):抖音短视频中小元件的交互动效(上)

 

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

题图来自PEXELS,基于CC0协议

原创不易,欢迎赞赏(*^▽^*)
4人打赏
评论
有话不说憋着难受
  1. 感谢元件库的分享~辛苦了

    回复
  2. 本文的原型预览链接:http://www.pmdaniu.com/rp/view?id=UHNSMgBlBzBVbVdjUXlSBA

    另外推荐一个产品经理必备的PRD文档:http://www.pmdaniu.com/rp/view?id=VXYBYVA1AjUDOwU0UnpQGQ

    回复