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


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

大纲如下：

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.我们学的不是水波纹

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

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

雷达信号的扩散：

魅族官网动效

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

动效的原理都是一样的。

总结

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


本文原创，未经作者允许不可转载！
更多内容，欢迎关注作者微信公众号： 菜心设计铺！