Axure教程:如何制作微信拍摄小视频按钮动效

本文跟大家讲解一下,如何制作微信拍摄小视频按钮动效,一起来看看~

看看效果:

制作过程

1. 分析

截两张微信拍摄过程的界面,一共要制作两个动效:

按钮交互 :当长按小圆圈时,小圆圈变小,大圆圈变大;

圆形进度条交互 :绿色的圆形进度条走一圈。

2. 制作按钮交互

①画两个圆圈命名,大圆88*88,小圆66*66。

②新建交互长按小圆时:

  1. 设置尺寸大圆=160*160,动画线性300ms
  2. 设置尺寸小圆=62*62,动画线性300ms

③效果展示

3. 制作圆形进度条交互

这里我们用到一个小诀窍,画四个半圆弧,利用图层的顺序做出圆形进度条效果:

①画一个大圆和一个小圆,利用布尔运算修建出外轮廓

同理使用矩形居中减去,剩下一个半圆轮廓。

复制四个,两个水平翻转。

设置图层顺序,如图所示,然后排成一个圆。

②在小圆鼠标长按时,添加动作,等待,左绿旋转180度

效果图:

③设置右绿动效

这个时候,需要旋转右绿了,为了不让左灰挡住右绿,需要将右绿置顶。

效果图:

4. 最终优化

由于圆形进度条时长按时才会出现的,所以我们需要设置隐藏,然后长按等待300ms后出现。

5. 最终效果图

好了,今天的教学就到这里,大家有什么想学的交互或疑问可以评论噢,我会根据评论做教学。

源文件下载地址链接:https://pan.baidu.com/s/1DuXh_j-xYXRmq4GRTy3K6g

提取码:ceco

本文由 @索大佩罗娜 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章