---
id: 587d78a9367417b2b2512ae9
title: Use a Bezier Curve to Move a Graphic
challengeType: 0
videoUrl: ''
localeTitle: Use uma curva de Bezier para mover um gráfico
---
## Description
Um desafio anterior discutiu a palavra ease-out
chave ease-out
que descreve uma alteração de animação que acelera primeiro e depois desacelera no final da animação. À direita, a diferença entre a palavra ease-out
chave ease-out
(para o elemento azul) e linear
palavra-chave linear
(para o elemento vermelho) é demonstrada. Progressões semelhantes de animação para a palavra ease-out
chave ease-out
podem ser obtidas usando uma função de curva Bezier cúbica personalizada. Em geral, a alteração dos pontos de ancoragem p1
e p2
impulsiona a criação de diferentes curvas de Bezier, que controlam como a animação progride no tempo. Aqui está um exemplo de uma curva de Bezier usando valores para imitar o estilo animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
Lembre-se de que todas as funções de cubic-bezier
começam com p0
em (0, 0) e terminam em p3
em (1, 1). Neste exemplo, a curva se move mais rapidamente através do eixo Y (começa em 0, vai para p1
y valor de 0, então vai para p2
y valor de 1) do que se move pelo eixo X (0 para iniciar, então 0 para p1
, até 0,58 para p2
). Como resultado, a alteração no elemento animado progride mais rapidamente que o tempo da animação para esse segmento. No final da curva, a relação entre a alteração nos valores x e y se inverte - o valor y se move de 1 para 1 (sem alteração), e os valores x se deslocam de 0,58 para 1, fazendo com que a animação mude mais lentamente em comparação com a duração da animação.
## Instructions
Para ver o efeito dessa curva de Bézier em ação, altere a animation-timing-function
de animation-timing-function
do elemento com ID de red
para uma função de cubic-bezier
com valores de x1, y1, x2, y2 definidos como 0, 0, 0,58, 1 Isso fará com que ambos os elementos progridam através da animação da mesma forma.
## Tests
```yml
tests:
- text: 'O valor da propriedade animation-timing-function
do elemento com o id red
deve ser uma função cubic-bezier
com os valores x1, y1, x2, y2 definidos respectivamente para 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: O elemento com o ID red
não deve mais ter a propriedade de animation-timing-function
de linear.
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: O valor da propriedade animation-timing-function
para o elemento com o id blue
não deve ser alterado.
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
```