JavaScript Animations

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

@@ -1,10 +1,10 @@
-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`. The CSS `top` property refers to the upper edge of the ball. So it should go from `0` till `field.clientHeight - ball.clientHeight`, that's the final lowest position of the upper edge of the ball.
+A coordenada inferior do campo é `field.clientHeight`. Mas a propriedade `top` fornece coordenadas para o topo da bola Então animamos a propriedade `top` a partir de `0` até `field.clientHeight - ball.clientHeight`, isto é até à posição mais baixa do topo da bola.
 
-To get the "bouncing" effect we can use the timing function `bounce` in `easeOut` mode.
+Para obter o efeito de "quique", podemos usar a função de tempo `bounce` no modo `easeOut`.
 
-Here's the final code for the animation:
+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,31 +1,31 @@
-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 `linear`, mas algo como `makeEaseOut(quad)` parece bem melhor.
 
-The code:
+O código:
 
 ```js
 let height = field.clientHeight - ball.clientHeight;
 let width = 100;
 
-// animate top (bouncing)
+// anime o topo (quicando)
 animate({
   duration: 2000,
   timing: makeEaseOut(bounce),
-  draw: function(progress) {
-    ball.style.top = height * progress + 'px'
+  draw: function (progress) {
+    ball.style.top = height * progress + "px"
   }
 });
 
-// animate left (moving to the right)
+// anime a esquerda (movendo para a direita)
 animate({
   duration: 2000,
   timing: makeEaseOut(quad),
-  draw: function(progress) {
+  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 da 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 fonte.