不用 JavaScript 的动画计数器

这里相当一部分计数器样式是会动的。数字会自己往上跳动,面板会自己描绘出来,或者有什么东西会落定到位。

它们都不用一行JavaScript。

原理是什么

这些计数器是SVG格式,而SVG可以自带样式表。动画效果是写在图片内部的CSS关键帧动画,因此整个东西以一个文件、一次请求的方式到达,并自行开始运动。浏览器处理它的方式和处理其他任何CSS动画一样:在合成器上运行,不必唤醒脚本。

实际结果是,动态计数器和静态计数器的开销相同。它们的体积大约在1.8到3.2 KB之间。没有库,没有第二次请求,加载时也不会阻塞页面的其他部分。

动画的种类

它们是按动的方式分组的,而不是按外观分组,因为动的方式才是实际挑选时的依据:

• 逐笔生成——计数器一笔一画地把自己描绘出来。
• 带有重量感——有东西落下、弹跳、然后静止。是带有惯性的运动。
• 未来风,带动感——发光、扫描线、飘动的雾气。三者中最炫目的一种。

另外还有一个安静的未来风系列,适合想要那种外观但不想要动画的情况。截至撰写本文时,在售的样式中有58种带动画效果,这个数字比当初任何人打算做的都要多得多。

如果访客要求减少动态效果

操作系统里有一个减少动画的设置选项。人们开启它的原因包括对运动敏感、前庭功能障碍、偏头痛,有时候只是单纯因为页面上晃动的东西让人疲惫。浏览器会把这个偏好传递给每一个页面。

这些计数器会遵守这一设置。如果访客要求系统减少动态效果,动画就不会运行,他们看到的会是一个数字相同的静态计数器。这一点在撰写本文时是逐个样式检查过的,而不是想当然地认为如此。

尊重这一设置只需要样式表里的一行代码,而这一行代码正是"装饰"和"打扰"之间的区别。

不建议使用它们的理由

动态效果会吸引视线。这正是它存在的全部意义,也正是应当克制使用它的理由。

如果计数器不是页面的主题——大多数页面确实不是——那么角落里一个会动的东西,就是在和页面真正的内容争夺同一样东西:访客的注意力,而那本来才是这个页面想要争取的。静态计数器能显示同样的数字,却不会索取任何东西。

在计数器本身就是页面个性一部分的场合使用动态样式:个人网站、项目主页,或者带点表演成分的页面。而在访客是来阅读的页面上,静止不动的样式更合适。