4.1 KiB
id, title, challengeType, videoUrl, forumTopicId, dashedName
| id | title | challengeType | videoUrl | forumTopicId | dashedName |
|---|---|---|---|---|---|
| 587d78a9367417b2b2512ae8 | Aprender como as curvas de Bézier funcionam | 0 | https://scrimba.com/c/c9bDrs8 | 301058 | learn-how-bezier-curves-work |
--description--
O último desafio introduziu a propriedade animation-timing-function e algumas palavras-chave que mudam a velocidade de uma animação ao longo de sua duração. O CSS oferece uma opção diferente das palavras-chave que fornece um controle ainda mais preciso sobre como a animação é reproduzida, através do uso de curvas de Bézier.
Nas animações com CSS, as curvas de Bézier são usadas com a função cubic-bezier. O formato da curva representa a forma como a animação é reproduzida. A curva é criada com base em um sistema de coordenadas 1 por 1. O eixo X deste sistema de coordenadas é a duração da animação (pense nele como uma escala de tempo), e o eixo Y é a mudança na animação.
A função cubic-bezier consiste em quatro pontos principais que ficam nesta grade de 1 por 1: p0, p1, p2 e p3. p0 e p3 já estão definidos para você - eles são os pontos de início e de final que estão sempre localizados respectivamente na origem (0, 0) e (1, 1). Você define os valores de x e y para os outros dois pontos e onde você os coloca na grade dita o formato da curva para que a animação aconteça. Isto é feito no CSS declarando os valores de x e y dos pontos "âncora" p1 e p2, no formato: (x1, y1, x2, y2). Juntando tudo, aqui está um exemplo de uma curva de Bézier:
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
No exemplo acima, os valores de x e y são equivalentes para cada ponto (x1 = 0,25 = y1 e x2 = 0.75 = y2), que se você se lembrar da aula de geometria, resulta em uma linha que estende da origem ao ponto (1, 1). Esta animação é uma mudança linear de um elemento durante a reprodução de uma animação, e é o mesmo que usar a palavra-chave linear. Em outras palavras, a animação acontece a uma velocidade constante.
--instructions--
Para o elemento com id de ball1, altere o valor da propriedade animation-timing-function de linear para seu valor equivalente na função cubic-bezier. Use os valores dos pontos dados no exemplo acima.
--hints--
O valor da propriedade animation-timing-function para o elemento com id ball1 deve ser a função cubic-bezier com pontos equivalentes a palavra-chave linear.
assert(
$('#ball1').css('animation-timing-function') ==
'cubic-bezier(0.25, 0.25, 0.75, 0.75)'
);
O valor da propriedade animation-timing-function para o elemento com id ball2 não deve ser mudado.
const ball2Animation = __helpers.removeWhiteSpace(
$('#ball2').css('animation-timing-function')
);
assert(
ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)'
);
--seed--
--seed-contents--
<style>
.balls{
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
position: fixed;
width: 50px;
height: 50px;
margin-top: 50px;
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#ball1 {
left: 27%;
animation-timing-function: linear;
}
#ball2 {
left: 56%;
animation-timing-function: ease-out;
}
@keyframes bounce {
0% {
top: 0px;
}
100% {
top: 249px;
}
}
</style>
<div class="balls" id="ball1"></div>
<div class="balls" id="ball2"></div>
--solutions--
<style>
.balls{
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
position: fixed;
width: 50px;
height: 50px;
margin-top: 50px;
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#ball1 {
left: 27%;
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
}
#ball2 {
left: 56%;
animation-timing-function: ease-out;
}
@keyframes bounce {
0% {
top: 0px;
}
100% {
top: 249px;
}
}
</style>
<div class="balls" id="ball1"></div>
<div class="balls" id="ball2"></div>