陌北默

今天用Principle教大家来做个既简单,效果又好的loading动画。也巩固一下Principle的动画功能。不要慌,文末有福利。先看一眼最终效果,然后教程开始啦。

loading-dynamic-effect-principle 01

 

Step1

我们先在Sketch中完成这个loading动画所需要的文件:一个由多个简单几何形组成的图形。效果如图。

loading-dynamic-effect-principle 02

 

Step2

将sketch文件导入到Principle中。触发条件设为Auto,复制出一个画板。

loading-dynamic-effect-principle 03

loading-dynamic-effect-principle 04

 

Step3

调节第2个画板中的loading图标的角度(将实心图标和线型图标两个组的角度Angle都设为280)。

loading-dynamic-effect-principle 05

接着,将第2个画板再次设置触发条件为Auto,重新指向回第一个画板。

loading-dynamic-effect-principle 06

这时,我们就已经得到了一个简单的loading动画。但是,这样的loading动画还不够精致而且速度太快了,我们需要调整细节。

loading-dynamic-effect-principle 07

 

Step4

首先将选中画板1到画板2的动画箭头,调出动画调节窗口。

loading-dynamic-effect-principle 08

将动画持续的时间调整到1s。

loading-dynamic-effect-principle 09

接着,选中我们把“线型图标”的动画效果调整为Ease  Both,“实心图标”的动画效果调整为Spring。

loading-dynamic-effect-principle 10

loading-dynamic-effect-principle 11

接下来,同样的,选中画板2到画板1的动画箭头,将持续时间调整为1s,“线型图标”和“实心图标”的动画效果都调整为Ease  Both。

loading-dynamic-effect-principle 12

来看看效果,duang!完成了!

loading-dynamic-effect-principle 13

 

这个小教程到这里结束了。结合大家自己的设计风格、公司logo可以演化出更多有意思的loading结果。这就需要大家自己去探索啦。

向(公众号:紫豆子设计站)发送:loading,即可得到文中Skech和Principle源文件。

 

原文地址:紫豆子设计站(公众号)

作者: 紫豆子的开发

zidouzi-erweima

转载请注明:学UI网 » 4步制作酷炫loading效果[Principle]

登录收藏
 
你可能喜欢的:
loading动效AE教程loading动效AE教程
设计沉思录|乡镇一哥诞生记设计沉思录|乡镇一哥诞生记
教UI系列教程 - 圣诞飘雪动效教UI系列教程 – 圣诞飘雪动效
教UI系列教程 - 抽象光线动效教UI系列教程 – 抽象光线动效
只需要懂点高中物理知识,就能让你做出优秀动画!只需要懂点高中物理知识,就能让你做出优秀动画!
9个小知识教你更好的理解动画原则,提升动效品质9个小知识教你更好的理解动画原则,提升动效品质
教UI系列教程 - 三维粒子动效教UI系列教程 – 三维粒子动效
轻松实现Glitch故障效果轻松实现Glitch故障效果
教UI系列教程 - 爆炸碎片动效教UI系列教程 – 爆炸碎片动效
揭秘Cinemagraph(微动效果)的前世今生揭秘Cinemagraph(微动效果)的前世今生