一个简单动效的活学活用
总听见有人说：“做设计要学会活学活用”，但如何才能活学活用，这才是问题的关键！
所以今天菜心就来用一个简单的水波纹动效和大家聊聊这个问题。
大纲如下：
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.我们学的不是水波纹
这一部思考其实挺重要的，如果我们仅仅把这种动效局限于水波纹的效果，那以后用到的可能性就会大大减少，所以我们可以进一步将这个动效提炼一个关键词——扩散。
这样，能够用到扩散效果的地方就比较多了，例如，太阳光的扩散：
雷达信号的扩散：
魅族官网动效
再比如，水波纹扩散的效果不一定是圈圈，条形的波纹也一样可以实现：
动效的原理都是一样的。
总结
如果我们只学案例的表面，那永远都学不完，因为案例是无穷无尽的，但如果能思考总结案例背后的共性和原理，我们就可以举一反三，这样成长的速度必然会快出很多，而且这也是提高我们“透过现象看本质”的一种正确锻炼方法！
对嘛？
任意打赏
给思维加一道菜