巧妙运用 Step Easing

以下是 Julian Shapiro 的客座文章。 Julian 最近一直在研究 Velocity.js，他之前曾在 CSS-Tricks 上 发表过关于此的文章。 Julian 生活在动画的世界里，因此他收集了一些有趣的奇特动画技巧示例也就不足为奇了。 在这里，他分享了关于 step easing 的所有内容，您可能甚至都没有意识到它的存在。 这是一种动画过渡类型，它以设定的步数从一个关键帧跳到另一个关键帧，而不是像动画通常那样尽可能多地填充关键帧。

我们都知道标准的缓动类型：CSS 的 ease 和 ease-in-out，jQuery 的 swing 等。 但是 缓动的私生子 呢？ 那个出于某种原因被写入 CSS 规范但很少有人知道甚至更少人使用的缓动类型呢？

我指的是 step 缓动，您可以使用它指定动画到达其最终值需要跳跃的次数。 例如，如果您使用 opacity 属性在 1000 毫秒的持续时间内指定步数为 4，则 opacity 将在以下时间跳到以下值

0 毫秒：0
250 毫秒：0.25
500 毫秒：0.50
750 毫秒：0.75
1000 毫秒：1.00

在这些值之间，opacity 保持不变。 过渡是即时的。

如何使用 Step Easing

要将 step easing 与 CSS 过渡 一起使用，请将 step(stepCount) 作为您的缓动类型传递

.has-transition {
  transition: all 1s steps(4);
}

查看 CodePen 上 CSS-Tricks 的笔 CSS-Tricks Step Easing 文章：CSS 过渡 (@css-tricks)。

要将 step easing 与流行且高效的动画库 Velocity.js 一起使用，请将 [ stepCount ] 作为您的缓动类型传递

$("div").velocity({ opacity: 0 }, { easing: [ 4 ] });

查看 CodePen 上 CSS-Tricks 的笔 CSS-Tricks Step Easing 文章：Velocity (@css-tricks)。

我们将在下面的示例中使用 Velocity.js，因为它提供了微调的补间控制，这比 CSS 过渡更适合将复杂的动画链接在一起。 Velocity.js 具有与 jQuery 的 $.animate() 几乎相同的 API。（我们不能使用 $.animate() 本身，因为它不支持 step easing。）

使用案例

正如本文标题所承诺的那样，现在是时候探索 step easing 的巧妙用例了。 让我们尝试证明它的存在是合理的！

注意：要查看这些演示是如何组合在一起的，请点击后续任何 CodePen 嵌入的JS 选项卡。

精灵动画

让我们先解决 step easing 最流行的用途：精灵动画。 这可能是您已经在网络上见过的唯一用例。 实现很简单：跳动 background-image（其中包含动画的所有帧并排放置）的位置，以便我们一次看到一个“帧”

查看 CodePen 上 CSS-Tricks 的笔 Velocity.js – 缓动（Step）示例：精灵 (@css-tricks)。

时钟指针

让我们从最明显的例子开始：模仿时钟指针使用的“断断续续的旋转”。

查看 CodePen 上 CSS-Tricks 的笔 Velocity.js – 缓动（Step）示例：时钟 (@css-tricks)。

游戏棋盘

这里的原理很简单。 让我们使用 step easing 来模仿游戏棋盘棋子的逐格离散移动。（如果没有 step easing，我们将不得不将一系列 CSS 属性更改逐个链接起来才能实现此目的。）

查看 CodePen 上 CSS-Tricks 的笔 Velocity.js – 缓动（Step）示例：棋盘游戏 (@css-tricks)。

8 位游戏

为了保持我们怀旧的游戏主题，这里使用了相同的离散平移原理来复制在俄罗斯方块中发现的 y 轴断断续续的平移

查看 CodePen 上 CSS-Tricks 的笔 Velocity.js – 缓动（Step）示例：8 位游戏 (@css-tricks)。

新闻字幕

与上述示例相同，让我们模仿新闻字幕的面板逐个文本平移

查看 CodePen 上 CSS-Tricks 的笔 Velocity.js – 缓动（Step）示例：新闻字幕 (@css-tricks)。

进度条

到目前为止，我们只关注了利用 step easing 为我们节省编写大量动画步骤的明显用例。 让我们深入研究更巧妙的示例。

下面，我们使用 step easing 来模仿进度条中常见的“一次解压一个文件”的补间。 我们仅在动画的开始部分使用 step easing，然后过渡到流畅的“完成安装”补间。 将这些缓动类型链接在一起，使进度条具有单独阶段的感觉，指示当前正在执行安装过程的哪个部分。（进度条的状态指示通常是伪造的，因此我认为这在现实世界中确实有用。）

查看 CodePen 上 Julian Shapiro 的笔 Velocity.js – 缓动（Step）示例：进度条 (@julianshapiro)。

延迟戏剧化

为了保持夸大时间流逝的主题，下面是另一个使用伪造来戏剧化两个服务提供商之间速度差异的示例

查看 CodePen 上 CSS-Tricks 的笔 Velocity.js – 缓动（Step）示例：进度条 (@css-tricks)。

频闪灯

这种频闪效果乍一看似乎很普通，但实际上相当巧妙。 为了建立一个比较基线，上面是一个典型的脉冲动画，其中 opacity 在无限循环中补间到 1，然后反转到 0。 正如预期的那样，这给人一种脉冲光源的感觉。

在下面，我们有一个类似的示例，它使用了 step easing。 在这里，step easing 引起的离散运动跳跃创造了一种令人不安的“多步闪烁”感觉，模仿了夜总会频闪灯

查看 CSS-Tricks 团队在 CodePen 上创作的 Velocity.js – 缓动（步进）示例：频闪灯 (@css-tricks)。

如果你无法区分这两个示例，可以用手遮住其中一个，然后观察另一个。

爪印

这里我们有一张包含一系列爪印的图像，这些爪印沿 X 轴等距交错排列。我们预先裁剪了图像（使用 CSS 的 clip 属性），这样，虽然图像的完整高度可见，但宽度不可见。然后我们使用 Velocity 逐渐将 clipRight 动画化到图像的完整宽度，同时使用与爪印数量相对应的步进缓动。换句话说，我们离散地取消裁剪图像以一次显示一个爪印。

查看 CSS-Tricks 团队在 CodePen 上创作的 Velocity.js – 缓动（步进）示例：图像裁剪 (@css-tricks)。

贡献

你是否有自己很酷的步进缓动创意？在评论中分享它们！