JavaScript Animations

7-animation/3-js-animation/1-animate-ball/solution.md

@@ -1,12 +1,12 @@
-To bounce we can use CSS property `top` and `position:absolute` for the ball inside the field with `position:relative`.
+Para quicar, podemos usar a propriedade CSS `top` e `position:absolute` para a bola dentro do campo com `position:relative`.
 
-The bottom coordinate of the field is `field.clientHeight`. But the `top` property gives coordinates for the top of the ball, the edge position is `field.clientHeight - ball.clientHeight`.
+A coordenada inferior do campo é `field.clientHeight`. Mas a propriedade `top` fornece coordenadas para o topo da bola, a posição da borda é `field.clientHeight - ball.clientHeight`.
 
-So we animate the `top` from `0` to `field.clientHeight - ball.clientHeight`.
+Então animamos a propriedade `top` a partir de `0` até `field.clientHeight - ball.clientHeight`.
 
-Now to get the "bouncing" effect we can use the timing function `bounce` in `easeOut` mode.
-
-Here's the final code for the animation:
+Para obter o efeito de "quique", podemos usar a função de tempo `bounce` no modo `easeOut`
+.
+Aqui está o código final para a animação:
 
 ```js
 let to = field.clientHeight - ball.clientHeight;

7-animation/3-js-animation/1-animate-ball/task.md

@@ -2,8 +2,8 @@ importance: 5
 
 ---
 
-# Animate the bouncing ball
+# Animar a bola quicando
 
-Make a bouncing ball. Click to see how it should look:
+Faça uma bola quicando. Clique para ver como deve ficar:
 
 [iframe height=250 src="solution"]

7-animation/3-js-animation/2-animate-ball-hops/solution.md

@@ -1,22 +1,22 @@
-In the task <info:task/animate-ball> we had only one property to animate. Now we need one more: `elem.style.left`.
+Na atividade <info:task/animate-ball> nós tínhamos apenas uma propriedade para animar. Agora precisamos de mais uma: `elem.style.left`.
 
-The horizontal coordinate changes by another law: it does not "bounce", but gradually increases shifting the ball to the right.
+A coordenada horizontal é modificada por outra regra: ela não "quica", mas gradativamente aumenta a movimentação da bola para a direita.
 
-We can write one more `animate` for it.
+Podemos escrever mais um `animate` para isso.
 
-As the time function we could use `linear`, but something like `makeEaseOut(quad)` looks much better.
+Como função de tempo podemos usar `liner`, mas algo como `makeEaseOut(quad)` parece bem melhor.
 
-The code:
+O código:
 
 ```js
-let height = field.clientHeight - ball.clientHeight;
-let width = 100;
+let height = field.clientHeight - ball.clientHeight
+let width = 100
 
 // animate top (bouncing)
 animate({
   duration: 2000,
   timing: makeEaseOut(bounce),
-  draw: function(progress) {
+  draw: function (progress) {
     ball.style.top = height * progress + 'px'
   }
 });
@@ -25,8 +25,8 @@ animate({
 animate({
   duration: 2000,
   timing: makeEaseOut(quad),
-  draw: function(progress) {
-    ball.style.left = width * progress + "px"
+  draw: function (progress) {
+    ball.style.left = width * progress + 'px'
   }
 });
 ```

7-animation/3-js-animation/2-animate-ball-hops/task.md

@@ -2,12 +2,12 @@ importance: 5
 
 ---
 
-# Animate the ball bouncing to the right
+# Anime a bola quicando para a direita
 
-Make the ball bounce to the right. Like this:
+Faça a bola quicar para a direita. Assim:
 
 [iframe height=250 src="solution"]
 
-Write the animation code. The distance to the left is `100px`.
+Escreva o código de animação. A distância para a esquerda é `100px`.
 
-Take the solution of the previous task <info:task/animate-ball> as the source.
+Use a solução da atividade anterior <info:task/animate-ball> como a fonte.