《Web动画周报》第三期：死亡之舞

Web 动画周报，一周一刊，每周五发布。让我们来一起聊聊 Web 动画，和它们背后的故事。

本期亮点：Paul 为我们带来了他最新的 WebGL 动画《死亡之舞》，一只荧光蜘蛛在霓虹色的蛛网上随着节奏摆弄着自己的身姿。死亡，往往伴随着最鲜艳的颜色。

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

CSS 动画

1. 《3D 折叠收据》 作者：Kriszta

一个制作很精美的 CSS 3D 折叠动画。被折叠的部分其实是两个伪元素，这样可以减少 <div> 元素的过度使用。折叠的视觉效果是通过将两个伪元素绕 x 轴方向进行旋转实现的：rotate3d(1, 0, 0, xdeg)。绕 x 轴旋转到底是朝哪个方向旋转？CSS rotate3d 遵循左手法则：伸出左手，让大拇指与其余四指垂直，将大拇指朝向 x 轴正方向（即水平向右），其余四指弯曲的方向就是绕 x 轴旋转的正方向。 y， z 轴同理。

2. 《懒惰的滑动条》作者：Anurag

动画使用了一个叫做 Verly.js 的库。Verly.js 是一个基于 JavaScript 的物理引擎(库)，还比较新，最近才出生，这个动画的作者就是 Verly.js 的作者本人。由于小编还没有详细的了解这个库，所以也不多做评价。不过引擎的使用方式非常简单，像上面这个动画，直接将 <input class="slider"...> 元素传入一个函数就可以了，只需要一行代码。

3. 《Apple Mac Pro》 作者：Filip Vitas

这是一副用 CSS 画的 Apple Mac Pro，还原程度相当之高。不过比较可惜的是苹果的 logo 并不是用 CSS 画的，而是一张 png 图片。

SVG 动画

1. 《波》 作者：Alaric Baraou

乍一看还以为只是普通的 SVG 路径动画，仔细一想，咦，不对呀， SVG 路径动画只能画光滑的线，这种类似于毛笔效果的路径用路径动画是画不出来的啊。查看源码发现，确实是用到了 SVG 路径动画，不过路径动画不是用在我们所看到的这些毛笔笔画上的，而是用在 <mask> 上的。简单来说，“波”字的每一个笔画都被一个和这个笔画形状差不多的很粗的光滑曲线“遮住”了，这些光滑的曲线被放在 <mask> 中，当我们利用路径动画缓缓的画出这些 <mask> 的时候，这些笔画也就被画了出来。

2. 《分栏》 作者：Andreas Storm

一个典型的 SVG Gooey 特效。所谓 Gooey 特效其实就是我们经常所说的流体特效的一种，但是 Gooey 特效不仅可以用来模拟流体，还可以用来模拟火焰(比如我们上一期中猫神的眼部火焰其实就是用的 Gooey 特效)。Gooey 特效有很多版本，一般我们用 SVG 滤镜来实现，通常最少也需要使用到两个滤镜：<fegaussianblur> 和 <fecolormatrix>，其余的滤镜可以根据要实现的效果再酌情添加。

3. 《波浪 LOGO 动画》 作者：Peter Barr

一个很细腻的而且很有创意的 SVG logo 动画。从这个动画中能看到 Gooey 特效的影子，而且动画也确实用到了 Gooey 特效所使用的 <fegaussianblur> 和 <fecolormatrix> 滤镜。不同的是，作者还添加了<feTurbulence> 和 <feDisplacementMap> 这两个滤镜， 前者用来曲线化 logo 的轮廓，后者为动画添加一些位移以营造波浪的感觉。

WebGL / Canvas 动画

1. 《紫色激光》 作者：Dave Kwiatkowski

这个动画就是很典型的“用很简单的代码写出了很好看的特效”的案例。 如果你是一个 canvas 的初学者，强烈建议你像我一样照着源码仿写一遍这个动画，因为源码很短，JS 部分只有50行，很容易看懂。而且源码写得很整洁，可以看看别人是怎么整理 canvas 代码的。

2. 《死亡之舞》作者: Paul

建议大家点进链接欣赏这个动画，因为这个动画有背景音乐。一只荧光蜘蛛随着音乐的节奏在跳舞，音乐的名称叫 《Totentanz》，翻译成中文即为《死亡之舞》。这是一个使用了 Three.js 的 WebGL 动画。荧光的效果使用了 Three.js 的 UnrealBloomPass 后处理。蜘蛛的舞蹈并没有 hook 上任何的 音频 API，因为音乐本身没有变奏，所以只需要让蜘蛛在特定的频率下跳动就可以了。

这一期的 Web 动画周报就到这里啦。如果你对周报有什么意见或者建议，欢迎在下方留言。你也可以向周报投稿，投稿的方式是把自己的动画的 Codepen 链接发送到周报下面的评论里即可。Web 动画周报，一周一刊，每周五发布，我们下周见！

往期周报

《Web动画周报》第二期：欺诈大师与宝石工匠

《Web动画周报》第一期：好戏开场