《Web动画周报》第七期：水趣

Web 动画周报，一周一刊，每周一发布。让咱们来一块儿聊聊 Web 动画，和它们背后的故事。

本期亮点：Lorenzo 把本身的电脑窗口变成了一个水缸，水缸中的水能根据窗口的移动而震荡，视觉效果满分。

周报将 Web 动画大体分为三类：CSS 动画、SVG 动画 和 WebGL/Canvas 动画。全部的动画将按类别展现，方便读者有针对性的学习。

CSS 动画

1. 《睡觉的蝙蝠》做者：Thiyagaraj

这是一个纯 CSS 动画，没有使用一张图片。动画的亮点除了画风治愈之外，还向你们展现了如何使用 CSS 绘制常见的几何图案，好比椭圆形、三角形、爱心形状等等。下面这个动画就向你们演示了如何用 CSS 画三角形。

2. 《日出》 做者：David J. Aldred

这种波浪的感受是怎么作的？看下面这个动图你就明白了：

另外，背景颜色的渐变是经过 CSS 滤镜完成的，滤镜名字叫作 filter: hue-rotate() 能够用来改变图片或者背景的颜色，这个属性是能够 animate 的。

3. 《逐渐生成的数字》 做者：Adam Kuhn

这个动画使用了 grid 布局，每一个数字都是由一个个的小方块拼凑起来的。做者为每种数字写一个单独的类来控制，因为数字一共只有 0-9 十种形状，因此也不会太繁琐。方格的出现和消失都是经过改变 clip-path 来实现的，也就是说，这里的每个小方块都有本身的 clip-path。

4. 《舞动》 做者：Sebastian Lenton

乍一看还觉得是一个用 Three.js 写的 WebGL 动画（由于从材质上看起来就很像😂），但看了代码发现居然是一个纯 CSS 动画。那些看上去很是 3D 小球实际上是用 CSS 渐变画出来的，不过是做者将渐变用的炉火纯青才达到了这样以假乱真的效果。地面的倒影更是加强了这种 3D 的感受。

SVG 动画

1. 《颜色浸染特效》 做者：Mariusz Dabrowski

“Hover Me” 有两层，第一层是黑底白边的空心字样式，第二层是 SVG， 是红底白字。在动画的一开始，用 mask 将 SVG 那一层遮盖出，这样咱们只能看到黑底白边的那一层。 当鼠标悬浮在字上时，使用 JS 获取到鼠标的位置，而后再动态的修改 mask 的位置，再给 mask 设置一个慢慢变大的动画，第二层就这样被慢慢显示出来了。

WebGL / Canvas 动画

1. 《风》 做者：Johan Tirholm

算是一个比较经典的 canvas 动画了，飘带是用 sin() 函数画出来的，其本质就是三角函数的可视化...这个动画代码量不多，JS 部分的代码不到 40 行，很是适合刚学 canvas 的同窗仿写。

2. 《用圆圈写字》 做者：Artem

动画分为两层(两个canvas)，在第一层 canvas 上直接用 fillText() 把想要写的字写出来，这时候这个 canvas 上是白底黑字，可是这层 canvas 并不显示出来。咱们再写一个循环逐个像素点的 “扫描” 这个 canavs, 若是这个像素点是黑色，那么咱们就在另外一个 canvas 的相同位置画一个圆，因此被写了字的地方才会被画上圆。“扫描”的这个过程其实是经过 getImageData() 获取 canvas 某一片区域内的像素点的信息。

3. 《水趣》 做者：Lorenzo Cadamuro

代码被压缩过了，看不出来用到了哪些技术。物理引擎确定是用了，不过不知道使用的现成的仍是做者本身写的。动画比较有创意的一点是经过移动窗口来摆动水，这样窗口看起来就像一个水缸同样，视觉上仍是很是震撼的。小编查了下， Web 上好像没有能够直接获取窗口移动速度的 API，可是咱们能够获取到窗口的位置。高中物理告诉咱们，知道了时间和位移咱们就能计算出物体的速度和加速度，小编猜想做者多是这样实现的。

这一期的 Web 动画周报就到这里啦。若是你对周报有什么意见或者建议，欢迎在下方留言。你也能够向周报投稿，投稿的方式是把本身的动画的 Codepen 连接发送到周报下面的评论里便可。Web 动画周报，一周一刊，每周一发布，咱们下周见！

往期周报

《Web动画周报》第六期：荷塘月色

《Web动画周报》第五期：当心驾驶

《Web动画周报》第四期：密室逃脱

更多往期周报...