阅读 3598

《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 动画,但用到的元素其实并不复杂,只有最简单的 translaterotate 而已。动画有很多小细节,比如可以用圆盘控制动画的播放进程,可以一键改变 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动画周报》第一期:好戏开场

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