CSS `Keyframe Animations` 深度：`animation-timing-function` `steps()`, `cubic-bezier()` - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，大家好！我是今天的主讲人，咱们今天聊聊CSS Keyframe Animations里那些控制时间节奏的家伙们，保证让你的动画不再是“匀速跑”，而是“花样滑冰”。今天咱们重点啃两块硬骨头：animation-timing-function的steps()和cubic-bezier()。

一、动画的基础姿势回顾

在深入时间函数之前，咱们先简单回顾一下CSS动画的基础姿势，免得有同学掉队。

@keyframes slide-in {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.element {
  animation-name: slide-in;
  animation-duration: 1s;
  /* 其他动画属性，例如animation-timing-function */
}

这段代码定义了一个名为slide-in的动画，让元素从屏幕左侧滑入，并逐渐显示。animation-duration控制动画的总时长，而今天的主角animation-timing-function，则控制动画在整个过程中的速度变化。

二、animation-timing-function大家族

animation-timing-function家族成员众多，先来个集体亮相：

函数名	描述
`linear`	匀速运动，老老实实，毫无激情。
`ease`	默认值，先加速后减速，比较自然。
`ease-in`	加速开始，然后匀速，最后基本不动。
`ease-out`	匀速开始，然后加速，最后飞出去。
`ease-in-out`	先加速，中间匀速，最后减速，比`ease`更柔和。
`steps(n, [start\|end])`	将动画分割成n个阶段，每个阶段瞬间完成，产生阶梯效果。
`cubic-bezier(x1, y1, x2, y2)`	自定义贝塞尔曲线，让你随心所欲控制动画速度。

前面的linear、ease系列比较简单，咱们就不浪费口舌了。今天主要攻克steps()和cubic-bezier()。

三、steps()：让动画一步一个脚印

steps()函数可以将动画分割成若干个离散的步骤，而不是平滑过渡。想象一下，你有一个精灵图，里面包含多个动画帧，你需要用steps()来控制动画帧的切换。

steps(number, [start|end])

number: 必须，指定动画分割的步数。
start|end: 可选，指定动画在每个步骤的开始还是结束时发生变化。默认为end。
- start: 动画在步骤开始时立即发生变化。
- end: 动画在步骤结束时发生变化。

例子1：简单的计数器

<!DOCTYPE html>
<html>
<head>
<style>
.counter {
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 24px;
  border: 1px solid black;
  overflow: hidden;
}

.counter-inner {
  width: 500px; /* 假设有5个数字 */
  animation: count 5s steps(5);
}

@keyframes count {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-400px); /* 5个数字，每个100px */
  }
}
</style>
</head>
<body>

<div class="counter">
  <div class="counter-inner">12345</div>
</div>

</body>
</html>

在这个例子中，.counter-inner的宽度是500px，包含了5个数字。@keyframes count动画将.counter-inner水平移动-400px，steps(5)将动画分割成5个步骤。因此，每个步骤将显示一个不同的数字，形成一个计数器的效果。

例子2：精灵图动画

假设你有一个精灵图sprite.png，包含了8个动画帧，水平排列。

<!DOCTYPE html>
<html>
<head>
<style>
.sprite {
  width: 100px;
  height: 100px;
  background: url("sprite.png") 0 0 no-repeat;
  animation: sprite-animation 0.8s steps(8) infinite; /* 0.8s / 8 = 0.1s 每帧 */
}

@keyframes sprite-animation {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -800px 0; /* 8帧，每帧100px */
  }
}
</style>
</head>
<body>

<div class="sprite"></div>

</body>
</html>

在这个例子中，steps(8)将动画分割成8个步骤，每个步骤切换到精灵图中的下一帧。infinite让动画无限循环。

start vs end

steps(n, end)（默认值）和steps(n, start)的区别在于，动画在每个步骤的哪个时间点发生变化。

steps(n, end)：动画在每个步骤的结束时发生变化。这意味着在每个步骤的开始，元素的状态保持不变，直到步骤结束时才瞬间跳到下一个状态。
steps(n, start)：动画在每个步骤的开始时发生变化。这意味着动画一开始就跳到第一个状态，并在每个步骤的开始时立即跳到下一个状态。

可以这样理解：end是“等一下，我准备好了再变”，start是“立刻变，毫不犹豫”。

四、cubic-bezier()：贝塞尔曲线的魅力

cubic-bezier()函数允许你使用三次贝塞尔曲线来定义动画的速度曲线。贝塞尔曲线由四个控制点定义：P0、P1、P2 和 P3。在CSS中，P0 始终是 (0, 0)，P3 始终是 (1, 1)。你只需要指定 P1 和 P2 的坐标 (x1, y1) 和 (x2, y2)。

cubic-bezier(x1, y1, x2, y2)

x1, y1: 第一个控制点的 x 和 y 坐标。
x2, y2: 第二个控制点的 x 和 y 坐标。

x 值的范围必须在 0 到 1 之间。y 值可以超出这个范围，以创建弹跳或回弹效果。

在线工具

要理解贝塞尔曲线，最好的方法是使用在线工具。推荐几个：

这些工具可以让你可视化地调整贝塞尔曲线，并生成对应的cubic-bezier()值。

例子1：自定义ease-in-out

.element {
  animation-name: slide-in;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); /* 类似于ease-in-out */
}

这段代码使用cubic-bezier(0.42, 0, 0.58, 1)来定义一个类似于ease-in-out的动画速度曲线。你可以通过调整控制点的坐标来改变加速和减速的程度。

例子2：弹跳效果

.element {
  animation-name: bounce;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 弹跳效果 */
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px); /* 向上弹起 */
  }
  100% {
    transform: translateY(0);
  }
}

在这个例子中，cubic-bezier(0.175, 0.885, 0.32, 1.275)的y值超出了0到1的范围，创建了一个弹跳效果。元素在动画过程中会向上弹起，然后回到原来的位置。

贝塞尔曲线的解读

贝塞尔曲线的横坐标代表时间，纵坐标代表动画的进度。曲线的斜率表示动画的速度。

斜率越大，速度越快。
斜率越小，速度越慢。
水平线表示速度为0（暂停）。
垂直线表示瞬间完成。

通过调整控制点的坐标，你可以改变曲线的形状，从而控制动画的速度变化。

五、实战演练：一个炫酷的加载动画

咱们来做一个炫酷的加载动画，综合运用steps()和cubic-bezier()。

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  width: 50px;
  height: 50px;
  position: relative;
}

.loader-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid transparent;
  border-top-color: #3498db;
  animation: rotate 1s linear infinite;
}

.loader-inner:before,
.loader-inner:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid transparent;
}

.loader-inner:before {
  border-top-color: #e74c3c;
  animation: rotate-anti 0.8s linear infinite;
}

.loader-inner:after {
  border-top-color: #f9c80e;
  animation: rotate-delay 1s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate-anti {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes rotate-delay {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg); /* 稍作停顿 */
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 如果你想让停顿更明显，可以使用steps() */
/* @keyframes rotate-delay {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(360deg);
  }
} */
</style>
</head>
<body>

<div class="loader">
  <div class="loader-inner"></div>
</div>

</body>
</html>

这个加载动画由三个旋转的圆环组成，每个圆环的颜色不同。rotate和rotate-anti动画让两个圆环分别顺时针和逆时针旋转，rotate-delay动画让第三个圆环旋转，并在25%的时间点停顿一下。

六、总结与升华

animation-timing-function是CSS动画的灵魂，steps()和cubic-bezier()是其中的两颗璀璨明珠。

steps()适用于需要离散步骤的动画，例如精灵图动画和计数器。
cubic-bezier()适用于需要自定义速度曲线的动画，可以创建各种各样的效果，例如弹跳、回弹、加速、减速等等。

掌握了这两个函数，你就可以随心所欲地控制动画的速度变化，让你的动画更加生动有趣。

希望今天的讲座对大家有所帮助。动画的世界是无限的，希望大家多多实践，创造出更多精彩的作品！

感谢各位的观看，咱们下期再见！

发表回复 取消回复

发表回复取消回复