CSS `Custom Easing Functions` (自定义缓动函数) (`linear()`, `steps()`) 组合

各位观众老爷，晚上好！我是你们的老朋友，bug 终结者，今天咱们聊点有意思的，关于 CSS 自定义缓动函数 linear() 和 steps() 的组合拳。这俩兄弟单拎出来就挺好使，凑一块儿用，效果更是杠杠的。

开场白：缓动函数，动画的灵魂

先说说缓动函数是啥？简单来说，缓动函数决定了动画的节奏。就像你开车，是匀速前进，还是先慢后快，或者先快后慢，都得有个“油门”来控制。在 CSS 动画里，这个“油门”就是缓动函数。

默认情况下，CSS 动画用的是 ease 缓动函数，也就是先慢后快再慢，比较自然。但有时候，我们需要更精确的控制，或者更奇葩的效果，这时候就需要自定义缓动函数了。

主角登场：linear() 和 steps()

CSS 提供了两种自定义缓动函数：

linear()： 线性缓动函数的加强版，可以创建更复杂的线性过渡。
steps()： 步进缓动函数，让动画一格一格地跳跃。

别看名字挺唬人，用起来其实很简单。

linear()：不再只有匀速

linear() 函数允许你定义多个关键帧之间的线性过渡。它的语法如下：

linear( <linear-stop> [, <linear-stop> ]+ )

其中 <linear-stop> 的格式是：

<number> [ <percentage> ]?

<number>: 关键帧的时间点，取值范围 0 到 1。
<percentage>: (可选) 关键帧对应的动画进度百分比。如果省略，则自动计算。

举个例子，一个简单的匀速动画：

animation-timing-function: linear(0, 1);

这和 animation-timing-function: linear; 效果一样，都是匀速运动。

但是，linear() 的强大之处在于它可以定义多个关键帧，实现更复杂的线性过渡。比如，我们想让动画前半段慢一点，后半段快一点：

animation-timing-function: linear(0, 0, 0.5, 0.7, 1);

这段代码表示：

0 到 0.5 的时间段内，动画进度从 0 到 0.7。
0.5 到 1 的时间段内，动画进度从 0.7 到 1。

因为前半段用的时间长，但进度少，所以速度慢；后半段用的时间短，但进度多，所以速度快。

再来个更骚气的：

animation-timing-function: linear(0, 0, 0.25, 0.1, 0.75, 0.9, 1);

这段代码实现了一个“S”型的速度曲线，动画先慢、再快、再慢。

linear() 的应用场景：

模拟物理效果，比如模拟重力加速下落的物体。
创建特殊的速度曲线，让动画更具个性。
与其他缓动函数组合，实现更复杂的动画效果。

steps()：一步一个脚印

steps() 函数让动画以离散的步进方式进行，而不是平滑过渡。它的语法如下：

steps( <integer> [, <step-position> ]? )

<integer>: 步数，必须是正整数。
<step-position>: (可选) 步进位置，有两个值：
- start: 动画立即跳到第一步的终点。
- end: 动画在最后一步完成后才跳到最终状态。 (默认值)

举个例子，一个分成 5 步完成的动画：

animation-timing-function: steps(5);

这段代码将动画分成 5 个相等的部分，每完成一部分，动画就跳到下一个状态。

如果加上 start：

animation-timing-function: steps(5, start);

动画会立即跳到第一个步的终点，然后按剩余的 4 步完成。

steps() 的应用场景：

制作帧动画，比如精灵图动画。
创建机械运动效果，比如钟表的秒针。
实现数字递增效果。

组合拳：linear() + steps() = 无限可能

现在，重头戏来了！linear() 和 steps() 组合使用，可以创造出更复杂、更奇特的动画效果。

案例一：模拟弹簧效果

我们可以用 linear() 定义弹簧的伸缩幅度，用 steps() 定义弹簧的震动次数。

<div class="spring"></div>

.spring {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: spring-animation 2s infinite;
}

@keyframes spring-animation {
  0% { transform: scale(1); }
  100% { transform: scale(1); }
}

.spring {
  animation-timing-function: steps(4, end); /* 4 个震动周期 */
  animation-timing-function: linear(0, 0, 0.25, 1.2, 0.5, 0.8, 0.75, 1.1, 1); /* 定义伸缩幅度 */
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

这段代码中，steps(4, end) 将动画分成 4 个步骤，每个步骤代表弹簧的一个震动周期。linear() 定义了弹簧在每个周期内的伸缩幅度。

案例二：模拟呼吸灯效果

呼吸灯效果通常是用 ease-in-out 缓动函数实现的，但我们可以用 linear() 和 steps() 做出更细腻的效果。

<div class="breathing-light"></div>

.breathing-light {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: breathing-animation 3s infinite;
}

@keyframes breathing-animation {
  0% { opacity: 0.2; }
  100% { opacity: 1; }
}

.breathing-light {
  animation-timing-function: steps(1, end);
  animation-timing-function: linear(0, 0.2, 0.5, 1, 1); /* 控制亮度变化 */
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

这里，steps(1, end) 保证每次亮度变化都是瞬间完成的，linear() 控制了亮度变化的曲线。

案例三：模拟打字机效果

打字机效果的关键在于，每个字符的显示都是一个独立的步骤。

<div class="typing-text">Hello, world!</div>

.typing-text {
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  border-right: .15em solid orange; /* 光标 */
  animation: typing 3s steps(11, end), /* 11个字符 */
             blink-caret .75s step-end infinite;
}

/* 打字动画 */
@keyframes typing {
  from { width: 0 }
  to { width: 11em } /* 11个字符的宽度 */
}

/* 光标闪烁动画  */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

在这个例子中，steps(11, end) 将动画分成 11 步，每一步显示一个字符。 typing 动画控制了文字的宽度，使其逐步增加，从而模拟打字的效果。

更高级的用法：使用 CSS 变量

为了更灵活地控制缓动函数，我们可以使用 CSS 变量。

:root {
  --duration: 2s;
  --steps: 10;
  --easing: linear(0, 0, 0.5, 0.7, 1);
}

.element {
  animation: my-animation var(--duration) infinite;
  animation-timing-function: steps(var(--steps), end);
  animation-timing-function: var(--easing);
}

这样，我们就可以通过修改 CSS 变量来改变动画的持续时间、步数和缓动效果，而不需要修改大量的 CSS 代码。

注意事项：

linear() 和 steps() 可以同时使用，但要注意它们的执行顺序。后面的 animation-timing-function 会覆盖前面的。所以，通常把 steps() 放在前面，linear() 放在后面。
linear() 函数的参数越多，动画效果越复杂，但同时也会增加浏览器的计算负担。所以，要适度使用。
steps() 函数的步数越多，动画的离散感越强。要根据实际需求选择合适的步数。
浏览器兼容性：linear() 函数的兼容性较好，但 steps() 函数在一些老版本的浏览器中可能不支持。建议使用 autoprefixer 来自动添加浏览器前缀。

总结：

linear() 和 steps() 是 CSS 动画中非常强大的工具，它们可以帮助我们创建各种各样有趣、独特的动画效果。掌握了这两种缓动函数的用法，你就可以像一位动画大师一样，随心所欲地控制动画的节奏和速度。

一些实用的小贴士：

技巧	描述
善用开发者工具	浏览器的开发者工具可以实时预览动画效果，并调整缓动函数的参数。这对于调试和优化动画非常有用。
参考优秀的动画案例	网上有很多优秀的 CSS 动画案例，可以参考它们的实现方式，学习缓动函数的用法。
尝试不同的参数组合	不要害怕尝试，大胆地调整 `linear()` 和 `steps()` 函数的参数，看看会产生什么样的效果。说不定你会发现一些意想不到的惊喜。
结合 JavaScript 使用	CSS 动画可以与 JavaScript 结合使用，实现更复杂的交互效果。比如，可以用 JavaScript 动态地改变缓动函数的参数，或者根据用户的操作来触发不同的动画。
注意性能优化	复杂的动画可能会影响页面的性能。要尽量避免使用过多的动画效果，并优化动画的实现方式。比如，可以使用 `transform` 和 `opacity` 属性来实现动画，而不是使用 `left` 和 `top` 属性。

好了，今天的讲座就到这里。希望大家能够掌握 linear() 和 steps() 这两个利器，创造出更多精彩的 CSS 动画！下课！

发表回复 取消回复

发表回复取消回复