Principle教程:加载(Loading)特效制作的方法

此次要做的Loading效果如下:

d3f4220e95554b6b9de0f6ee74239d55.gif

第一步:筹办画板和内容

应用快捷键『R』,创建5个方块,而后调整圆角,变成圆形,上渐变色。

dbd8b418c9d14ed880f92574e88cfdf6.png

第二步:将2、3、4、5进行编组,而后设置组的宽度。

设置『2 Group』的宽度时,建议直接向左拉宽,而后让小球留在框的右侧,这很重要。

d5afbb15ddcf4ff586504e7079564c5e.png

3、4、5 执行一样的操纵。

第三步:扭转『2Group』,挪动『1』

特别留意的是:『2小球』到了『1小球』的位置,是『2Group』扭转了180度,『1小球』挪动到『2小球』的位置,是向右挪动了40个单元。(为了看的清晰我错开了位置)

扫描二维码关注公众号,回复: 7075868 查看本文章

a2ce271cdc624c6190c9426539803ad1.png

『2小球』和『1小球』挪动后,必要改变颜色。

『画板一』种的血色圈起来的即是『1小球』的位置和颜色,到『画板二』,就挪动了第二个位置,颜色也变成了相对深的蓝色。

乍一看好像没变化一样。

e0a43771625a4430829d84ca826b6b97.png

第四步:将其余几个画板的效果补齐

为了效果明显,我讲小球的变化位置给错开了,一次可以看出,小球不断往右进,而后颜色同时发生变化。

ac05339b47994c34a596f4333d2fbbf9.png

把错开调整好即是下图的样子,好像甚么变化都没有。

f9ff7f1ea4804d23bbb6d85c38ac5a23.png

第五步:设置跳转

这里设置跳转用的效果叫自动。

a0dfb221c0cf460d9e6670f71394af1f.png

如果你的设置正常的话,点击『画板1自动』那根线,显示的应该是这几个内容。

5a6b8597f064458a82dfb24c6d60c1cd.png

将其余几个跳转补齐,末了一个画面跳回第一个画面。

ae5c9059989b42808b0a734c71708bb2.png

不过这个设置会有一个bug,看下面的动图,会多出一个效果,末了一个球跳回第一个位置,其余四个球往右挪了一下。

6f43a98a1a2a4c59a7e34b1954f5305e.gif

实际上我们要的效果是:

fefcb9b729b04cae818714277c611f96.gif

第六步:设置效果的变化时间

点击『画板5自动』显示的内容如下图:

6df7969aee7a4ed48b2b21b0f6483ebc.png

我们要把这每个效果的变化时间调成0,即小球从『画板5』跳到『画板1』直接过度,不必要不任何动画。

b9d9970fc345418294c5e1feb2564746.png

到此,所有效果设置完了。

系统默认给的动效时间为0.3S,这个时间让loading显得特别急,以是我的效果把时间改成了0.5S,你们也可以按照自己的想法进行设置。期间对于动效的变化,我还设置了弹性的效果,也蛮意思,大家根据自己的喜好设置即可。

68063e458a8f444896b59def8332fed4.gif

以上就是小编为大家带来的Principle教程:加载(Loading)特效制作的方法。还有更多详细、实用的功能以及相关软件Principle和其他Mac软件获取,大家快来Macdown.com自行探索一番吧。


猜你喜欢

转载自blog.51cto.com/14505326/2431353