ProtoPie制作无限循环Loading动画

本篇教程主要讲解如何使用ProtoPie来制作无限循环的loading动画,掌握这个方法之
后,也可以用来实现其他不同的效果,比如输入光标的效果等。
制作步骤:
1、新建一个Pie文件,在画布上用图形工具画三个圆圈,分别命名为 “1” “2” “3”,如下图
所示:
2、把3个圆圈的中心点由ProtoPie的默认值左上角改为居中,从而让圆圈以中心点进行
缩放。
3、接着来给第一个圆圈制作循环的放大缩小效果,为了让圆圈先放大再缩小,这里先把
圆圈”1″的大小都改为0,如果画面上看不到圆“1”,可以通过图层面板选中“1”图层。在添
加触发下选择“自动加载”,在自动加载下给圆圈“1”添加“大小”缩放效果,具体设置如下
图:
这里添加的“大小”缩放效果是把圆圈“1”从0放放大到6的放大效果。
现在可以从预览窗口看到圆圈“1”的放大效果了,但这个时候只会显示一次。
缩小效果也同理,给圆圈“1”添加同样的一个“大小”效果,具体设置如下图:
这里添加的“大小”缩放效果是把圆圈“1”从6缩小到0的缩小效果。
设置完成后在预览窗能看到圆圈“1”在无限循环着放大缩小的效果如下图:
这里使用的是QQ录屏录制的GIF效果被加速了实际速度没这么快
以上制作的部分就结束了,完成这个效果的原理是这样的,先看下面时间部分的图:
图上两条时间线为交替出现的状态。
在第一个“大小”缩放效果为放大效果,我们设置了放大效果的持续时长为0.6秒;然后设
置重复的间隔为0.6秒。
这样的效果就是从0秒开始执行第一个到0.6秒的放大效果之后,每隔0.6秒会再次执行一
次放大效果。
第二个“大小”缩放效果为缩小效果,时间设置上跟放大效果是一样的也是持续0.6秒间隔
0.6秒,不同的是把缩小的整个动画的时间延迟了0.6秒。
这样错开了放大跟缩小的动画时间;就有了0秒到0.6秒会把圆圈“1”从0放大到6,0.6秒到
1.2秒又把圆圈“1”从6缩小到0如此循环的效果。
接下里圆圈“2”跟圆圈“3”的放大缩小效果同样添加在同一个“自动加载”触发上就行了,
圆圈“2”“3”的缩放效果跟圆圈“1”的设置是一样的这里不重复讲了。
需要注意的是为了实现“1”“2”“3” 3个圆圈的顺序出现,这里把整体圆圈“2”的效果延迟出现了0.2秒;
圆圈“3”整体效果延迟出现了0.4秒如下图:
实际完成的循环的loading动画如下图:
上图保存的GIF有失真
这里提供源文件参考以下是百度盘链接:
链接:https://pan.baidu.com/s/1gsPNH1tIXbzjHYZnH7DLaA