一个会做设计、会写代码，还很喜欢写小说，才华横溢并且爱分享的中年男人~
今天给大家带来的是干货中的干货， 手把手系列教程。
考虑到设计群总有同学说自己家的程序员「 无法实现效果」，而且一直有很多同学想要 前端代码的教程，因此我们一直致力于把 设计 和 代码 都一起教了。
不废话，我们先给大家看一下最终效果，分别用到的是 AE 和 Xd。AE教程难度大，效果好。Xd教程则简单易学，实现效果快：
虽然之前我们的图文教程写的非常详细，但是依旧有基础差的同学对某个具体步骤有疑问，于是 我特地录制了两份视频。对教程有疑问的同学，可以看这个的视频：
上集：设计部分
1、新建一个合成：大小800*800。
3、再新建一个固态层，选择绿色，命名为“ 波浪”。
4、把这个绿色的“波浪”图层向下移动，移动到中间的位置。
▲ 直接调整位置属性（左下角）设置成400,800即可。
5、再新建一个固态层，取名“ 电波效果”。我这里用的背景色是黑色，但是其实用任何颜色都可以。因为他只是类似于一个 遮罩。
6、在特效控制台内右键，效果 > 生成 > 电波。
▲ 所谓的电波效果，其实就是圆心向外发散小圆圈并且逐渐变大
7、设置开始宽度为 25，结束宽度为 5，频率为 1.5，扩展为 2.5
▲ 简单的说，就是把电波弄粗一点儿。置换以后，蓝色的部分就是坡度的爬升，空白处就是坡度的下降。这样就形成了波浪。电波的频率决定了波浪的速度，你可以根据你自己的需要，设置它的参数。数值越大，波浪速度越快。
8、把“电波效果”图层缩放设置成 300，这样电波就变得更粗了。
9、电波有点太稀疏了，把扩展设置成2.5。然后向左侧移动电波图层，让它到屏幕左侧外面去。
10、给“电波效果”图层增加：效果 > 模糊与锐化 > 快速模糊。模糊量设置成 19，并且把“ 重复边缘像素”勾选上。
11、这样，我们的波纹效果就做好了。 Ctrl + shift + c 我们把“电波效果”图层弄成一个“ 预合成”。一定要勾选“ 移动全部属性到新建合成中”。只有这样，才能应用后面的置换效果。
12、对中间绿色的图层应用：效果 > 扭曲 > 置换影射。
13、添加效果后就是下图的样子了。因为默认值比较小，我们可以看见一点儿很小的波浪了。
14、水平方向我们不需要波浪，设置最大 水平置换为 0，最大 垂直置换设置成 20（值越大，波浪越大，你可以根据你自己的需要设置）
15、蓝色的电波图层并不需要显示，关闭图层左侧的“小眼睛”。由于电波是从0开始发射，我们只要把这个图层向左拖动就可以了。让波浪一开始就全屏出现。我顺便把这个图层的时间弄长了一点，弄成了 30秒，避免有空白。
▲ 这里我要详细说明一下：为什么我们不用一个简单的波浪曲线做平移呢？因为我们电波效果设置的开始宽度是25，结束宽度是5，这样波浪的左侧和右侧是有变化的。 这样做出来的波浪有一种“甩尾”的感觉，更加的真实和细腻。上面这2个参数你一定要各种尝试，尤其是前后差距要大，这样你才能做出比别人动画感觉更好的波浪。
17、有的同学做到这个步骤，会发现他波浪的边缘有点不清晰（下图是我放大到400%的效果） 如果发现不清晰，进入波浪图层，还可以进行如下操作。
18、添加： 效果 > 蒙版 > 简单抑制 设置蒙版抑制为 0.5~0.6 左右（具体值你放大400~500%，然后把数值调整到边缘过渡看起来比较自然）
19、选择最顶上2个图层，也就是“ 波浪”和“ 电波效果-预合成”那两个图层了，按 Ctrl + shift + c 把他们弄成一个预合成，取名“wave”，留着备用。因为我们的水波要弄2层，所以这相当于一个小组件。
21、用圆形工具，绘制一个 正圆。弄一个显眼的颜色，图层名称：circle。
23、选中 wave 这个预合成，将它的 轨道蒙版设置成 circle 的 alpha, 也就是圆形会变成遮罩。
24、我们播放一下动画：水波纹已经在圆球内晃动了。
25、选中最顶上2个图层，复制一份（可以直接 ctrl+d ）。
26、选中倒数第二个图层，也就是我们的wave图层。给它添加： 效果 > 生成 > 填充。然后颜色选取一个深一点儿的绿色。
27、由于上面的浅绿色挡住了它，目前你看不出任何不一样，所以，我们把下面这个wave向左侧或者右侧移动一点儿， 让他露出来一部分。
28、预览动画效果，感觉很不错，突然感觉自己又帅又有才华。
29、接下来只要再做 从下往上的移动动画，水波增长效果就做好了。但是现在有2层水波，所以让 上层水波跟随下层水波，将“父级”那里的螺旋线条按住，拖动到 wave 图层上即可。操作过程中你会看到 AE 自动绘制了一根黑色线条（ AE 的这个交互设计真是脑洞挺大的）。
30、上一步操作完以后，你会看到“ 父级”那一栏： 4.wave 说明它们的位置已经挂钩了。
31、在第一帧的位置，把 wave 这个预合成位置 y属性调整到底部，因为在遮罩的下方，所以看不到任何波浪。
32、在4秒钟的时候，把位置拖拽到上面。露出大概 96% 左右，再 k一帧，这样 上升动画就做好了。
33、预览动画效果，有点360清理软件那个味道了。
34、接下来，在界面上随意打几个字，具体什么文字无所谓，因为还要应用效果。
35、对文字图层添加： 效果 > 文字 > 编号。选一个不会侵权的字体，设置样式为粗点的感觉，并且居中对齐。
36、设置好后，就是下面这样了。你会发现之前自己打的字没有了，真正显示的文字变成了这个红色的 “0.000”
37、设置小数点位数为 0，如果你想做96.35%那种感觉就设置为2。然后把字体设置成 深绿色，调整到需要的大小和位置。
38、在第一帧对“ 值/偏移/最大随机值”k帧，然后在水波上升到不动的地方k帧，值设置成96。
40、接下来我们在数字后面加上一个 “%”符号，字号设置小一点，并且移动到合适的位置。
如果你仔细看，会发现整个圆形的边缘其实有点杂边。这是因为我们其实叠加了2层波浪，主要是后面的深色波浪导致的。你再绘制一个直径更小一点的 同心圆形状遮罩就可以处理这个问题了。具体方法我们前面的步骤演示过。
4、填充绿色，并且 Ctrl+D 复制一个，拖动到右侧，把它们挨在一起。
5、 Ctrl + G 将他们弄成一个组，方便一起移动。
7、选中所有的图层，右键 > 带有形状的蒙版，这样就做了一个遮罩。
10、把下面的改成深色。上面的是 浅色，下面的是 深色。(为了方便操作，我关掉了上面图层的眼睛)
11、把深色的拖动到左边，并且让右侧和圆圈的右侧对齐。
15、将第二画板里面的 浅绿色路径向左移动，一直移动到路径的右侧和圆圈的右侧对齐。（XD有自动吸附功能，所以这些操作都很简单）
16、把深色的路径向右移动，一直到路径的左侧和圆圈的左侧对齐。下图是移动前的样子。可以理解为 2个元素右对齐。
17、下图是移动后的样子，可以理解成 2个元素左对齐。
18、这是移动好的样子，虽然他们的x轴位置有变化，但是看起来是一模一样的。
19、点击原型，然后开始拖拽小箭头，从 画板1拖拽到 画板2。
20、设置触发为“ 时间”，类型为“ 自动制作动画”，延迟为 0 秒，持续时间为2秒3秒都行（我随意设置了2.2秒）。
▲ 需要说明的是：如果你的触发无法选择时间，那说明你不是对画板执行动画。 只有画板才有时间这个选项，当你输入0秒的时候，Xd经常会变成0.2秒，你最好输入0.0秒。
21、 2.2秒后，波浪就从左移动到了右边。这个时候，再对右边朝左边拉一个动画。
22、触发依旧是时间、延迟设置成 0 秒。类型为：“ 自动制作动画”。持续时间改成 0 秒。这样的结果就是，左边的图需要 2.2 秒的时间，跑到了右边。然后 0 秒钟，直接跳到了左边。然后又花 2.2 秒，跑到右边，如此循环，看起来就是连续的动画了。
23、波浪动了起来，突然觉得自己很有才华。感觉要再一次爱上自己了。
24、学会了最关键的步骤后，接下来你应该自己想想如何实现下面的效果了。动画的原理都是一样，我相信你一定不会觉得有难度。
25、你还得想办法加上一个滚动的数字。把这个动画做成像 AE 里面的那种感觉。
图文教程里面最后两个步骤留给大家自己思考。如果你实在不知道怎么做，就再去本篇文章的开头看看我们的 视频教程。 视频中我有非常详细的教给大家所有的步骤，包括最后的这2个留给大家思考的步骤。
——————————————————————————————————————————————————
下集：代码部分
制作动画的思路和写代码的思路其实是一样的。你只要真正理解了自己要设计的动画，写起代码来非常快。理解，是整个工作过程中的基础。对于我而言，一旦花心思弄懂了这其中的原理，换一个软件，或者换成代码去实现，做起来都一样简单。所以，在教大家写代码之前，我要先花很多的心思带大家弄懂这其中的原理。
在我眼中，它就是非常简单的2个动画的叠加。1是一个波浪水平移动一下。2是移动的波浪向上移动一下。就是这么简单的两个平移动画。
假设我们要制作的这个动画的水波球直径是200px。
步骤1：在Adobe Xd中新建一个200 × 250大小的矩形。
▲ 这个步骤我们上集已经教会大家了，不懂的同学可以去查看上集的教程。
步骤3：填充颜色，导出图片文件。
▲ 填充绿色后，导出这样一个png图片就是我们写代码需要的了。实际上，你导出一个svg格式的可能会更好（矢量的方便程序员改成做其他尺寸的波浪）。
这个图片就是我写代码需要用到的东西了。为了让你弄清楚这个动画的原理，我现在拿这个图片做一些讲解。
为了让你看清楚，并且理解，我先把这个图片放到界面上，并且命名为01，中间两条蓝色的线条就是我们这个动画要显示的区域。
我们复制一个，并且水平移动到它的右侧。为了区分他们，我命名为02。
我们先把01从右侧移动到左侧（不停的循环重复这样的动画）
同样的时间，把02从右侧移动到左侧（同样是不停的循环重复这样的动画）
如果你只观察蓝色线条以内的区域，就是水波纹在不停的移动了。我现在把蓝色线条以外的区域都遮挡起来。
把刚才的图片用PS或者Xd水平镜像一下，然后把颜色弄深一点儿。也就是会另外得到这样一个图片
用同样的办法，在浅绿色动画后面，再做一个从右到左的水平移动动画，你就得到了这个：
这个时候，如果有个圆圈把周围都遮挡住，也就是我们平时所说的遮罩，这个水波动画就基本上成型了。
为了方便你理解这其中的原理，我把所有的遮罩都关闭掉。让你看到实际上我们动画的全貌：
这个循环动画虽然看起来很闪烁，但是如果只看红圈内部，其实是一个完美的水波。你可以自己用左右手遮挡掉两侧，只露出红色圆圈部分，你就更明白了。
通过我详细的分解，现在你已经理解这个动画的原理了。利用这些原理来写代码就非常的简单了。水平的移动，CSS就直接可以搞定，这一切将会非常的轻松。那么我们开始吧~
就是非常简单的 4 个 DIV，最外层 waveOuter 是一个圆圈。
waveInner 类似是一个组，到时候让里面的两个波浪一起上升。
现在你看不到任何东西，是因为waveInner的高度是0px，你只要改动他的高度，就能看到水波上升的动画了。
因为左右平移的动画一直都在（也就是wave1和wave2）。waveInner这个div加上了transition属性，改变高度的时候会自动的有动画。就这样，3个非常简单的CSS动画，就基本上把只要一个水波球做好了。
当高度为200px的时候，水波球基本上是100%填充满，也就是说：
高度 / 2 就是我们要的百分比
document.querySelector(".waveInner").style.height = （百分比 * 2）+ 'px';
上面这一句js 基本上就是整个动画的核心了，是不是很简单呢？
最终效果：
https://pslkzs.com/demo/wave/demo1.php
其实所有的代码就只有这一点儿：
接下来，我们再来实现一下用AE制作出来的这个水波纹。也就是这个：
步骤1：首先打开我们上篇教程里面用AE制作好的水波文件
设计和交付其实并不同，这也是我们设计师和程序员之间最需要沟通的地方。很多时候，设计需要做出一些修改和调整，然后再“切图”给程序员。这样才能完美的实现我们需要的效果。
很遗憾的是：在这个过程里面，设计师不懂代码，程序员不懂设计。双方的沟通又不够，最终实现的效果就大打折扣了。
步骤2：把百分比文字图层隐藏掉。把原来的圆形遮罩改成方形。
步骤3：把这个动画添加到渲染队列。然后导出png图片序列帧。
我们并不是所有的图片都需要，找到水波上升的最高处，并且找出一个循环（第一帧和最后一帧图片完全一样）我们只要这一部分的图片。
这款插件的下载地址是：
https://pslkzs.com/animate/index.php
《Ps动效代码助手》只有4个按钮，你根据顺序依次点击一下，就自动生成好了动效和代码。
打开index.html这个文件，就可以看到动效和代码了：
有了这个基础代码，我们的工作就变得超级简单了。和上面那个教程基本差不多，加一个基础的上升css动效就搞定了。
和上面的那个例子结构基本一模一样，只是不再需要wave1和wave2了，因为《Ps动效代码助手》生成好了一个叫做huiSeZhiZhao20211101075936的样式，我们只要直接复制过来，直接用。就有了波浪的动画了。
其中，huiSeZhiZhao那一长串样式都是插件生成的。
因为我们这次制作的水波球直径更小一点，是160px所以，当.waveInner的高度为160px的时候，就是100%。那么：
document.querySelector(".waveInner").style.height = （百分比 * 1.6）+ 'px';
就这么简单，我们就这么轻轻松松就实现了ae制作出的这个水波球，我们来看一下最终效果：
https://pslkzs.com/demo/wave/demo2.php
