4.4 KiB
4.4 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d78a9367417b2b2512ae9 | Use a Bezier Curve to Move a Graphic | 0 | Use uma curva de Bezier para mover um gráfico |
Description
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
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
tests:
- text: 'O valor da propriedade <code>animation-timing-function</code> do elemento com o id <code>red</code> deve ser uma função <code>cubic-bezier</code> 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 <code>animation-timing-function</code> property of the element with the id <code>red</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .");'
- text: O elemento com o ID <code>red</code> não deve mais ter a propriedade de <code>animation-timing-function</code> de linear.
testString: 'assert($("#red").css("animation-timing-function") !== "linear", "The element with the id <code>red</code> should no longer have the <code>animation-timing-function</code> property of linear.");'
- text: O valor da propriedade <code>animation-timing-function</code> para o elemento com o id <code>blue</code> não deve ser alterado.
testString: 'assert($("#blue").css("animation-timing-function") == "ease-out", "The value of the <code>animation-timing-function</code> property for the element with the id <code>blue</code> should not change.");'
Challenge Seed
<style>
.balls{
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
margin-top: 50px;
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#red {
background: red;
left: 27%;
animation-timing-function: linear;
}
#blue {
background: blue;
left: 56%;
animation-timing-function: ease-out;
}
@keyframes bounce {
0% {
top: 0px;
}
100% {
top: 249px;
}
}
</style>
<div class="balls" id= "red"></div>
<div class="balls" id= "blue"></div>
Solution
// solution required