CSS学习笔记之 cubic-bezier() 函数
关于cubic-bezier() 函数
cubic-bezier() 函数是 CSS 中用于定义动画速度变化的一种时间函数，它通过四个参数定义了一个三次贝塞尔曲线，决定了动画在不同时间段的速度变化。这四个参数分别代表了贝塞尔曲线的两个控制点坐标，决定了动画的加速和减速模式。
基本语法
cubic-bezier(x1, y1, x2, y2)
- x1, y1：第一个控制点坐标，决定动画开始时的加速度。
- x2, y2：第二个控制点坐标，决定动画结束前的减速模式。
取值范围
- x1 和 x2 必须在 0 到 1 之间，超出范围将导致
cubic-bezier失效。 - y1 和 y2 的取值没有严格限制，但通常不宜过大。
常见的预设值
linear:cubic-bezier(0, 0, 1, 1)- 恒定速度。ease:cubic-bezier(0.25, 0.1, 0.25, 1)- 开始和结束时较慢，中间较快。ease-in:cubic-bezier(0.42, 0, 1, 1)- 开始慢，结束快。ease-out:cubic-bezier(0, 0, 0.58, 1)- 开始快，结束慢。ease-in-out:cubic-bezier(0.42, 0, 0.58, 1)- 开始和结束都慢，中间快。
应用场景
cubic-bezier() 函数常用于 CSS 的 transition-timing-function 和 animation-timing-function 属性，能够创建自定义的动画效果。通过调整控制点的坐标，可以实现各种不同的过渡效果，如弹跳、加速或减速等。
可视化工具
为了更直观地理解和调整 cubic-bezier() 曲线，可以使用一些在线工具，如 cubic-bezier.com，这些工具允许用户通过拖拽控制点来实时预览效果，极大地方便了调试和创意设计。
通过掌握 cubic-bezier() 函数，开发者可以创造出丰富多样的动画效果，提升用户体验。
ic-bezier()它的横轴与竖轴分别代表什么？
在 CSS 中使用的 cubic-bezier() 函数定义了一个三次贝塞尔曲线，其横轴和竖轴代表了以下含义：
- 横轴（x轴） ：代表时间进度。值从 0 到 1，其中 0 表示动画的开始，1 表示动画的结束。
- 竖轴（y轴） ：代表动画进度。值从 0 到 1，其中 0 同样表示动画的开始状态，1 表示动画的结束状态。
在这个曲线中，有两个固定的端点 P0(0, 0) 和 P3(1, 1)，它们分别代表动画的起始和结束状态。而 P1(x1, y1) 和 P2(x2, y2) 是两个可以调整的控制点，通过改变它们的坐标值可以控制动画在不同时间点的进度速度，从而实现加速或减速的效果。
- P1：第一个控制点，影响动画开始时的加速曲线。
- P2：第二个控制点，影响动画结束前的减速曲线。
通过调整 P1 和 P2 的位置，可以创造出各种不同的动画效果，例如先慢后快、先快后慢、弹跳效果等。这些控制点的坐标值通常在 0 到 1 之间，但 y 坐标可以超出这个范围，以实现更夸张的动画效果。不过，如果 x 坐标值超出了 0 到 1 的范围，cubic-bezier() 函数将失效。
线的斜率代表什么？
在 cubic-bezier() 函数定义的三次贝塞尔曲线中，曲线上任意一点的斜率代表了动画在该时间点的瞬时速度。斜率是曲线切线的倾斜程度，其值可以通过导数来计算。在动画的上下文中，斜率的具体含义如下：
- 斜率的绝对值：表示动画在该时间点的速度。斜率的绝对值越大，表示动画在该时间点的变化越快。
- 斜率为正：表示动画值在增加（例如，元素的位置在向右移动，或元素的透明度在增加）。
- 斜率为负：表示动画值在减少（例如，元素的位置在向左移动，或元素的透明度在减少）。
在三次贝塞尔曲线的四个关键点中：
- P0 (0, 0) ：起始点，斜率通常为零，因为这是动画开始的时刻，除非通过控制点 P1 给定一个初始加速度。
- P1 (x1, y1) ：第一个控制点，它决定了曲线的起始切线斜率，从而影响动画开始时的加速度。通过改变 P1 的 y 坐标，可以控制动画开始时的加速或减速。
- P2 (x2, y2) ：第二个控制点，它决定了曲线的结束切线斜率，从而影响动画结束前的减速度。通过改变 P2 的 y 坐标，可以控制动画结束时的减速或加速。
- P3 (1, 1) ：结束点，斜率通常为零，因为这是动画结束的时刻，除非通过控制点 P2 给定一个最终减速度。
在动画进行过程中，曲线的斜率会随着时间的变化而变化，从而创造出各种不同的速度变化效果。通过精心设计控制点 P1 和 P2 的位置，开发者可以创造出符合特定需求的动画效果，如弹跳效果、缓入缓出效果等。
