有赞真赞，官网水波纹动画这么酷

在我心目中有赞前端团队感觉非常不错，特意看了看他们网站有没有好玩的动画，最终发现一个水波纹动画，感觉挺有意思，和小伙伴们分享一下。有没有发现这个弹窗底部有一个水波纹一直在动。

看到这个效果，我没想到有什么好的实现方式，最终通过分析他们的代码还原了这个效果。

做动画其实还有一招「欺骗用户的眼睛」，看似很高大尚的动画，其实可能很简单。就像今天这个动画，其实就是一个旋转和位移就搞定了。

首先看一个效果，椭圆旋转的效果是什么样的？

如果让一个椭圆做旋转动画，你会发现它有点像水波纹运动。

如果让这个椭圆边旋转边滚动呢，你会发现它在扭曲着“屁股”在走动。

代码如下：（如果你还不懂动画相关的 API，可以查看前几天的内容，或者直接查看该专题学习）

有赞的实现，其实只是把椭圆的宽高设置很大，然后让这个圆缓慢移动，椭圆的底部恰好与弹窗的底部能够重叠到一起，把蓝色底部遮挡住了一部分：

把粉色部分换成白色（和背景色一致），给人的感觉是弹窗下面的蓝条在动，其实是上面有一个大的椭圆在动。下面蓝条其实是固定高度：

如果把粉色部分换成白色：

这就是这个水波纹动效的核心思路，剩下的就是配合 UE 小姐姐调各种参数了，让整个动画变得更逼真。具体实现看代码：

底部蓝色的长条：

水波纹 1：

水波纹 2：

到这里一个水波纹的效果实现思路就分析完了，大家加油！

动画效果的 demo 我上传到了：

https://github.com/lefex/FE/tree/master/animation/animation。