JavaScript Animations #136

karlasamantha · 2020-05-20T03:16:26Z

No description provided.

CLAassistant · 2020-05-20T03:16:32Z

All committers have signed the CLA.

wnleao · 2020-05-22T22:18:55Z

7-animation/3-js-animation/article.md


-An animation can be implemented as a sequence of frames -- usually small changes to HTML/CSS properties.
+A animação pode ser implmentada como uma sequência de frames (quadros) -- geralmente pequenas modificações nas propriedades de HTML/CSS.


minor typo: implmentada -> implementada

wnleao · 2020-05-22T22:18:55Z

7-animation/3-js-animation/article.md


 ```js
-let start = Date.now(); // remember start time
+let start = Date.now() // preservar o tempo inicial


please dont change the code, keep the ';'

wnleao · 2020-05-22T22:18:55Z

7-animation/3-js-animation/article.md

-let timer = setInterval(function() {
-  // how much time passed from the start?
-  let timePassed = Date.now() - start;
+let timer = setInterval(function () {


please dont change the code, keep the same spaces as in the original

wnleao · 2020-05-22T22:18:55Z

7-animation/3-js-animation/article.md

-  let timePassed = Date.now() - start;
+let timer = setInterval(function () {
+  // quanto tempo passou desde o início?
+  let timePassed = Date.now() - start


same here, keep the ';'

wnleao · 2020-05-22T22:18:55Z

7-animation/3-js-animation/article.md

-  if (timePassed >= 2000) {
-    clearInterval(timer); // finish the animation after 2 seconds
-    return;
+  if (tempoPetimePassedrcorrido >= 2000) {


please also dont translate the variables names

javascript-translate-bot · 2020-05-22T22:18:57Z

Please make the requested changes. After it, add a comment "/done".
Then I'll ask for a new review 👻

wnleao · 2020-05-22T22:19:58Z

Hi, Karla! Doing fine? Please don't translate or change the source code in the examples. Could you take a look into that? Like, you should keep the ';', spaces and variable names. Cheers!

karlasamantha · 2020-05-26T03:35:36Z

Hi, Karla! Doing fine? Please don't translate or change the source code in the examples. Could you take a look into that? Like, you should keep the ';', spaces and variable names. Cheers!

Hey, yeah. I'm addressing feedback now. My linter changed the code, fixing that :)

karlasamantha · 2020-05-26T03:46:45Z

/done

odsantos · 2020-12-08T18:59:34Z

Hi @karlasamantha would you please also resolve the conflicts, or kindly inform if unavailable to? Thank you.

odsantos · 2021-05-16T03:13:09Z

Hi @karlasamantha , please I wonder if you could resolve the conflicts, or kindly inform if unavailable to? Thank you.

karlasamantha · 2021-05-25T21:14:59Z

Hi @karlasamantha , please I wonder if you could resolve the conflicts, or kindly inform if unavailable to? Thank you.

Hi @odsantos , sorry for the delay! I'll try to fix the conflicts today!

karlasamantha · 2021-05-25T21:17:30Z

/done

karlasamantha · 2021-05-25T21:25:33Z

/done

odsantos · 2021-05-26T18:07:37Z

Hi @karlasamantha , thank you.

odsantos

Hi @karlasamantha ,

The article review is still missing, hopefully to another time.
Please, feel free to leave a note on something you may not agree.

Thank you.

odsantos · 2021-05-26T18:56:43Z

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


-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, a posição da borda é `field.clientHeight - ball.clientHeight`.


Suggested change

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`.

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.

odsantos · 2021-05-26T18:56:43Z

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


-To get the "bouncing" effect we can use the timing function `bounce` in `easeOut` mode.
+Então animamos a propriedade `top` a partir de `0` até `field.clientHeight - ball.clientHeight`.


Suggested change

Então animamos a propriedade `top` a partir de `0` até `field.clientHeight - ball.clientHeight`.

Para obter o efeito de "quique", podemos usar a função de tempo `bounce` no modo `easeOut`.

odsantos · 2021-05-26T18:56:43Z

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


-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`


Suggested change

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:

odsantos · 2021-05-26T18:56:43Z

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


-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`
+


Suggested change

odsantos · 2021-05-26T18:56:43Z

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

-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:


Suggested change

Aqui está o código final para a animação:

```js

odsantos · 2021-05-26T18:56:43Z

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

-  draw: function(progress) {
-    ball.style.top = height * progress + 'px'
+  draw: function (progress) {
+    ball.style.top = height * progress + "px"
  }
 });

 // animate left (moving to the right)


Suggested change

// animate left (moving to the right)

// anime a esquerda (movendo para a direita)

odsantos · 2021-05-26T18:56:43Z

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


 [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`.


Suggested change

Escreva o código de animação. A distância para a esquerda é `100px`.

Escreva o código da animação. A distância para a esquerda é `100px`.

odsantos · 2021-05-26T18:56:43Z

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


-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.


Suggested change

Use a solução da atividade anterior <info:task/animate-ball> como a fonte.

Use a solução da atividade anterior <info:task/animate-ball> como fonte.

odsantos · 2021-05-26T18:56:43Z

7-animation/3-js-animation/text.view/index.html

-And stood awhile in thought.
+  <textarea id="textExample" rows="5" cols="60">
+    Ele pegou sua espada vorpal na mão:
+    Faz tempo que o manxome inimigo que ele procurava -


Suggested change

Faz tempo que o manxome inimigo que ele procurava -

Faz tempo que o inimigo manxome ele procurava -

odsantos · 2021-05-26T18:56:43Z

7-animation/3-js-animation/text.view/index.html

+    Ele pegou sua espada vorpal na mão:
+    Faz tempo que o manxome inimigo que ele procurava -
+    Então ele descansou perto da árvore Tumtum,
+    E ficou um pouco em pensamento.
  </textarea>

  <button onclick="animateText(textExample)">Run the animated typing!</button>


Suggested change

<button onclick="animateText(textExample)">Run the animated typing!</button>

<button onclick="animateText(textExample)">Corra o texto animado!</button>

javascript-translate-bot · 2021-05-26T18:56:46Z

Please make the requested changes. After it, add a comment "/done".
Then I'll ask for a new review 👻

odsantos

Hi @karlasamantha ,

Here is the whole review.
Please, feel free to leave a note where you might not agree.

Thank you,
Osvaldo.

7-animation/3-js-animation/article.md

odsantos · 2021-05-27T14:00:29Z

7-animation/3-js-animation/article.md


-The pseudo-code can look like this:
+O pseudo-código pode ficar assim:

 ```js
 let timer = setInterval(function() {
  if (animation complete) clearInterval(timer);


Suggested change

if (animation complete) clearInterval(timer);

if (animação completa) clearInterval(timer);

odsantos · 2021-05-27T14:00:29Z

7-animation/3-js-animation/article.md


-The pseudo-code can look like this:
+O pseudo-código pode ficar assim:

 ```js
 let timer = setInterval(function() {
  if (animation complete) clearInterval(timer);
  else increase style.left by 2px


Suggested change

else increase style.left by 2px

else incremente style.left em 2px

odsantos · 2021-05-27T14:00:29Z

7-animation/3-js-animation/article.md

-// as timePassed goes from 0 to 2000
-// left gets values from 0px to 400px
+// timePassed vai de 0 a 2000
+// recebe valores de 0 a 400px


Suggested change

// recebe valores de 0 a 400px

// 'left' recebe valores de 0 a 400px

odsantos · 2021-05-27T14:00:29Z

7-animation/3-js-animation/article.md

  draw(timePassed);

 }, 20);

-// as timePassed goes from 0 to 2000
-// left gets values from 0px to 400px
+// timePassed vai de 0 a 2000


Suggested change

// timePassed vai de 0 a 2000

// enquanto timePassed vai de 0 a 2000

odsantos · 2021-05-27T14:00:29Z

7-animation/3-js-animation/article.md

- <span style="color:#EE6B47">Red</span> is the regular variant of `circ` (`easeIn`).
- <span style="color:#8DB173">Green</span> -- `easeOut`.
+- <span style="color:#EE6B47">Red</span> é a variante regular de `circ` (`easeIn`).
+- <span style="color:#8DB173">Greed</span> -- `easeOut`.
 - <span style="color:#62C0DC">Blue</span> -- `easeInOut`.


Suggested change

- <span style="color:#62C0DC">Blue</span> -- `easeInOut`.

- <span style="color:#62C0DC">Azul</span> -- `easeInOut`.

odsantos · 2021-05-27T14:00:29Z

7-animation/3-js-animation/article.md


-Here's the animated "bouncing" text typing:
+Aqui está o texto animato "quicando":


Suggested change

Aqui está o texto animato "quicando":

Aqui está o texto animado "quicando":

odsantos · 2021-05-27T14:00:29Z

7-animation/3-js-animation/article.md


-For animations that CSS can't handle well, or those that need tight control, JavaScript can help. JavaScript animations should be implemented via `requestAnimationFrame`. That built-in method allows to setup a callback function to run when the browser will be preparing a repaint. Usually that's very soon, but the exact time depends on the browser.
+Para animação que CSS não lida bem, ou aquelas que precisam de controle rígido, JavaScript pode ajudar. Animações JavaScript devem ser implementadas via `requestAnimationFrame`. Esse método embutido permite configurar uma callback para que seja executada quando o navegador estiver preparando uma repintura. Geralmente é bem breve, mas o tempo exato depende do navegador.


Suggested change

Para animação que CSS não lida bem, ou aquelas que precisam de controle rígido, JavaScript pode ajudar. Animações JavaScript devem ser implementadas via `requestAnimationFrame`. Esse método embutido permite configurar uma callback para que seja executada quando o navegador estiver preparando uma repintura. Geralmente é bem breve, mas o tempo exato depende do navegador.

Para animação que CSS não lida bem, ou aquelas que precisam de controle rígido, JavaScript pode ajudar. Animações com JavaScript devem ser implementadas via `requestAnimationFrame`. Esse método embutido permite configurar uma callback para que seja executada quando o navegador estiver preparando uma repintura. Geralmente é bem breve, mas o tempo exato depende do navegador.

7-animation/3-js-animation/article.md

odsantos · 2021-05-27T14:00:29Z

7-animation/3-js-animation/article.md


-JavaScript animations can use any timing function. We covered a lot of examples and transformations to make them even more versatile. Unlike CSS, we are not limited to Bezier curves here.
+Animações JavaScript podem usar qualquer função de tempo. Cobrimos muitos exemplos e transformações para fazê-las ainda mais versáteis. Ao contrário de CSS, não estamos limitados às curvas de Bezier.


Suggested change

Animações JavaScript podem usar qualquer função de tempo. Cobrimos muitos exemplos e transformações para fazê-las ainda mais versáteis. Ao contrário de CSS, não estamos limitados às curvas de Bezier.

Animações com JavaScript podem usar qualquer função de tempo. Cobrimos muitos exemplos e transformações para fazê-las ainda mais versáteis. Ao contrário de CSS, não estamos limitados às curvas de Bezier.

javascript-translate-bot · 2021-05-27T14:00:33Z

Please make the requested changes. After it, add a comment "/done".
Then I'll ask for a new review 👻

Co-authored-by: Osvaldo Dias dos Santos <vadodsantos@yahoo.com>

karlasamantha added 2 commits May 19, 2020

translate files to portuguese

daa1900

fixes typos

66086ae

javascript-translate-bot added the review needed label May 20, 2020

javascript-translate-bot requested a review from May 20, 2020

wnleao requested changes May 22, 2020

View changes

javascript-translate-bot removed the review needed label May 22, 2020

javascript-translate-bot added the changes requested label May 22, 2020

addresses pr feedback

0c25396

javascript-translate-bot added review needed and removed changes requested labels May 26, 2020

javascript-translate-bot requested a review from May 26, 2020

karlasamantha requested review from wnleao and removed request for May 26, 2020

Merge branch 'master' into javascript-animations

6aeed8b

javascript-translate-bot requested a review from May 25, 2021

karlasamantha added 3 commits May 25, 2021

revert changes to double quotes

21d8125

revert changes to code strings and semi-colon

acc6a9d

pr feedback

cf0c7d4

odsantos requested changes May 26, 2021

View changes

javascript-translate-bot added changes requested and removed review needed labels May 26, 2021

odsantos added 4 commits May 27, 2021

Remove a blank line.

321b30d

Remove a blank line.

f429122

Add a blank line.

75fe4d4

Add a blank line.

93f8feb

odsantos requested changes May 27, 2021

View changes

karlasamantha and others added 2 commits May 27, 2021

Update 7-animation/3-js-animation/article.md

50d1a0c

Co-authored-by: Osvaldo Dias dos Santos <vadodsantos@yahoo.com>

Update 7-animation/3-js-animation/article.md

eb41b5e

Co-authored-by: Osvaldo Dias dos Santos <vadodsantos@yahoo.com>

Feb	MAR	Apr
	21
2021	2022	2023


		An animation can be implemented as a sequence of frames -- usually small changes to HTML/CSS properties.
		A animação pode ser implmentada como uma sequência de frames (quadros) -- geralmente pequenas modificações nas propriedades de HTML/CSS.


		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, a posição da borda é `field.clientHeight - ball.clientHeight`.


		To get the "bouncing" effect we can use the timing function `bounce` in `easeOut` mode.
		Então animamos a propriedade `top` a partir de `0` até `field.clientHeight - ball.clientHeight`.

	Então animamos a propriedade `top` a partir de `0` até `field.clientHeight - ball.clientHeight`.
	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:
		Para obter o efeito de "quique", podemos usar a função de tempo `bounce` no modo `easeOut`

	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:

	// animate left (moving to the right)
	// anime a esquerda (movendo para a direita)

	Escreva o código de animação. A distância para a esquerda é `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 a fonte.

	Faz tempo que o manxome inimigo que ele procurava -
	Faz tempo que o inimigo manxome ele procurava -

	<button onclick="animateText(textExample)">Run the animated typing!</button>
	<button onclick="animateText(textExample)">Corra o texto animado!</button>

	if (animation complete) clearInterval(timer);
	if (animação completa) clearInterval(timer);

	else increase style.left by 2px
	else incremente style.left em 2px

	// recebe valores de 0 a 400px
	// 'left' recebe valores de 0 a 400px

	// timePassed vai de 0 a 2000
	// enquanto timePassed vai de 0 a 2000

	- <span style="color:#62C0DC">Blue</span> -- `easeInOut`.
	- <span style="color:#62C0DC">Azul</span> -- `easeInOut`.


		Here's the animated "bouncing" text typing:
		Aqui está o texto animato "quicando":

	Aqui está o texto animato "quicando":
	Aqui está o texto animado "quicando":


		For animations that CSS can't handle well, or those that need tight control, JavaScript can help. JavaScript animations should be implemented via `requestAnimationFrame`. That built-in method allows to setup a callback function to run when the browser will be preparing a repaint. Usually that's very soon, but the exact time depends on the browser.
		Para animação que CSS não lida bem, ou aquelas que precisam de controle rígido, JavaScript pode ajudar. Animações JavaScript devem ser implementadas via `requestAnimationFrame`. Esse método embutido permite configurar uma callback para que seja executada quando o navegador estiver preparando uma repintura. Geralmente é bem breve, mas o tempo exato depende do navegador.


		JavaScript animations can use any timing function. We covered a lot of examples and transformations to make them even more versatile. Unlike CSS, we are not limited to Bezier curves here.
		Animações JavaScript podem usar qualquer função de tempo. Cobrimos muitos exemplos e transformações para fazê-las ainda mais versáteis. Ao contrário de CSS, não estamos limitados às curvas de Bezier.

javascript-tutorial / pt.javascript.info Public

JavaScript Animations #136

Are you sure you want to change the base?

JavaScript Animations #136

Conversation

karlasamantha commented May 20, 2020

CLAassistant commented May 20, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

javascript-translate-bot commented May 22, 2020

wnleao commented May 22, 2020

karlasamantha commented May 26, 2020

karlasamantha commented May 26, 2020

odsantos commented Dec 8, 2020

odsantos commented May 16, 2021

karlasamantha commented May 25, 2021

karlasamantha commented May 25, 2021

karlasamantha commented May 25, 2021

odsantos commented May 26, 2021

odsantos left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

javascript-translate-bot commented May 26, 2021

odsantos left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

javascript-translate-bot commented May 27, 2021

CLAassistant commented May 20, 2020 •

edited

	Animações JavaScript podem usar qualquer função de tempo. Cobrimos muitos exemplos e transformações para fazê-las ainda mais versáteis. Ao contrário de CSS, não estamos limitados às curvas de Bezier.
	Animações com JavaScript podem usar qualquer função de tempo. Cobrimos muitos exemplos e transformações para fazê-las ainda mais versáteis. Ao contrário de CSS, não estamos limitados às curvas de Bezier.