CSS秘密花园：逐帧动画

#CSS秘密花园 #Animation #Web动画

发布于大漠

8 年前

《CSS Secrets》是@Lea Verou最新著作，这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书，经过一段时间的阅读，我、@南北和@彦子一起将在W3cplus发布一系列相关的读后感，与大家一起分享。

问题

通常，我们需要一个动画效果是比较难的或者说使用CSS的transition是不可能实现的。例如，一个卡通移动或一个复杂的进度条。在这种情况下，基于图像的逐帧动画是完美的，但是实现这种效果是具有挑战性的。

在这一点上，你可能会说：难道我们不能使用gif动画？很多情况下，答案是肯定的，gif动画是完美的。然而，他们也有一些缺点，可能在一些地方无法使用：

所有帧中被限制使用256色调色板
他们不能具有透明度，这是一个很大的问题。例如，下图所示的效果是很常见的。
在CSS中有些方面无法做修改，比如时间、重复和停顿等等。一旦生成gif文件，一切都存在文件中，只能通过一个图像编辑器来做修改或生成另一个文件。

逐帧动画

上图是一个半透明的进度指示器(dabblet.com),这个是Gif图无法实现的效果。

早在2004年，Mozilla团队就解决了前两个问题，他们通过逐帧动画PNG文件，实现类似静态的方式或者动画的GIF文件。他们把这种设计称为APNG。但是，直到今天，支持APNG的浏览器和制图软件都非常有限。

开发人员甚至通过使用一个Sprite图和使用JavaScript脚本来动态更改background-position值，在浏览器中实现灵活的逐帧动画。你甚至可以找到一个小的库来完成，那么有没有一个简单的方法，使用CSS来实现这样的效果呢？

解决方案

假设我们所有帧动画用到的Sprites的PNG图如下所示：

逐帧动画

我们有一个元素，用来制作加载动画（别忘了，在元素里面放些文本，提搞可访性！），元素大小是单帧动画的尺寸：

<div class="loader">Loading...</div>

.loader {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-indent: 999px;
    overflow: hidden;
    background: url(https://static.fedev.cn/sites/default/files/blogs/2015/1507/loader.png) 0 0;
}

目前结果如下图所示：

逐帧动画

将显示的是第一帧，但是没有动画效果。如果我们对background-position进行不同值的设置，比如-100px,0是第二帧，-200px 0是第三帧等等。这样一来，首先想到的他可能是一个动画：

@keyframes loader {
    to { background-position: -800px 0; }
}
.loader {
    animation: loader 1s infinite linear;
    /*省略其他样式*/
}

然而，正如下图所看到的图片（每167ms）,这并不是真正需要的效果：

逐帧动画

当我们不需要关键帧之间的插值时，我们最初尝试的逐帧动画效果失败了。

虽然我们还没有实现逐帧动画效果，但实际上我们已经非常接近解决方案。这里有一个秘密，将使用steps()时间函数来替代前面介绍的“Bézier-based”时间函数。

你可能会问，这是什么时间函数？正如上一节介绍的，我们看到的都是有关于“Bézier-based”时间函数来控制关键帧之间的平滑过渡。通常情况之下，在transition和animation都可以实现平滑过渡。然而，在这种情况这下，这种平滑过渡时间函数直接摧毁了我们使用Sprite制作的动画。

steps()时间函数和“Bézier-based”很不一样，他可以根据整个动画的关键帧步骤指定步骤的数量，并且可以对插值进行开关的设置。在CSS中，有关于steps()讨论不太多。至于CSS中有关于时间函数功能，“Bézier-based”才是亲妈的生，很受欢迎，但steps()是后妈的，一直不受人待。然而，在这种情况下，steps()才正是我们需要的。一旦把这个用到加载的动画中，动画才变得正常，也是我们需要的效果：

animation: loader 1s infinite steps(8);

请记住，steps()还可以接受第二个参数，而且这个参数是可选的。start或end(默认的)，用来设定每个时间间隔开关，如下图所示：

逐帧动画

如果我们只需要一个步骤，也可以通过step-start和step-end快捷键，其相当于steps(1,start)和steps(1,end)。

提示：Simurai给Sprites动画提供了一个使用steps()技术。

如需转载，烦请注明出处：https://www.fedev.cn/css3/css-secrets/frame-by-frame-animations.htmlDiamond Supply PUMA Black Friday

CSS秘密花园： 逐帧动画

问题

解决方案

CSS秘密花园：逐帧动画