---
id: 587d78a9367417b2b2512ae8
title: Learn How Bezier Curves Work
challengeType: 0
videoUrl: ''
localeTitle: 了解Bezier曲线的工作原理
---
## Description
最后一项挑战引入了animation-timing-function
属性和一些在其持续时间内改变动画速度的关键字。 CSS提供了除关键字之外的选项,通过使用贝塞尔曲线,可以更好地控制动画的播放方式。在CSS动画中,贝塞尔曲线与cubic-bezier
函数一起使用。曲线的形状表示动画的播放方式。曲线位于1乘1坐标系上。此坐标系的X轴是动画的持续时间(将其视为时间刻度),Y轴是动画中的变化。 cubic-bezier
函数由四个主要点组成,这些点位于1 x 1网格上: p0
, p1
, p2
和p3
。为您设置p0
和p3
- 它们是始终分别位于原点(0,0)和(1,1)的起点和终点。您可以为其他两个点设置x和y值,并将它们放置在网格中的位置决定了要遵循的动画曲线的形状。这是在CSS中通过以下形式声明p1
和p2
“锚”点的x和y值来完成的: (x1, y1, x2, y2)
。将它们全部拉到一起,这里是CSS代码中Bezier曲线的一个例子: 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
函数值。使用上面示例中给出的点值。
## Tests
```yml
tests:
- text: 具有id ball1
的元素的animation-timing-function
属性的值应该是线性等效的cubic-bezier函数。
testString: 'assert($("#ball1").css("animation-timing-function") == "cubic-bezier(0.25, 0.25, 0.75, 0.75)", "The value of the animation-timing-function
property for the element with the id ball1
should be the linear-equivalent cubic-bezier function.");'
- text: 具有id ball2
的元素的animation-timing-function
属性的ball2
不应更改。
testString: 'assert($("#ball2").css("animation-timing-function") == "ease-out", "The value of the animation-timing-function
property for the element with the id ball2
should not change.");'
```
## Challenge Seed
## Solution
```js
// solution required
```