---
id: 587d78a9367417b2b2512ae9
title: Use a Bezier Curve to Move a Graphic
challengeType: 0
videoUrl: ''
localeTitle: Используйте кривую Безье для перемещения графика
---
## Description
В предыдущем задании обсуждалось ключевое слово ease-out
которое описывает изменение анимации, которое ускоряется сначала, а затем замедляется в конце анимации. Справа показана разница между ключевым словом ease-out
(для синего элемента) и linear
ключевым словом (для красного элемента). Подобные анимационные прогрессии к ease-out
ключевому слову могут быть достигнуты с помощью пользовательской кубической функции кривой Безье. В общем случае изменение опорных точек p1
и p2
приводит к созданию различных кривых Безье, которые контролируют ход анимации во времени. Вот пример кривой Безье с использованием значений, имитирующих стиль непринужденности: animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
Помните, что все функции cubic-bezier
начинаются с p0
at (0, 0) и заканчиваются p3
в (1, 1). В этом примере кривая движется быстрее по оси Y (начинается с 0, переходит в p1
y значение 0, затем переходит в значение p2
y 1), чем она перемещается по оси X (0 для начала, затем 0 для p1
, до 0,58 для p2
). В результате изменение анимированного элемента происходит быстрее, чем время анимации для этого сегмента. К концу кривой соотношение между изменением значений x и y меняется на противоположное - значение y перемещается от 1 до 1 (без изменений), а значения x перемещаются от 0,58 до 1, что делает изменения анимации медленнее по сравнению с продолжительность анимации.
## Instructions
Чтобы увидеть эффект этой кривой Безье в действии, измените animation-timing-function
элемента с id red
на функцию cubic-bezier
с значениями x1, y1, x2, y2, установленными соответственно 0, 0, 0.58, 1 Это заставит оба элемента продвигаться по анимации аналогичным образом.
## Tests
```yml
tests:
- text: 'Значение свойства animation-timing-function
элемента с red
id должно быть функцией cubic-bezier
с значениями x1, y1, x2, y2, установленными соответственно 0, 0, 0,58, 1.'
testString: 'assert($("#red").css("animation-timing-function") == "cubic-bezier(0, 0, 0.58, 1)", "The value of the animation-timing-function
property of the element with the id red
should be a cubic-bezier
function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .");'
- text: Элемент с red
идентификатором должен больше не обладать свойством animation-timing-function
линейным.
testString: 'assert($("#red").css("animation-timing-function") !== "linear", "The element with the id red
should no longer have the animation-timing-function
property of linear.");'
- text: Значение свойства animation-timing-function
для элемента с blue
не должно изменяться.
testString: 'assert($("#blue").css("animation-timing-function") == "ease-out", "The value of the animation-timing-function
property for the element with the id blue
should not change.");'
```
## Challenge Seed
## Solution
```js
// solution required
```