过渡与动画 - 逐帧动画&steps调速函数

写在前面

上一篇中我们熟悉五种内置的缓动曲线和(三次)贝塞尔曲线,并且基于此完成了缓动效果.

但是如果我们想要实现逐帧动画,基于贝塞尔曲线的调速函数就显得有些无能为力了,因为我们并不需要帧与帧之间的过渡状态,就像上篇中所看到的,所有基于贝塞尔曲线的调速函数都会在关键帧之间进行插值运算,从而产生平滑的过渡效果。

这个特性显然很棒,平滑的效果确实是我们使用css过渡和动画所追求的。

但是在逐帧动画的场景下,这种平滑的特性恰恰毁掉了我们想要实现的逐帧动画的效果.

逐帧动画

我们经常会看到一段卡通影片、一个复杂进度的提示框、一个小loading, 我们不会单纯的选择一张GIF动画胜任,因为它的局限性和短板表现的很明显.

  • GIF图片所能使用的颜色数量被限制在256色
  • GIF不具有Alpha透明的特性,
  • GIF动画一旦生成,参数就固定在文件内部,只能通过图像处理软件去重新生成. 在某些场景下,基于图片的逐帧动画成了不错的选择。

steps()调速函数

写在前面中提到,我们不能基于贝塞尔曲线的调速函数完成我们所需要的逐帧动画,那么采用什么调速函数呢?

对,答案就是steps()调速函数,与贝塞尔曲线迥然不同的是,steps()会根据你指定的步进数量,把动画分为很多帧,而且整个动画会在帧与帧之间硬切,不会像贝塞尔曲线那样做插值处理。

通过上图我们可以很明显看出steps(8)、linear和ease的区别.

其实这种硬切效果是我们极力避免的,因此我们也很少听到关于steps()的讨论。在CSS调速函数的世界里,基于贝塞尔曲线的调速函数就像是被人追捧的白天鹅,而steps()则是旁人唯恐不及的丑小鸭。

其实无所谓好与不好,更多的是适合与不适合,我们都崇拜的贝塞尔曲线在像小"loading"这样的逐帧动画中失败了,而steps()却展示出我们想要的效果.

这个想法最初是Simurai在他的博客中推出http://simurai.com/blog/2012/12/03/step-animation,他使用steps()实现拼合图片的动画效果.让人印象深刻

codepen中查看效果

ch单位 - css值与单位第三版

有时候,我们希望一段为本字符逐个显示,模拟出一种打字的效果。这种效果在技术类网站中尤为常见,用等宽字体可以营造出一种终端命令行的感觉.

<h1>CSS is amazing!</h1>
@keyframes typing{
    from{width:0}
}
h1{
    width:7.7em;
    white-space:nowrap;
    overflow:hidden;
    animation:typing 8s;
}

我们想要模拟出一种打字效果,但是

  • 整个动画是平滑连贯的,而不是逐字显示
  • 目前我们已经使用em指定宽度是7.7,虽然他比像素单位好一些,但是仍然不够理想,这个宽度为什么是7.7em.

我们很自然的想到了使用steps()来修复第一个问题,但是不幸的是,我们所需要的步进数量是由字符的数量来决定的

CSS值与单位(第三版)规范引入了一个新的单位,表示"0"字形的宽度。大多数场景下,我们不必关心"0"字形的宽度到底有多宽,因为在等宽字体中,"0"字形的宽度和其他所有字形的宽度是一样的。因此,我们如果使用ch单位来表示h1的宽度,那取值实际上就是字符的数量:在上面的例子中就是15

@keyframes typing{
    from{ width:0 }
}
@keyframes caret{
    50%{ border-color:transparent }
}
h1{
    width:15ch;
    overflow:hidden;
    white-space:nowrap;
    border-right:0.5em solid;
    animation:typing 6s steps(15),caret 1s steps(1) infinite;
}

但是我们还是有些疑问:

  • 这样的代码是不易维护的,当更新标题的时候,我们总是需要根据字符的数量来指定不同的宽度样式和steps()函数,这时候正是JavaScript的用武之地 function $$(selector,context){ context = context||document; var elements = context.querySelector(selector); return Array.prototype.slice.call(elements); } $$('h1').forEach(function(h1){ var len = h1.textContent.length,s = h1.style; s.width = len + 'ch'; s.animationTimingFunction = "steps(" + len + "),steps(1)" })
  • 如果浏览器不支持ch单位,我们该怎么办?这时候就需要实现样式的回退,如果不希望字体出现异常,会选择补一行em作为单位的回退样式

写在最后

这一篇主要基于steps()函数和ch单位,详细的比较了steps()调速函数和基于贝塞尔曲线调速函数的区别,虽然steps()调速函数像是旁人唯恐不及的丑小鸭,但是它亦有其独特的魅力。

参考资料

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端下午茶

CSS 中重要的层叠概念

最近在项目的过程中遇到了一个问题,menu-bar希望始终显示在最上面,而在之后的元素都显示在它之下,当时设置了 z-index 也没有效果,不知道什么原因,因...

1092
来自专栏CVPy

OpenCV玩九宫格数独(一):九宫格图片中提取数字

在一年之前,我曾用 C++ 尝试过 opencv 解数独,但由于当时水平有限,未能完成。最近我打算改用 Python 来完成。本文先说第一步,图片中数字的提取。

2.7K2
来自专栏章鱼的慢慢技术路

OpenGL透明与混色效果

2176
来自专栏IMWeb前端团队

移动端重构实战系列7——环形UI

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 ”本系列教程为实战教程,是本人移动端重构经验及思想的一次总结,也是对sand...

2346
来自专栏HTML5学堂

一步步教你弹性框架-上篇

HTML5学堂:本系列主要在于跟大家分享弹性运动框架的制作方式。弹性运动框架的运动方式类似于弹簧,有一种回弹的效果,在网站中的一些特效当中还是有一些应用的。实现...

3668
来自专栏前端桃园

Grid布局简介

没错,这其实就是我们小时候写的小格子本本,其实它跟我们今天要讲的主题Grid布局非常类似,其实Grid布局就是它的升级加强版。

1.4K7
来自专栏Spring相关

Css权重解析

关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准 具...

1412
来自专栏极客猴

Python 绘图,我只用 Matplotlib(二)

上篇文章,我们了解到 Matplotlib 是一个风格类似 Matlab 的基于 Python 的绘图库。它提供了一整套和matlab相似的命令API,十分适合...

1461
来自专栏较真的前端

深入研究CSS字体度量及CSS 盒子

1693
来自专栏腾讯IVWEB团队的专栏

SVG 动画精髓(上)

DR本文主要是讲解关于 SVG 的一些高级动画特效,比如 SVG 动画标签,图形渐变,路径动画,线条动画,SVG 裁剪等。例如:路径动画图形渐变:线条动画:以及...

8000

扫码关注云+社区

领取腾讯云代金券