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

1,949 阅读4分钟

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 轴旋转的正方向。 yz 轴同理。

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