《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 动画周报，一周一刊，每周一发布，咱们下周见！

往期周报

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

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

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