《Web动画周报》第二期：欺诈大师与宝石工匠

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

本期亮点：Jon Kantner 利用视觉欺骗向咱们展现了如何在 CSS 中写出球形按钮。Yoichi Kobayashi 用 GLSL 创造出了如梦似幻的水晶模型。

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

CSS 动画

1.《爱，死亡和机器人》 做者：Jhey

还记得以前的网飞热剧《爱，死亡和机器人》吗，做者用 CSS 还原了这部剧的退场动画。伪元素的巧妙使用，让动画中爱心图案的绘制只用了一个 <div> 元素 。

2.《滑动的鞋盒》 做者： keyframers

一个很是精美的 CSS 3D 动画。这个动画的精巧之处在于鞋盒的每个面都只用了一个 <div> 元素 ，有同窗可能会想，一个 <div> 是如何作到鞋盒的里侧和外侧两种不一样的背景颜色的呢，答案是：伪元素。将伪元素绝对定位到与自身的 <div> 元素相重合，再赋予伪元素不一样的背景色便可。另外，鞋盒四周的每一个面上都使用了 linear-gradient 来辅助加强 3D 效果，鞋盒底面使用了 radial-gradient 来加强图片的 3D 效果。

3. 《复选框动画》 做者：Himalaya Singh

鼠标放在复选框上时，红色圆圈会变粗，这是经过 box-shadow 实现的。复选框被按下时会被 scale(0.9)，用来模拟被按下时的震动。勾选标志则是借助伪元素实现的。虽然只是一个小小的复选框，可是动画作到如此细腻也绝非易事。

4. 《歪斜的框架》 做者：JeremyJamesL

乍一看可能看不出来是怎么实现的，可是一看代码就清晰了。用一个绝对定位的伪元素将其与自身的 <div> 元素对齐，再对伪元素进行 skew(2deg, 3deg); 在 hover 时再改成 skew(-2deg, -3deg);。

5. 《玩具开关》 做者：Jon Kantner

看到动画的第一反应：word天？怎么还有人能用 CSS 写出球形？小编冷静的大脑告诉本身，不可能的，这确定是视觉欺骗。原来，做者利用 border-radius 画了两个半圆，当按钮向右边移动时，左边的半圆 scaleX(0) 右边的半圆 scaleX(1)，按钮向左滑动时则反之。把多余的效果去掉，再给左右两个半圆附上不一样的颜色，核心动画实际上是这个样子：

SVG 动画

1. 《城市建造工地》 做者： Sarah Drasner

十分壮观的 SVG 动画，但用到的元素其实并不复杂，只有最简单的 translate 和 rotate 而已。动画有不少小细节，好比能够用圆盘控制动画的播放进程，能够一键改变 SVG 的颜色制造白天和夜晚的效果等。另外，介绍一下动画的做者: Sarah Drasner，曾就任于微软，Vue 团队核心成员，同时也是一位 Web 动画大师，尤为擅长 svg 动画，因为她最近想体验一下在小公司上班是什么感受，因而跳槽到了 Netlify 。

2. 《拖 & 放》做者：Aaron Iker

一个制做十分精美的拖放上传 UI 动画。将图片拖入时， upload 按钮会变成一个小球，并且小球能感知图片的方位。松开鼠标时，图片化做小泡沫被小球吸入，而后接上一个流畅的上传动画。上传动画实际上是一个 SVG 路径动画，小球感知图片方位的动画则是经过 JS 修改 SVG Path 完成的。

3. 《京剧脸谱：猫神》 动画：陈鑫 / 设计：王空空

这个动画其实从一张静态图片改编而来的。动画用到了不少 SVG 滤镜。猫神眼圈周围的火焰效果是经过叠加 <feGaussianBlur> 与 <feColorMatrix> 滤镜完成的。鼻孔的喷气特效混合了 <feTurbulence> 与 <feDisplacementMap> 滤镜。眨眼则是借助 morph SVG 完成的。动画每秒有超过 280 个 DOM 在移动，可是经过优化依旧能达到 60 FPS。最后安利一下猫神的设计者，王空空同窗，像这样好看的京剧脸谱图他画了 一百张。

WebGL / Canvas 动画

1. 《三维 Github 贡献图》做者：dev

这是一个使用了 Three.js 的 WebGL 可视化做品。输入本身的 github 用户名，就能将你的贡献图以 3D 的形式呈现出来。提交的次数越多，颜色越深，方块越大。不过比较惋惜的是，绿色方块是随机排列的，因此 x, y, z 轴并不具备任何意义。

2. 《AI 助理》做者：Aaron Iker

一个十分可爱的小凝胶块。使用了 Three.js，并无用到自定义的 shader。凝胶块使用的材料就是普通的 MeshPhongMaterial， 加了两道 DirectionalLight 和一个 AmbientLight。凝胶的蠕动效果则是借助 simplex-noise 这个库完成的。虽然都不复杂，但最终呈现出来的效果却很是好。

3. 《水晶》做者：Yoichi Kobayashi

这是小编目前看到过的最真实的水晶模型。从扒下来的源文件中找到了一个带有水晶纹理的黑白图片，因此小编猜想这个效果应该是混合了一个带有水晶纹理的贴图和一个用来调色的 fragment shader 完成的。因为小编功力尚浅，再加上源码已经压缩过了，因此具体是怎么实现的目前还无从知晓，欢迎各位福尔摩斯去破案。

圈内大事

谷歌开源新图片格式

就在上周，谷歌开源了一种新的图片格式：.basis。由于这种图片格式直接在 GPU 中解码，因此解码速度很是快，图片自己的大小也比普通的图片格式小不少。一张 15M 的 .png 图片转换为 .basis 图片后仅有 0.6M。这种新的图片格式很是适用于 web 3D 技术，使用新的 .basis 图片格式的 web app 和游戏可以拥有 6-8 倍于以往的贴图。目前，最新版本的 Three.js r106 已经支持了.basis 图片格式。阅读更多

这一期的 Web 动画周报就到这里啦。若是你对周报有什么意见或者建议，欢迎在下方留言。你也能够向周报投稿，投稿的方式是把本身的动画的 Codepen 连接发送到周报下面的评论里便可。Web 动画周报，一周一刊，每周五发布，咱们下周见！

往期周报： 《Web动画周报》第一期：好戏开场