阅读 662

《Web动画周报》第七期:水趣

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

本期亮点:Lorenzo 把自己的电脑窗口变成了一个水缸,水缸中的水能根据窗口的移动而震荡,视觉效果满分。

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

CSS 动画

1. 《睡觉的蝙蝠》作者:Thiyagaraj

这是一个纯 CSS 动画,没有使用一张图片。动画的亮点除了画风治愈以外,还向大家展示了如何使用 CSS 绘制常见的几何图案,比如椭圆形、三角形、爱心形状等等。下面这个动画就向大家演示了如何用 CSS 画三角形。

2. 《日出》 作者:David J. Aldred

这种波浪的感觉是怎么做的?看下面这个动图你就明白了:
另外,背景颜色的渐变是通过 CSS 滤镜完成的,滤镜名字叫做 filter: hue-rotate() 可以用来改变图片或者背景的颜色,这个属性是可以 animate 的。

3. 《逐渐生成的数字》 作者:Adam Kuhn

这个动画使用了 grid 布局,每个数字都是由一个个的小方块拼凑起来的。作者为每种数字写一个单独的类来控制,由于数字一共只有 0-9 十种形状,所以也不会太繁琐。方格的出现和消失都是通过改变 clip-path 来实现的,也就是说,这里的每一个小方块都有自己的 clip-path

4. 《舞动》 作者:Sebastian Lenton

乍一看还以为是一个用 Three.js 写的 WebGL 动画(因为从材质上看起来就很像😂),但看了代码发现竟然是一个纯 CSS 动画。那些看上去非常 3D 小球其实是用 CSS 渐变画出来的,不过是作者将渐变用的炉火纯青才达到了这样以假乱真的效果。地面的倒影更是增强了这种 3D 的感觉。

SVG 动画

1. 《颜色浸染特效》 作者:Mariusz Dabrowski

“Hover Me” 有两层,第一层是黑底白边的空心字样式,第二层是 SVG, 是红底白字。在动画的一开始,用 mask 将 SVG 那一层遮盖出,这样我们只能看到黑底白边的那一层。 当鼠标悬浮在字上时,使用 JS 获取到鼠标的位置,然后再动态的修改 mask 的位置,再给 mask 设置一个慢慢变大的动画,第二层就这样被慢慢显示出来了。

WebGL / Canvas 动画

1. 《风》 作者:Johan Tirholm

算是一个比较经典的 canvas 动画了,飘带是用 sin() 函数画出来的,其本质就是三角函数的可视化...这个动画代码量很少,JS 部分的代码不到 40 行,非常适合刚学 canvas 的同学仿写。

2. 《用圆圈写字》 作者:Artem

动画分为两层(两个canvas),在第一层 canvas 上直接用 fillText() 把想要写的字写出来,这时候这个 canvas 上是白底黑字,但是这层 canvas 并不显示出来。我们再写一个循环逐个像素点的 “扫描” 这个 canavs, 如果这个像素点是黑色,那么我们就在另一个 canvas 的相同位置画一个圆,所以被写了字的地方才会被画上圆。“扫描”的这个过程实际上是通过 getImageData() 获取 canvas 某一片区域内的像素点的信息。

3. 《水趣》 作者:Lorenzo Cadamuro

代码被压缩过了,看不出来用到了哪些技术。物理引擎肯定是用了,不过不知道使用的现成的还是作者自己写的。动画比较有创意的一点是通过移动窗口来摆动水,这样窗口看起来就像一个水缸一样,视觉上还是非常震撼的。小编查了下, Web 上好像没有可以直接获取窗口移动速度的 API,但是我们可以获取到窗口的位置。高中物理告诉我们,知道了时间和位移我们就能计算出物体的速度和加速度,小编猜测作者可能是这样实现的。

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

往期周报

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

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

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

更多往期周报...