《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动画周报》第一期：好戏开场