2.2 KiB
| id | title | challengeType | videoUrl | forumTopicId |
|---|---|---|---|---|
| 587d78a9367417b2b2512ae8 | 学习贝塞尔曲线的原理 | 0 | https://scrimba.com/c/c9bDrs8 | 301058 |
--description--
上一个挑战中，我们介绍了 animation-timing-function 以及它的一些预设值，这些值定义了不同时间内的动画速度。除了预定义值之外，CSS 还提供了贝塞尔曲线（Bezier curves）来更细致地控制动画的速度曲线。
在 CSS 动画里，我们可以用 cubic-bezier 来定义贝塞尔曲线。曲线的形状代表了动画的速度。曲线在 1 * 1 的坐标系统内，其中 X 轴代表动画的时间间隔（类似于时间比例尺），Y 轴代表动画的改变。
cubic-bezier 函数包含了 1 * 1 网格里的4个点：p0、p1、p2、p3。其中 p0 和 p3 是固定值，代表曲线的起始点和结束点，坐标值依次为 (0, 0) 和 (1, 1)。你只需设置另外两点的 x 值和 y 值，设置的这两点确定了曲线的形状从而确定了动画的速度曲线。在 CSS 里面通过 (x1, y1, x2, y2) 来确定 p1 和 p2。以下就是 CSS 贝塞尔曲线的例子：
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
在上面的例子里，两个点的 x 和 y 值相等（x1 = 0.25 = y1 和 x2 = 0.75 = y2），如果你还记得初中几何，结果是从原点到点 (1, 1) 的一条直线。动画速度呈线性，效果和 linear 一致。换言之，元素会匀速运动。
--instructions--
对于 id 为 ball1 的元素，请把 animation-timing-function 属性值从 linear 变成等价的 cubic-bezier 函数值。也就是使用上面例子给的值。
--hints--
id 为 ball1 的元素的 animation-timing-function 属性值应该为和 linear 预定值等价的贝塞尔函数值。
assert(
$('#ball1').css('animation-timing-function') ==
'cubic-bezier(0.25, 0.25, 0.75, 0.75)'
);
id 为 ball2 的元素的 animation-timing-function 属性值应该保持不变。
const ball2Animation = $('#ball2')
.css('animation-timing-function')
.replace(/\s/g, '');
assert(
ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)'
);