aboutsummaryrefslogtreecommitdiff
path: root/files/pt-br/web/api/web_animations_api
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:52 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:52 -0500
commit074785cea106179cb3305637055ab0a009ca74f2 (patch)
treee6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/pt-br/web/api/web_animations_api
parentda78a9e329e272dedb2400b79a3bdeebff387d47 (diff)
downloadtranslated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz
translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2
translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip
initial commit
Diffstat (limited to 'files/pt-br/web/api/web_animations_api')
-rw-r--r--files/pt-br/web/api/web_animations_api/index.html86
-rw-r--r--files/pt-br/web/api/web_animations_api/usando_a_web_animations_api/index.html358
2 files changed, 444 insertions, 0 deletions
diff --git a/files/pt-br/web/api/web_animations_api/index.html b/files/pt-br/web/api/web_animations_api/index.html
new file mode 100644
index 0000000000..c18d6fec70
--- /dev/null
+++ b/files/pt-br/web/api/web_animations_api/index.html
@@ -0,0 +1,86 @@
+---
+title: Web Animations API
+slug: Web/API/Web_Animations_API
+tags:
+ - API
+ - Animation
+ - Landing
+ - NeedsTranslation
+ - Reference
+ - TopicStub
+ - Web Animations
+translation_of: Web/API/Web_Animations_API
+---
+<p>{{DefaultAPISidebar("Web Animations")}}</p>
+
+<p>The <strong>Web Animations API</strong> allows for synchronizing and timing changes to the presentation of a Web page, i.e. animation of DOM elements. It does so by combining two models: the Timing Model and the Animation Model.</p>
+
+<h2 id="Concepts_and_usage">Concepts and usage</h2>
+
+<p>The Web Animations API provides a common language for browsers and developers to describe animations on DOM elements. To get more information on the concepts behind the API and how to use it, read <a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Using the Web Animations API</a>.</p>
+
+<h2 id="Web_Animations_interfaces">Web Animations interfaces</h2>
+
+<dl>
+ <dt>{{domxref("Animation")}}</dt>
+ <dd>Provides playback controls and a timeline for an animation node or source. Can take an object created with the {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} constructor.</dd>
+ <dt>{{domxref("KeyframeEffect")}}</dt>
+ <dd>Describes sets of animatable properties and values, called <strong>keyframes </strong>and their <a href="/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options">timing options</a>. These can then be played using the {{domxref("Animation.Animation", "Animation()")}} constructor.</dd>
+ <dt>{{domxref("AnimationTimeline")}}</dt>
+ <dd>Represents the timeline of animation. This interface exists to define timeline features (inherited by {{domxref("DocumentTimeline")}} and future timeline objects) and is not itself accessed by developers.</dd>
+ <dt>{{domxref("AnimationEvent")}}</dt>
+ <dd>Actually part of CSS Animations.</dd>
+ <dt>{{domxref("DocumentTimeline")}}</dt>
+ <dd>Represents animation timelines, including the default document timeline (accessed using the {{domxref("Document.timeline")}} property).</dd>
+ <dt>{{domxref("EffectTiming")}}</dt>
+ <dd>{{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly()")}}, and {{domxref("KeyframeEffect.KeyframeEffect()")}} all accept an optional dictionary object of timing properties.</dd>
+</dl>
+
+<h2 id="Extensions_to_other_interfaces">Extensions to other interfaces</h2>
+
+<p>The Web Animations API adds some new features to {{domxref("document")}} and {{domxref("element")}}.</p>
+
+<h3 id="Extensions_to_the_Document_interface">Extensions to the <code>Document</code> interface</h3>
+
+<dl>
+ <dt>{{domxref("document.timeline")}}</dt>
+ <dd>The <code>DocumentTimeline</code> object representing the default document timeline.</dd>
+ <dt>{{domxref("document.getAnimations()")}}</dt>
+ <dd>Returns an Array of {{domxref("Animation")}} objects currently in effect on elements in the <code>document</code>.</dd>
+ <dt>
+ <h3 id="Extensions_to_the_Element_interface">Extensions to the <code>Element</code> interface</h3>
+ </dt>
+ <dt>{{domxref("Element.animate()")}}</dt>
+ <dd>A shortcut method for creating and playing an animation on an element. It returns the created {{domxref("Animation")}} object instance.</dd>
+ <dt>{{domxref("Element.getAnimations()")}}</dt>
+ <dd>Returns an Array of {{domxref("Animation")}} objects currently affecting an element or which are scheduled to do so in future.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('Web Animations')}}</td>
+ <td>{{Spec2('Web Animations')}}</td>
+ <td>Initial definition</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Using the Web Animations API</a></li>
+ <li><a href="https://mozdevs.github.io/Animation-examples/">Web Animations demos</a></li>
+ <li><a href="https://github.com/web-animations/web-animations-js">Polyfill</a></li>
+ <li>Firefox's current implementation: <a href="https://birtles.github.io/areweanimatedyet/">AreWeAnimatedYet</a></li>
+ <li>
+ <p><a href="http://codepen.io/danwilson/pen/xGBKVq">Browser support test</a></p>
+ </li>
+</ul>
diff --git a/files/pt-br/web/api/web_animations_api/usando_a_web_animations_api/index.html b/files/pt-br/web/api/web_animations_api/usando_a_web_animations_api/index.html
new file mode 100644
index 0000000000..2743f68d65
--- /dev/null
+++ b/files/pt-br/web/api/web_animations_api/usando_a_web_animations_api/index.html
@@ -0,0 +1,358 @@
+---
+title: Usando a Web Animations API
+slug: Web/API/Web_Animations_API/Usando_a_Web_Animations_API
+tags:
+ - Alice
+ - Animação
+ - CSS
+ - Guía
+ - Iniciante
+ - JavaScript
+ - Timing
+ - Tutorial
+ - animar
+ - duration
+ - keyframes
+ - pausar
+ - pause
+ - play
+ - quadro-chave
+ - reverse
+ - web animations api
+translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API
+---
+<p>{{DefaultAPISidebar("Web Animations")}}</p>
+
+<p class="summary">A Web Animations API nos possibilita criar animações e controlar sua reprodução pelo JavaScript. Esse artigo vai te demonstrar esses conceitos com demonstrações e tutoriais com o temática de Alice no País das Maravilhas.</p>
+
+<h2 id="Conhecendo_a_Web_Animations_API">Conhecendo a Web Animations API</h2>
+
+<p>A <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> abre a engine de animação do browser para os desenvolvedores manipularem via JavaScript. Esta API foi construída para se basear nas implementações das <a href="/en-US/docs/Web/CSS/CSS_Animations">Animações CSS</a> e <a href="/en-US/docs/Web/CSS/CSS_Transitions">Transições CSS</a>, e deixam a porta aberta para futuros efeitos de animação. É um dos métodos mais performáticos para se animar na Web, permitindo que o browser faça internamente suas próprias otimizações, sem precisar depender de hacks, coerções ou {{domxref("Window.requestAnimationFrame()")}}.</p>
+
+<p>Com a Web Animations API, podemos transferir as animações interativas das folhas de estilo para o JavaScript, separando comportamento de apresentação. Não vamos precisar mais depender de técnicas muito dependentes do DOM como propriedades do CSS e escopo de classes para controlar a direção da reprodução. E diferente de CSS puro e declarativo, JavaScript também te possibilita definir dinâmicamente valores: de propriedades à duração. Para criar bibilotecas de animação à criar animações interativas, a Web Animations API pode ser a ferramenta perfeita para o trabalho. Vamos ver o que ela pode fazer!</p>
+
+<h2 id="Suporte_de_Navegadores">Suporte de Navegadores</h2>
+
+<p>O suporte básico para as funcionalidades da Web Animations API discutidas neste artigo estão disponíveis no Firefox 48+, Chrome 36+ e Safari 13.1+. Também existe um <a href="https://github.com/web-animations/web-animations-js">polyfill prático</a> que verifica o suporte e adiciona as funcionalidades onde for necessário.</p>
+
+<h2 id="Escrevendo_Animações_CSS_com_a_Web_Animations_API">Escrevendo Animações CSS com a Web Animations API</h2>
+
+<p>Uma das maneiras mais familiares de abordar a Web Animations API é começar com algo que boa parte dos desenvolvedores web já utilizaram antes: Animações CSS. Animações CSS tem uma sintaxe familiar que funciona bem para nossa demonstração.</p>
+
+<h3 id="A_versão_CSS">A versão CSS</h3>
+
+<p>Aqui temos uma animação escrita com CSS mostrando Alice caindo no buraco de coelho que leva ao País das Maravilhas (veja o <a href="http://codepen.io/rachelnabors/pen/QyOqqW">código completo no Codepen</a>):</p>
+
+<p><a href="http://codepen.io/rachelnabors/pen/rxpmJL"><img alt="Alice Tumbling down the rabbit's hole." src="https://mdn.mozillademos.org/files/13843/tumbling-alice_optimized.gif" style="display: block; height: 374px; margin-left: auto; margin-right: auto; width: 700px;"></a></p>
+
+<p>Perceba que o fundo se mexe, a Alice gira e sua cor muda em sincronia com o giro. Nós vamos focar somente na Alice para este tutorial. Segue a versão simplificada do CSS que controla a animação da Alice:</p>
+
+<pre class="brush: css notranslate">#alice {
+ animation: aliceTumbling infinite 3s linear;
+}
+
+@keyframes aliceTumbling {
+ 0% {
+ color: #000;
+ transform: rotate(0) translate3D(-50%, -50%, 0);
+ }
+ 30% {
+ color: #431236;
+ }
+ 100% {
+ color: #000;
+ transform: rotate(360deg) translate3D(-50%, -50%, 0);
+ }
+}</pre>
+
+<p>Isso muda a cor da Alice e a rotação do `transform` por 3 segundos em um ritmo constante (linear) e se repete infinitamente. No bloco do <a href="/en-US/docs/Web/CSS/@keyframes">@keyframes</a> podemos ver que em 30% de cada repetição (por volta dos 900ms), a cor da Alice muda de preto para um vinho, e volta para o preto no final do loop.</p>
+
+<h3 id="Mudando_para_o_JavaScript">Mudando para o JavaScript</h3>
+
+<p>Agora vamos tentar criar a mesma animação usando a Web Animations API.</p>
+
+<h4 id="Representando_keyframes">Representando keyframes</h4>
+
+<p>A primeira coisa que precisamos fazer é criar um <a href="/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats">Objeto Keyframe</a> correspondente ao nosso bloco <a href="/en-US/docs/Web/CSS/@keyframes">@keyframes</a> do CSS:</p>
+
+<pre class="brush: js notranslate">var aliceTumbling = [
+ { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
+ { color: '#431236', offset: 0.3},
+ { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
+];</pre>
+
+<p>Aqui estávamos utilizando uma array contendo múltiplos objetos. Cada objeto representa uma chave do CSS original. Contudo, diferente do CSS, a Web Animations API não precisa informar explicitamente as porcentagens temporais para cada chave, o JS automaticamente divide a animação em partes iguais baseado no número de chaves que você forneceu. Isso significa que um objeto Keyframe com três chaves vai reproduzir a chave do meio em 50% do tempo de cada loop, exceto se for definido o contrário.</p>
+
+<p>Quando queremos explicitamente definir um timing diferente para essas outras chaves, podemos especificar um offset diretamente no objeto, separado do resto da declaração por uma vírgula. No exemplo acima, para definir que a cor da Alice muda em 30% do tempo (e não 50%), nós definiremos como <code>offset: 0.3</code>.</p>
+
+<p>Atualmente, devem ser definidos pelo menos dois keyframes (representando o início e fim de estado das sequências de animação). Se a sua lista de keyframes somente tem uma entrada, {{domxref("Element.animate()")}} pode disparar uma exceção <code>NotSupportedErro</code> em alguns browsers até eles serem atualizados.</p>
+
+<p>Então recapitulando: as chaves são espaçadas igualmente por padrão, exceto se você definir um offset para uma chave. Útil, não?</p>
+
+<h4 id="Representando_propriedades_temporais">Representando propriedades temporais</h4>
+
+<p>Nós precisamos criar também um objeto de propriedades temporais (um objeto {{domxref("AnimationEffectTimingProperties")}}) correspondente aos valores da animação da Alice:</p>
+
+<pre class="brush: js notranslate">var aliceTiming = {
+ duration: 3000,
+ iterations: Infinity
+}</pre>
+
+<p>Você pode notar algumas diferenças aqui comparando com os valores equivalentes representados no CSS:</p>
+
+<ul>
+ <li>A propriedade <code>duration</code> está em milisegundos (<code>3000</code>, não <code>3s</code>). Assim como {{domxref("WindowTimers.setTimeout()")}} e {{domxref("Window.requestAnimationFrame()")}}, a Web Animations API somente aceita millisegundos.</li>
+ <li>A outra diferença é o uso de <code>iterations</code> no lugar de <code>iteration-count</code>.</li>
+</ul>
+
+<div class="note">
+<p>Existem algumas pequenas diferenças de terminologia entre o CSS Animations e o Web Animations. Por exemplo, Web Animations não usa a string <code>"infinite"</code>, e sim a keyword JavaScript <code>Infinity</code>. E no lugar de <code>timing-function</code>, usamos <code>easing</code>. Não estamos citando um valor de <code>easing</code> aqui pois, diferente das Animações CSS onde o valor padrão do <a href="/en-US/docs/Web/CSS/animation-timing-function">animation-timing-function</a> é <code>ease</code>, na Web Animations API o padrão é <code>linear</code> — o que nós já queremos para a animação da Alice.</p>
+</div>
+
+<h4 id="Juntando_as_peças">Juntando as peças</h4>
+
+<p>Agora vamos juntar o que já fizemos com o método {{domxref("Element.animate()")}}:</p>
+
+<pre class="brush: js notranslate">document.getElementById("alice").animate(
+ aliceTumbling,
+ aliceTiming
+)</pre>
+
+<p>E pronto: a animação começa a tocar (veja a <a href="http://codepen.io/rachelnabors/pen/rxpmJL">versão final no Codepen</a>).</p>
+
+<p>O método <code>animate()</code> pode ser chamado em qualquer elemento do DOM que pode ser animado com CSS. E pode ser escrito de algumas maneiras. Ao invés de criar objetos para os keyframes e propriedades temporais, podemos passar seus valores diretamentes, tipo:</p>
+
+<pre class="brush: js notranslate">document.getElementById("alice").animate(
+ [
+ { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
+ { color: '#431236', offset: 0.3},
+ { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
+ ], {
+ duration: 3000,
+ iterations: Infinity
+ }
+);</pre>
+
+<p>E se nós precisarmos somente especificar a duração da animação e não suas iterações (por padrão, a animação roda uma ), podemos passar só os milisegundos após o array:</p>
+
+<pre class="brush: js notranslate">document.getElementById("alice").animate(
+ [
+ { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
+ { color: '#431236', offset: 0.3},
+ { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
+ ], 3000);</pre>
+
+<h2 id="Controlando_a_reprodução_com_play_pause_reverse_e_updatePlaybackRate">Controlando a reprodução com play(), pause(), reverse() e updatePlaybackRate()</h2>
+
+<p>Por mais que possamos escrever Animações CSS utilizando a Web Animations API, a API realmente mostra seu potencial quando precisamos manipular a reprodução da animação. A Web Animations API fornece vários métodos úteis para controlar a reprodução. Vamos dar uma olhada em como pausar e tocar animações no jogo da Alice Crescendo/Encolhendo (confira o <a href="http://codepen.io/rachelnabors/pen/PNYGZQ">código completo no Codepen</a>):</p>
+
+<p><a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010"><img alt="Playing the growing and shrinking game with Alice." src="https://mdn.mozillademos.org/files/13845/growing-shrinking_article_optimized.gif" style="display: block; height: 374px; margin-left: auto; margin-right: auto; width: 700px;"></a></p>
+
+<p>Nesse jogo, Alice tem uma animação que a encolhe ou aumenta seu tamanho, que controlamos por uma garrafa e um cupcake. Cada um tem sua própria animação.</p>
+
+<h3 id="Pausando_e_tocando_animações">Pausando e tocando animações</h3>
+
+<p>Vamos falar sobre a animação da Alice depois, mas por enquanto, vamos dissecar esta animação do cupcake.</p>
+
+<pre class="brush: js notranslate">var nommingCake = document.getElementById('eat-me_sprite').animate(
+[
+ { transform: 'translateY(0)' },
+ { transform: 'translateY(-80%)' }
+], {
+ fill: 'forwards',
+ easing: 'steps(4, end)',
+ duration: aliceChange.effect.timing.duration / 2
+});</pre>
+
+<p>O método {{domxref("Element.animate()")}} vai rodar imediatamente depois de ser chamado. Para evitar que o bolinho se coma sozinho antes da interação do usuário, chamamos o {{domxref("Animation.pause()")}} imediatamente depois de criar a animação:</p>
+
+<pre class="brush: js notranslate">nommingCake.pause();</pre>
+
+<p>Agora nós podemos usar o método {{domxref("Animation.play()")}} para rodar assim que for o momento:</p>
+
+<pre class="brush: js notranslate">nommingCake.play();</pre>
+
+<p>Especificamente, nós queremos linka-lo à animação da Alice, para ela crescer assim que o cupcake é mordido. Podemos fazer isso com a seguinte função:</p>
+
+<pre class="brush: js notranslate">var growAlice = function() {
+
+ // Play Alice's animation.
+ aliceChange.play();
+
+ // Play the cake's animation.
+ nommingCake.play();
+
+}</pre>
+
+<p>Quando o usuário clicar ou pressionar seu dedo no bolinho em uma tela de toque, podemos chamar a função <code>growAlice</code> para fazer todas as animações tocarem:</p>
+
+<pre class="brush: js notranslate">cake.addEventListener("mousedown", growAlice, false);
+cake.addEventListener("touchstart", growAlice, false);</pre>
+
+<h3 id="Outros_métodos_úteis">Outros métodos úteis</h3>
+
+<ul>
+ <li>{{domxref("Animation.finish()")}} pula para o final da animação.</li>
+ <li>{{domxref("Animation.cancel()")}} aborta a animação e cancela seus efeitos.</li>
+ <li>{{domxref("Animation.reverse()")}} define o ({{domxref("Animation.playbackRate")}}) para um valor negativo, então roda ao contrário</li>
+</ul>
+
+<p>Vamos dar uma olhada primeiro no método <code>playbackRate</code> — um valor negativo vai fazer a animação tocar ao contrário. Quando Alice bebe da garrafa, ela encolhe. Isso porque a garrafa muda o <code>playbackRate</code> da animação de 1 para -1:</p>
+
+<pre class="brush: js notranslate">var shrinkAlice = function() {
+ aliceChange.playbackRate = -1;
+ aliceChange.play();
+}
+
+bottle.addEventListener("mousedown", shrinkAlice, false);
+bottle.addEventListener("touchstart", shrinkAlice, false);</pre>
+
+<p>Em <a href="https://en.wikipedia.org/wiki/Through_the_Looking-Glass">Alice Através do Espelho</a>, Alice viaja para um mundo onde ela deve correr para se manter no lugar — e correr com o dobro de velocidade para avançar! No exemplo da Corrida da Rainha Vermelha, Alice e a Rainha Vermelha estão correndo para se manter no lugar (veja o <a href="http://codepen.io/rachelnabors/pen/PNGGaV">código completo no Codepen</a>):</p>
+
+<p><a href="http://codepen.io/rachelnabors/pen/PNGGaV"><img alt="Alice and the Red Queen race to get to the next square in this game." src="https://mdn.mozillademos.org/files/13847/red-queen-race_optimized.gif" style="display: block; height: 342px; margin-left: auto; margin-right: auto; width: 640px;"></a></p>
+
+<p>Já que crianças pequenas se cansam facilmente, diferente de peças de xadrez autônomas, Alice está constantemente desacelerando. Nós podemos fazer isso definindo uma queda no <code>playbackRate</code> da animação dela. Usamos o <code>updatePlaybackRate()</code> no lugar de definir manualmente o playbackRate, já que isso produz uma atualização mais suave:</p>
+
+<pre class="brush: js notranslate">setInterval( function() {
+
+ // Make sure the playback rate never falls below .4
+ if (redQueen_alice.playbackRate &gt; .4) {
+ redQueen_alice.updatePlaybackRate(redQueen_alice.playbackRate * .9);
+ }
+
+}, 3000);</pre>
+
+<p>Mas impulsioná-las clicando ou tocando na tela aumenta a velocidade delas por multiplicar o playbackRate:</p>
+
+<pre class="brush: js notranslate">var goFaster = function() {
+ redQueen_alice.updatePlaybackRate(redQueen_alice.playbackRate * 1.1);
+}
+
+document.addEventListener("click", goFaster);
+document.addEventListener("touchstart", goFaster);</pre>
+
+<p>Os elementos do fundo também tem <code>playbackRate</code>s que também são afetados pelo clique ou toque na tela. O que acontece quando você faz Alice e a Rainha Vermelha correrem com o dobro da velocidade? O que acontece quando você as deixa desacelerar?</p>
+
+<h2 id="Extraindo_informação_das_animações">Extraindo informação das animações</h2>
+
+<p>Imagine outras maneiras de utilizar o playbackRate, como melhorar a acessibilidade para usuários com disfunções vestibulares permitindo que eles desacelerem as animações do site todo. Isso é impossível de fazer via CSS sem recalcular todas as regras, mas com a Web Animations API, podemos utilizar o método {{domxref("document.getAnimations()")}} para iterar todas animações de uma página e dividir pela metade seu <code>playbackRate</code>, como por exemplo:</p>
+
+<pre class="brush: js notranslate">document.getAnimations().forEach(
+ function (animation) {
+ animation.updatePlaybackRate(animation.playbackRate * .5);
+ }
+);</pre>
+
+<p>Com a Web Animations API, você só precisa mudar uma simples propriedade!</p>
+
+<p>Outra coisa que é difícil de fazer somente com Animações CSS é criar dependências de valores fornecidos por outras animações. Por exemplo, no logo Aumentando e Encolhendo Alice, você pode ter notado algo estranho sobre a duração do bolinho:</p>
+
+<pre class="brush: js notranslate">duration: aliceChange.effect.getComputedTiming().duration / 2</pre>
+
+<p>Para entender o que está acontecendo, vamos dar uma olhada na animação da Alice:</p>
+
+<pre class="brush: js notranslate">var aliceChange = document.getElementById('alice').animate(
+ [
+ { transform: 'translate(-50%, -50%) scale(.5)' },
+ { transform: 'translate(-50%, -50%) scale(2)' }
+ ], {
+ duration: 8000,
+ easing: 'ease-in-out',
+ fill: 'both'
+ });</pre>
+
+<p>A animação da Alice a fazia ir de metade de seu tamanho para o dobro em 8 segundos. Então nós a pausamos:</p>
+
+<pre class="brush: js notranslate">aliceChange.pause();</pre>
+
+<p>Se pausassemos no início da animação, ela começaria com metade de seu tamanho original, como se já tivesse bebido a garrafa toda! Então nós precisamos definir o estado inicial da animação no meio. Podemos fazer isso definindo o {{domxref("Animation.currentTime")}} para 4 segundos, como no exemplo abaixo:</p>
+
+<pre class="brush: js notranslate">aliceChange.currentTime = 4000;</pre>
+
+<p>Mas enquanto trabalhamos nessa animação, vamos mudar bastante a duração da Alice. Não seria melhor definir essa <code>currentTime</code> dinamicamente? Assim não precisariamos fazer duas atualizações de uma vez só. Podemos fazer isso referenciando a propriedade {{domxref("Animation.effect")}}, que retorna um objeto que contém todos os detalhes sobre o(s) efeito(s) ativos na Alice:</p>
+
+<pre class="brush: js notranslate">aliceChange.currentTime = aliceChange.effect.getComputedTiming().duration / 2;</pre>
+
+<p>O <code>effect</code> nos permite acessar os keyframes e propriedades temporais da animação — <code>aliceChange.effect.getComputedTiming()</code> aponta para o objeto timing da Alice (cujo tipo é {{domxref("ComputedEffectTiming")}}) — que contem o {{domxref("ComputedEffectTiming.duration")}} dela. Podemos dividir sua duração pela metade para definir a metade da animação para a linha do tempo da animação da Alice, assim ela começaria com o tamanho normal. Então nós podemos reverter e tocar a animação dela em qualquer direção para encolher ou aumentar seu tamanho!</p>
+
+<p>E nós podemos fazer a mesma coisa quando definimos as durações da garrafa e do bolinho:</p>
+
+<pre class="brush: js notranslate">var drinking = document.getElementById('liquid').animate(
+[
+ { height: '100%' },
+ { height: '0' }
+], {
+ fill: 'forwards',
+ duration: aliceChange.effect.getComputedTiming().duration / 2
+});
+drinking.pause();</pre>
+
+<p>Agora todas as três animações estão ligadas por apenas um <code>duration</code>, que pode ser modificado facilmente em um só lugar do código.</p>
+
+<p>Nós também podemos utilizar a Web Animations API para descobrir o quanto da linha do tempo já foi percorrido. O jogo acaba quando o seu bolinho acaba ou você esvazia a garrafa. A vinheta que é apresentada aos jogadores depende do quão longe a Alice estava em sua animação, seja ficando grande demais pra caber na portinha ou pequena demais pra não conseguir mais alcançar a chave para abrir a porta. Podemos descobrir se ela está nesses extremos pegando o <code>currentTime</code> da sua animação e dividir pelo <code>activeDuration</code>:</p>
+
+<pre class="brush: js notranslate">var endGame = function() {
+
+ // get Alice's timeline's playhead location
+ var alicePlayhead = aliceChange.currentTime;
+ var aliceTimeline = aliceChange.effect.getComputedTiming().activeDuration;
+
+ // stops Alice's and other animations
+ stopPlayingAlice();
+
+ // depending on which third it falls into
+ var aliceHeight = alicePlayhead / aliceTimeline;
+
+ if (aliceHeight &lt;= .333){
+ // Alice got smaller!
+ ...
+
+ } else if (aliceHeight &gt;= .666) {
+ // Alice got bigger!
+ ...
+
+ } else {
+ // Alice didn't change significantly
+ ...
+
+ }
+}
+</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> <code>getAnimations()</code> e <code>effect</code> não estão disponíveis em todos os browsers no momento em que este artigo foi escrito, mas o polyfill possibilita utilizá-los agora.</p>
+</div>
+
+<h2 id="Callbacks_e_promises">Callbacks e promises</h2>
+
+<p>Animações e Transições CSS tem seus event listeners próprios, que também são possíveis com a Web Animations API:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/API/Animation/onfinish">onfinish</a></code> é o manipulador de eventos para o evento <code>finish</code> e pode ser disparado manualmente com <code><a href="/en-US/docs/Web/API/Animation/finish">finish()</a></code>.</li>
+ <li><code><a href="/en-US/docs/Web/API/Animation/oncancel">oncancel</a></code> é o manipulador de eventos para o evento <code>cancel</code> e pode ser disparado manualmente com <code><a href="/en-US/docs/Web/API/Animation/cancel">cancel()</a></code>.</li>
+</ul>
+
+<p>Aqui nós definimos os callbacks para o bolinho, a garrafa e para Alice para disparar a função <code>endGame</code>:</p>
+
+<pre class="brush: js notranslate">// When the cake or bottle runs out...
+nommingCake.onfinish = endGame;
+drinking.onfinish = endGame;
+
+// ...or Alice reaches the end of her animation
+aliceChange.onfinish = endGame;
+
+</pre>
+
+<p>Ainda melhor, a Web Animations API também fornece uma promise <code><a href="/en-US/docs/Web/API/Animation/finished">finished</a></code> que será resolvida quando a animação é completada, e rejeitada se for cancelada.</p>
+
+<h2 id="Conclusão">Conclusão</h2>
+
+<p>Essas são as funcionalidades básicas da Web Animations API, a maioria delas já estão sendo suportadas pelas últimas versões do Chrome, Firefox e Safari. Agora você está pronto pra "cair na toca do coelho" de animar utilizando o browser e pronto pra escrever e experimentar com sua própria animação! Se você está utilizando a API e deseja compartilha, tente usar a hashtag #WAAPI. Nós estaremos de olho e vamos escrever mais tutoriais para cobrir funcionalidades futuras assim que o suporte aumentar!</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li class="post__title">A <a href="http://codepen.io/collection/bpEza/">coleção completa de demos de Alice no País das Maravilhas</a> no CodePen para você brincar, compartilhar e editar</li>
+ <li class="post__title"><a href="https://hacks.mozilla.org/2016/08/animating-like-you-just-dont-care-with-element-animate/">Animating like you just don’t care with Element.animate</a> (em inglês) — Um ótimo artigo para se ler que explica mais sobre a Web Animations API por baixo dos panos, e por que ela tem uma performance melhor do que os outros métodos de animação web</li>
+ <li class="post__title"><a href="https://github.com/web-animations/web-animations-js">web-animations-js</a> — O polyfill da Web Animations API</li>
+</ul>