过渡与动画 - 逐帧动画&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中查看效果

See the Pen Steps Animation by simurai (@simurai) on 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()调速函数像是旁人惟恐不及的丑小鸭，可是它亦有其独特的魅力。

参考资料

• 《CSS Secrets》
• http://simurai.com
• http://w3.org/TR/css3-values