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

望周知：《Web动画周报》从下周开始修改为每周一发布，目前每周五发布对于小编来说太过匆忙，修改为周一发布后就可以利用周末的时间写周报，这样周报的质量也会更高一些。下次的发布时间为本月的二十八号。

本期亮点：Kristopher 为大家带来了一个用 CSS 和 JS 制作的密室逃脱小游戏。游戏内容非常硬核，你是否有能力解开所有谜团，逃出升天呢。

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

CSS 动画

1. 《Twitch App 加载动画》 作者：Daniel Hearn

这是作者为 Twitch 制作的加载动画。平时打游戏的同学可能知道 Twitch 是海外最大的游戏直播平台。加载图案的设计以紫色色调为主，符合 Twitch 的主题颜色。动画创意很好：用四个小方块将中间的紫色方块推转一周，如此循环。由于动画本身并不复杂，所以作者是使用 CSS animation 实现的，并没有用到 JS。

2. 《递色溶解渐变》 作者：David J. Aldred

这个动画有两个值得注意的地方。一是图中的各类形状，包括水滴，花瓶和鹅卵石，这些形状都是通过 border-radius 实现的，border-radius最多可以接受八个参数，有兴趣的同学可以看一下这个网站。第二，动画中带有一点磨砂质感的渐变色是通过 CSS mask 配合 radial-gradient 实现的，在第一期中我们其实看到过相似的效果，不过那个是通过 background-blend-mode 实现的。

3. 《360度图片预览器》 作者：jakob-e

厉害的动画师有一万种方法能够欺骗你的眼睛。上图的这个动画并没有使用到任何的 3D 模型，而是用到了很多很多张不同角度的椅子的图片。随着鼠标的移动，切换到不同的图片，仅此而已。相较于直接使用 3D 模型，这种方式的优点是兼容比较好，但缺点也很明显，需要预加载大量的图片，而且视角有限，并不能实现无死角的模型预览。

4. 《密室逃脱》 作者：Kristopher Van Sant

好久没有看到这么复杂的作品了。这是一个用 CSS 和 JS 制作的密室逃脱小游戏。通过寻找各类线索，打开房门右边的六道锁，你就可以通关游戏。无奈游戏太过于硬核，小编玩得是云里雾里，有兴趣的同学可以自己试一试。

SVG 动画

1 《快乐的云》 作者：shalanah

一个很治愈的 SVG 小动画。点击云朵它会眨眼睛，还会冒爱心。我们可以从这个动画里学到一种比较简单的制作眨眼动画的方法：先将眼珠的 opacity 变为 0, 然后将圆形的眼睛轮廓使用 scaleY 让其朝 Y 方向压扁一点即可。

2. 《电子设备》 作者：Chris Gannon

又是 Chris Gannon 的动画，一如既往的细腻。这个动画的意图是想展示网页内容在不同设备中的适配。不仅设备间的切换动画很流畅，还有一个小细节就是，不同设备中展示的内容是相同的，没有增多也没有减少，而且内容的变换是有逻辑的。这个动画的使用场景很多，相似的动画小编也看过不少，但是能做到如此细腻的却不多见。

WebGL / Canvas 动画

1. 《生长 II》 作者：Sean Free

一个 canvas 2d 动画，涉及到了三个比较常用的 canvas 动画知识点，一是鼠标跟随，二是随机移动，三是残影技术。由于动画的配色很好，所以最后出来的效果还是非常惊艳的。

2. 《波浪转场特效》 作者：Alain

想真正的体验这个转场特效的魅力大家还是得亲自光临一下这个特效的原创网站，这个叫做 Taotajima 的网站是由一位叫做 Yuichiroh Arai 的日本人制作的。波浪式的转场特效配合文字的飘散效果让人感觉整个网站是浑然一体的。就这个波浪转场特效而言，其实并不复杂，只是用到了一些简单的 vertex shader，但是正是那些能利用简单代码写出梦幻效果的动画师才愈发让人佩服。上图中展示的算是这个特效的一个 Demo 版本，Demo 能看到源码，更适合学习。

圈内大事

1. 访问 Three.js 官网的中国 IP 数量首次超过美国，成为第一。

Three.js 的创始人 Ricardo 前几天发布推特称，上个月访问 three.js 官网的中国 IP 第一次超过了美国，中国成为了上个月访问 three.js 人数最多的国家，其次是美国、英国、印度、日本。当然，撇开本身的人口基数不谈，有人猜测这次中国的登顶可能与 three.js 官网中文文档的完善有关。

另外，借这个新闻的契机，小编想推荐一个学习 three.js 非常好的网站：Three.js Fundamentals。Three.js 是一个很活跃的库，所以更新很快，但网上的教程往往更新滞后，这个网站里面的教程是利用最新的 three.js 版本编写的，而且写的很详细，这本书的作者本身也是一位大佬，更难得的是这个网站是完全免费的。网站有中文，但是推荐有条件的同学还是阅读英文，主要是两个原因，一是学的时候难免会要查资料，three.js 这一块目前中文的资料还不多，还是得用英文查，二是为以后深入学习 three.js 做好准备，因为那些网站和资料也全部都是英文的，长痛不如短痛，越早的解决语言问题越好。

2. 推特网站 UI 更新翻船，大家纷纷抱怨新 UI 设计不合理。

就在昨天， 推特更新了 Web 版的 UI，但是新 UI 却引起了很多人的不满。我们先来看看新 UI 长什么样子吧。。。

新的 UI 大致分为三列，但问题是最左边的一列和最右边的一列平时大家几乎是不会看的，现在这两列反而被放大了。中间那一列本应该是重点内容，但是新 UI 留给中间那一列的空间并不多。整个页面看起来非常拥挤，滑动的时候很容易让人分心，集中不了注意力，不知道到底该看哪里。不过新 UI 也有小编喜欢的地方，比如可以自定义配色。

感觉这个事还闹得挺大的，小编也很好奇推特那边会不会重新设计 UI，我们也将持续关注这一事件。

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

往期周报