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

时间 2019-11-05

标签 Web动画周报第六荷塘月色栏目 HTML 繁體版

原文原文链接

Web 动画周报，一周一刊，每周一发布。让咱们来一块儿聊聊 Web 动画，和它们背后的故事。css

本期亮点：Unicar 为咱们带来了他最新的 WebGL 动画，一个能够交互的鲤鱼荷塘。ChenXin 为咱们展现了如何将一副静态的月色图变为一张有层次感的、可经过重力感应交互的 3D 图片。浏览器

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

CSS 动画

1. 《CSS 3D 变换》做者：Neil McCallion

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

2.《马蹄儿蹬蹬蹬》做者：Steve Gardner

妈妈问我为何跪着看动画系列。这是一个纯 CSS 动画，整匹马由无数个几何形状拼接而成，每一个几个形状都有本身的 css animation, 咱们一块儿来看下这个动画的解构：

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

SVG 动画

2. 《几何心碎》做者：Ryan Zola

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

3. 《深海》做者：袁川

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

WebGL / Canvas 动画

1.《焰火》做者：Teejay Parker

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