May 19, 2020 · May 20, 2020 · May 26, 2020 · May 25, 2021 · May 25, 2021 · Jan 26, 2023
diff --git a/7-animation/3-js-animation/1-animate-ball/solution.md b/7-animation/3-js-animation/1-animate-ball/solution.md
 To bounce we can useCSSproperty`top`and `position:absolute`for the ball inside the field with `position:relative`.
 Para quicar, podemos usar a propriedadeCSS `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;
diff --git a/7-animation/3-js-animation/1-animate-ball/task.md b/7-animation/3-js-animation/1-animate-ball/task.md

 ---

 #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"]
diff --git a/7-animation/3-js-animation/2-animate-ball-hops/solution.md b/7-animation/3-js-animation/2-animate-ball-hops/solution.md
 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`.

 Thehorizontalcoordinate changes by another law: it does not "bounce",but gradually increases shifting the ball to the right.
 A coordenadahorizontalé 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"
  }
 });
diff --git a/7-animation/3-js-animation/2-animate-ball-hops/task.md b/7-animation/3-js-animation/2-animate-ball-hops/task.md

 ---

 #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.
Original file line number	Diff line number	Diff line change
		@@ -1,10 +1,10 @@
		To bounce we can useCSSproperty`top`and `position:absolute`for the ball inside the field with `position:relative`.
		Para quicar, podemos usar a propriedadeCSS `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`.

karlasamantha marked this conversation as resolved. Show resolvedHide resolved
		Here's the final code for the animation:
		Aqui está o código final para a animação:
karlasamantha marked this conversation as resolved. Show resolvedHide resolved

karlasamantha marked this conversation as resolved. Show resolvedHide resolved
		```js
karlasamantha marked this conversation as resolved. Show resolvedHide resolved
		let to = field.clientHeight - ball.clientHeight;
karlasamantha marked this conversation as resolved. Show resolvedHide resolved
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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"]
Original file line number	Diff line number	Diff line change
		@@ -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`.

		Thehorizontalcoordinate changes by another law: it does not "bounce",but gradually increases shifting the ball to the right.
		A coordenadahorizontalé 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"
		}
		});
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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.