晚上有点事,提前发文了

菜心录制歌曲



阅读此文大概需要5分钟时间


总听见有人说:“做设计要学会活学活用”,但如何才能活学活用,这才是问题的关键!


所以今天菜心就来用一个简单的水波纹动效和大家聊聊这个问题。


大纲如下:

1.水波纹的动效原理

2.我们学的不是水波纹

3.总结


1.水波纹的动效原理

之前我有发过一个水波纹扩散的动效:


但是没有讲解原理,今天我们先来说说这个动效的原理,如果你动效很厉害,可以直接跳过了。


做一个循环动效最关键的一点,就是开始和结束的状态是一摸一样的:




无论过程怎么变,你必须要保证这两个状态一样,这样才能无缝循环起来,这是第一个知识点。


那过程是如何变化的呢?


其实这个动效一共有四个圈,只是最开始的状态,最里面的小圈是全透明的:




为了让大家更容易理解,我们把这四个圆圈用序号来表示,从里到外为1、2、3、4:




接下来我们就可以分析,这个动效过程发生了什么?其实很简答,就是1变成了2,2变成了3,3变成了4,4变成了全透明。


也就是最后的状态,我们只能看见2、3、4了,而最开始的状态,我们也只能看见2、3、4(1是全透明的)。一个循环就这样诞生了。


至于1如何变成2,2如何变成3?其实变化的属性就只有大小和透明度,让两个圆的大小、透明度一样就ok了。


当然,做这个动效,还是需要有一些动效软件的基础(如AE),如果不会的话可以先明白原理,留着以后备用!


2.我们学的不是水波纹

这一部思考其实挺重要的,如果我们仅仅把这种动效局限于水波纹的效果,那以后用到的可能性就会大大减少,所以我们可以进一步将这个动效提炼一个关键词——扩散。


这样,能够用到扩散效果的地方就比较多了,例如,太阳光的扩散:




雷达信号的扩散:    





魅族官网动效



再比如,水波纹扩散的效果不一定是圈圈,条形的波纹也一样可以实现:



动效的原理都是一样的。


总结

如果我们只学案例的表面,那永远都学不完,因为案例是无穷无尽的,但如果能思考总结案例背后的共性和原理,我们就可以举一反三,这样成长的速度必然会快出很多,而且这也是提高我们“透过现象看本质”的一种正确锻炼方法!


对嘛?


任意打赏


给思维加一道菜



本篇文章来源于微信公众号: 菜心设计铺