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

3,572 阅读4分钟

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

本期亮点:Unicar 为我们带来了他最新的 WebGL 动画,一个可以交互的鲤鱼荷塘。ChenXin 为我们展示了如何将一副静态的月色图变为一张有层次感的、可通过重力感应交互的 3D 图片。

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

CSS 动画

1. 《CSS 3D 变换》 作者:Neil McCallion

如此酷炫的幻影动画小编还是第一次见😂 其实原理很简单,就是画很多个 div 元素,然后把这些 div 元素进行用 css transform 进行 z 方向的位移,这样离我们远的 div 看起来就会小,离我们进的看起来就会大,最后将这些 div 旋转起来就可以了。另外很重要的一点是,这个动画的 div 的背景图片设置的是一张 gif 动图,如果是静态图片的话就没有这么酷炫了。

2.《马蹄儿蹬蹬蹬》 作者:Steve Gardner

妈妈问我为什么跪着看动画系列。这是一个纯 CSS 动画,整匹马由无数个几何形状拼接而成,每个几个形状都有自己的 css animation, 我们一起来看下这个动画的解构:

3. 《月色》 作者:陈鑫

作者将一张静态图片改成了一张带有 3D 特效的图片,还添加了重力感应。如何将静态平面图改成带有层次感的 3D 图片?先将静态图分解,按距离远近分类,将距离相同的物体放在同一个图层上。比如这个动画就有四个图层:前面的云和比较大的星星为第一层,也是视觉上里我们最近的一层,月亮为第二层,后排的云和小星星为第三层,深蓝色的背景为第四层,第四层是离我们最远的一层。将每一层设置为一个 div 元素的背景,然后利用 css translateZ 进行位移,把第一层移到离我们最近,第四层离我们最远,这样层次感就出来了。然后如何添加重力感应呢?Web 里有一个叫做 deviceorientation 的事件,监听这个事件我们就能拿到设备的实时旋转角度,然后根据拿到的角度设置 css rotate 就可以了。不过需要注意的是,通常情况下浏览器向设备请求旋转角度都会被拒绝,所以一般要在浏览器里自己修改一下设置。

SVG 动画

2. 《几何心碎》 作者:Ryan Zola

爱心由一个个的三角形拼接而成,碎裂的动画其实就是让这些三角形进行随机的位移。看起来很复杂,但因为路径都是随机的,所以代码并不会很复杂。另外有一个小细节就是,在爱心破碎之后为碎片加上一个高斯模糊的滤镜,这样让人感觉碎片真的像飞到了眼前一样。

3. 《深海》 作者:袁川

这个动画可不是简单的 png 图片的位移哦,如果你仔细看每一条鳐鱼,你就会发现它们是有波浪感的。这种破浪感是通过 SVG 滤镜来实现的,作者混合了 feTurbulencefeDisplacementMap 两种滤镜。对了,背景也不是一张图片,而是用 CSS 随机生成的。

WebGL / Canvas 动画

1.《焰火》 作者:Teejay Parker

这个焰火动画算是众多焰火动画中比较优秀的了,动画有很多细节,比如焰火不是竖直着飞上天空的,而是打着旋儿飞上去的,这个飞上去的旋转路径用到了 SVG 的 Path。另外焰火的种类也很多,虽然 GIF 中没有呈现出来,但是你如果点进链接,观察一段时间就会发现有很多种焰火。不过小编觉得焰火的颜色还可以再斟酌一下,目前的颜色搭配并不是很和谐。

2. 《鲤鱼荷塘》 作者:unicar

一个可交互的 WebGL 动画,点击鲤鱼它就会掉头躲开你。这个动画最优秀的地方就在于这个掉头躲开的动作,并不是简单的旋转,如果你仔细观察就会发现,这个掉头的动作是有身位摆动的,非常逼真写实,也是这个动画最难的地方。另外动画还用了一些小技巧,比如随机生成鱼群,利用阴影增强 3D 感等等。

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

往期周报

《Web动画周报》第五期:小心驾驶

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

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

更多往期周报...