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