You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 7-animation/3-js-animation/article.md
+4-3
Original file line number
Diff line number
Diff line change
@@ -8,7 +8,7 @@ Por exemplo, movimentação por um caminho complexo, com uma função de tempo d
8
8
9
9
A animação pode ser implementada como uma sequência de frames (quadros) -- geralmente pequenas modificações nas propriedades de HTML/CSS.
10
10
11
-
Por exemplo, modificando `style.left` de `0px` para `100px`movimenta o elemento. E se aumentarmos em `setInterval`, mudando por `2px` com um pequeno atraso, como 50 vezes por segundo, parecerá suave. Este é o mesmo princípio do cinema: 24 quadros por segundo é o suficiente para fazer com que pareça suave.
11
+
Por exemplo, modificando `style.left` de `0px` para `100px`move o elemento. E se aumentarmos em `setInterval`, mudando por `2px` com um pequeno atraso, como 50 vezes por segundo, parecerá suave. Este é o mesmo princípio do cinema: 24 quadros por segundo é o suficiente para fazer com que pareça suave.
12
12
13
13
O pseudo-código pode ficar assim:
14
14
@@ -91,7 +91,6 @@ Isso agenda a função `callback` para ser executado no momento mais próximo qu
91
91
Se modificarmos os elementos na `callback`, então eles serão agrupados juntos com outras `requestAnimationFrame` callbacks e com animações em CSS. Então haverá apenas um recálculo geométrico e repintura ao invés de várias.
92
92
93
93
O valor retornado `requesId` pode ser utilizado para cancelar a chamada:
94
-
95
94
```js
96
95
// cancela a execução agendada da callback
97
96
cancelAnimationFrame(requestId)
@@ -139,6 +138,7 @@ function animate({timing, draw, duration}) {
139
138
if (timeFraction <1) {
140
139
requestAnimationFrame(animate);
141
140
}
141
+
142
142
});
143
143
}
144
144
```
@@ -178,6 +178,7 @@ Função `animate` aceita 3 parâmetros que essencialmente descrevem a animaçã
178
178
179
179
...Ou fazer qualquer outra coisa, podemos animar qualquer coisa, de qualquer jeito.
180
180
181
+
181
182
Vamos animar o elemento `width` de `0` a `100%` usando nossa função.
182
183
183
184
Clique no elemento para a demo:
@@ -416,7 +417,7 @@ Para animação que CSS não lida bem, ou aquelas que precisam de controle rígi
416
417
417
418
Quando uma página está em segundo plano, não ocorrem repinturas, então a callback não será executada: a animação será suspensa e não consumirá recursos. Isso é ótimo.
418
419
419
-
Aqui está a função helper `animate` para configura a maioria das animações:
420
+
Aqui está uma função de ajuda `animate` para configurar a maioria das animações:
0 commit comments