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 动画周报,一周一刊,每周五发布,我们下周见!