Principle 加载(Loading)特效制作

搬瓦工机场JMS

今天要做的Loading效果如下:

第一步:准备画板和内容


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

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

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

3、4、5 执行同样的操作。

第三步:旋转『2Group』,移动『1』

特别注意的是:『2小球』到了『1小球』的位置,是『2Group』旋转了180度,『1小球』移动到『2小球』的位置,是向右移动了40个单位。(为了看的明白我错开了位置)

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

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

乍一看好像没变化一样。

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

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

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

第五步:设置跳转

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

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

将其他几个跳转补齐,最后一个画面跳回第一个画面。

但是这个设置会有一个bug,看下面的动图,会多出一个效果,最后一个球跳回第一个位置,其他四个球往右挪了一下。

实际上我们要的效果是:

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


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

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

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

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

未经允许不得转载:搬瓦工VPS_美国VPS » Principle 加载(Loading)特效制作

赞 (0) 打赏

相关推荐

    暂无内容!

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏