阅读 508

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

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

本期亮点:Jon Kantner 为我们带来了他最新的 Three.js 小游戏《高速公路竞赛》,控制自己的汽车,一起在高速公路上飞驰吧!注意不要撞车哦。

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

CSS 动画

1. 《旋转的圆圈》 作者:Miracle Onyenma

这是一个纯 CSS 动画,而且作者没有使用任何的 CSS 3D 属性,靠着 2D transform 完成了一个带有三维错觉的动画。影子的巧妙使用很大程度上增强了 3D 的感觉。

2. 《相位》 作者:Adam Dipinto

一个很适合用来当作加载动画的 CSS 3D 动画。圆圈其实就是 border 画的,在动的属性是 z 方向的位移,通过给每个圆圈设置不同的 animation-delay 实现类似弹簧的动画效果。

3. 《切换预览动画》 作者:Mariusz Dabrowski

一个非常精致的切换动画,动画干净整洁,没有拖泥带水, 还适配了移动端。控制逻辑是用 JS 写的,使用了一个叫做 GSAP 的动画库。GSAP 应该是目前在实际业务中用得最多的动画库了,很多写动画的大佬都推荐过,有兴趣的有同学可以去了解一下。这个动画库最大的特点是 API 设计非常人性化,好学易懂,但功能又非常强大。GSAP 这个库有目前有三个人在全职维护,所以不用担心会突然停止更新或者死掉,但是正因为是全职维护的原因,有些功能是需要收费的,不过免费版本足够满足一般的日常需求。

4. 《流星》 作者:Yusuke Nakaya

这是一个纯 CSS 动画,为元素的巧妙使用让每一颗流星都只使用了一个 <div> 元素。作者还使用了 filter: drop-shadow() 这个 CSS 滤镜让流星看起来有在发光的感觉。filter: drop-shadow() 的作用跟 box-shadow 很相似:都是为元素添加阴影。但是 filter: drop-shadow() 作为 CSS 滤镜效果的一种,相比于 box-shadow 的好处就是在这个滤镜下的所有元素都会被添加上阴影,这样我们就不需要像 box-shadow 那样一个一个的去加了。

5. 《CSS太棒啦》 作者:Gayane

这个动画的精髓在于 background-clip: text 这个属性的使用。在设置这个属性之前,动画长这个样子:
所以这个属性的作用就是让背景从字里面透出来,然后把除了字之外的背景遮盖住。在没有这个属性之前我们利用 clip-path 也可以制作出同样的效果,不过会复杂很多。而这个属性就是为这类动画而生的,所以使用起来很简便。

6. 《僵尸射击游戏》 作者:Takane Ichinose

一个基于 React 的 CSS 射击小游戏。

SVG 动画

1. 《流体下载动画》 作者:Aaron Iker

小编本来还以为这个动画里的波浪使用了比较复杂的 morphSVG 技术,一看代码才发现原来只用了 x 和 y 方向的位移。波浪图片真正的宽度比圆形区域要宽,但是我们只把圆形以内的区域设置为可见区域,这样我们在水平方向拉动波浪图片时就会有波浪在翻滚的错觉。

2. 《多伦多天际线》 作者:Jaymie Rosen

一个逻辑比较复杂的 SVG 动画, 用到了 GSAP 动画库,还用到了 SVG 路径动画。

WebGL / Canvas 动画

1. 《三维投影》 作者:Arturo Morán

这是一个在 canvas 2d 环境中制作的 3D 视觉动画。作者利用投影矩阵在 2D 平面上绘制出了 3D 物体。其实所有的 3D 库 (比如Three.js) 都使用到了投影矩阵来构筑三维世界,只不过都被封装过了所以使用者感受不到。在这个动画中,作者在 canvas 中实现了一个自己的投影矩阵。

2. 《火焰》 作者:Alain

这是一个使用了 m3.js 的 WebGL 动画。本来只是一张静态图片,作者利用 fragment shader 将像素点进行位移,从而完成的火焰效果。

3. 《高速公路竞赛》 作者:Jon Kantner

这是一个使用了 Three.js 的 WebGL 动画。代码很整洁,如果你已经有一点 Three.js 基础,想学习如何用 Three.js 写游戏的话,仿写这个动画是一个不错的入门选择。

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

往期周报

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

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

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

更多往期周报...

关注下面的标签,发现更多相似文章
评论