From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/api/animation/cancel/index.html | 120 +++++++++++++++ .../pt-br/web/api/animation/currenttime/index.html | 112 ++++++++++++++ files/pt-br/web/api/animation/index.html | 171 +++++++++++++++++++++ files/pt-br/web/api/animation/playstate/index.html | 152 ++++++++++++++++++ 4 files changed, 555 insertions(+) create mode 100644 files/pt-br/web/api/animation/cancel/index.html create mode 100644 files/pt-br/web/api/animation/currenttime/index.html create mode 100644 files/pt-br/web/api/animation/index.html create mode 100644 files/pt-br/web/api/animation/playstate/index.html (limited to 'files/pt-br/web/api/animation') diff --git a/files/pt-br/web/api/animation/cancel/index.html b/files/pt-br/web/api/animation/cancel/index.html new file mode 100644 index 0000000000..ceb1b7cf6c --- /dev/null +++ b/files/pt-br/web/api/animation/cancel/index.html @@ -0,0 +1,120 @@ +--- +title: Animation.cancel() +slug: Web/API/Animation/cancel +translation_of: Web/API/Animation/cancel +--- +

{{ SeeCompatTable() }}{{ APIRef("Web Animations API") }}

+ +

O método Animation.cancel() da interface  {{domxref("Animation")}} , limpa todas as  {{domxref("KeyframeEffect", "keyframeEffects")}} geradas pela animação e aborta esta execução.

+ +
+

Quando uma animação é cancelada, os valores de {{domxref("Animation.startTime", "startTime")}} e {{domxref("Animation.currentTime", "currentTime")}} são definidos como null.

+
+ +

Sintaxe

+ +
+
// cancela animação
+animation.cancel();
+
+ +

Parametros

+ +

Nenhum.

+ +

Valor de retorno

+ +

Nenhum.

+ +
+
+ +

Exceptions

+ +

Se o método {{domxref("Animation.playState")}} da animação estiver executando quando a operação for cancelada, esta ação vai rejeitar a {{domxref("Animation.finished", "current finished promise")}} com a {{domxref("DOMException")}} nomeada AbortError.

+ +
+
+ +

Especificações

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-cancel', 'Animation.cancel()' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

Compatibilidade do navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatUnknown}}{{CompatGeckoDesktop(40)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{ CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/api/animation/currenttime/index.html b/files/pt-br/web/api/animation/currenttime/index.html new file mode 100644 index 0000000000..e5b7c25559 --- /dev/null +++ b/files/pt-br/web/api/animation/currenttime/index.html @@ -0,0 +1,112 @@ +--- +title: Animation.currentTime +slug: Web/API/Animation/currentTime +translation_of: Web/API/Animation/currentTime +--- +

{{APIRef("Web Animations")}}{{SeeCompatTable}}

+ +

A propriedade Animation.currentTime da Web Animations API retorna e altera o tempo atual da animação em milésimos de segundos, seja estando em execução ou pausada.

+ +

Se a animação não tem uma {{domxref("AnimationTimeline", "timeline")}}, está inativa, ou ainda não foi colocada em execução, o valor de retorno do currentTime será null. 

+ +

Sintaxe

+ +
vartempoAtual = Animation.currentTime;
+Animation.currentTime = novoTempo;
+ +

Valor

+ +

Um número que representará no tempo atual da animação em milésimos de segundos, ou null para desativar a animação.

+ +

Examples

+ +

No jogo Drink Me/Eat Me, O tamanho da Alice é animado e pode crescer ou diminuir. No início do jogo, o tamanho dela foi colocado entre os dois extremos do animation's currentTime no meio do KeyframeEffect's duration, desta maneira:

+ +
aliceChange.currentTime = aliceChange.effect.timing.duration / 2;
+ +

Outra forma mais genérica para encontrar o marco de 50% da animação pode ser feito da seguinte forma:

+ +
animation.currentTime =
+  animation.effect.getComputedTiming().delay +
+  animation.effect.getComputedTiming().activeDuration / 2;
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçõesStatusComentário
{{SpecName('Web Animations', '#dom-animation-currenttime', 'currentTime')}}{{Spec2("Web Animations")}} 
+ +

Compatibilidade de Navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(39.0)}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(39.0)}}{{CompatGeckoMobile(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(39.0)}}
+
+ +

[1] A Web Animations API está ativa por padrão apenas no Firefox Developer Edition e nas versões do Nightly. Você pode habilitá-la em versões beta configurando a preferência dom.animations-api.core.enabled para true, e também desativar em qualquer Firefox mudando esta mesma preferência para false.

+ +

Veja também

+ + diff --git a/files/pt-br/web/api/animation/index.html b/files/pt-br/web/api/animation/index.html new file mode 100644 index 0000000000..09d2f0091c --- /dev/null +++ b/files/pt-br/web/api/animation/index.html @@ -0,0 +1,171 @@ +--- +title: Animation +slug: Web/API/Animation +tags: + - API + - Animations + - Experimental + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web Animations + - waapi + - web animation api +translation_of: Web/API/Animation +--- +

{{ APIRef("Web Animations API") }}{{SeeCompatTable}}

+ +

A interface Animation da Web Animations API representa um único player de animação e fornece controles e uma linha do tempo (timeline) para um nó de animação ou recurso.

+ +

Construtor

+ +
+
{{domxref("Animation.Animation()", "Animation()")}}
+
Cria uma nova instância do objeto Animation.
+
+ +

Propriedades

+ +
+
{{domxref("Animation.currentTime")}}
+
O valor do tempo atual da animação, em milissegundos, esteja ela executando ou pausada. Se a animação não tem uma {{domxref("AnimationTimeline", "timeline")}}, está inativa ou ainda não foi executada, este valor é null.
+
+ +
+
{{domxref("Animation.effect")}}
+
Obtém e define o {{domxref("KeyframeEffect")}} associado a essa animação.
+
{{domxref("Animation.finished")}} {{readOnlyInline}}
+
Retorna a Primise de finalização atual para essa animação.
+
+ +
+
{{domxref("Animation.id")}}
+
Obtém e define a String usada para identificar a animação.
+
{{domxref("Animation.oncancel")}}
+
Obtém e define o manipulador para o evento cancel.
+
{{domxref("Animation.onfinish")}}
+
Obtém e define o manipulador para o evento finish.
+
{{domxref("Animation.playState")}} {{readOnlyInline}}
+
Retorna um valor enumerado descrevendo o estado de execução de uma animação.
+
+ +
+
{{domxref("Animation.playbackRate")}}
+
Obtém ou define a taxa de execução da animação.
+
+ +
+
{{domxref("Animation.ready")}} {{readOnlyInline}}
+
Retorna a promessa atual para quando essa animação estiver pronta.
+
+ +
+
{{domxref("Animation.startTime")}}
+
Obtém ou define o tempo agendado quando a execução de uma animação deve começar.
+
+ +
+
{{domxref("Animation.timeline")}}
+
Obtém ou define a {{domxref("AnimationTimeline", "timeline")}} associada a essa animação.
+
+ +

Métodos

+ +
+
{{domxref("Animation.cancel()")}}
+
Limpa todos os {{domxref("KeyframeEffect", "keyframeEffects")}} causados por essa animação e aborta sua execução.
+
+ +
+
{{domxref("Animation.finish()")}}
+
Vai até um dos extremos dessa animação, dependendo se ela está executando ou retornando.
+
+ +
+
{{domxref("Animation.pause()")}}
+
Suspende a execução de uma animação.
+
+ +
+
{{domxref("Animation.play()")}}
+
Inicia ou continua a execução de uma animação ou a recomeça se ela tiver terminado anteriormente.
+
+ +
+
{{domxref("Animation.reverse()")}}
+
Move a animação ao contrário, parando no início da animação.
+
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
{{SpecName("Web Animations", "#the-animation-interface", "Animation")}}{{Spec2("Web Animations")}}Definição inicial
+ +

Compatibilidade com navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico{{CompatChrome(39.0)}} [1]{{CompatGeckoDesktop(40.0)}} [2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{CompatVersionUnknown}} [1]{{CompatGeckoDesktop(40.0)}} [2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Implementado como AnimationPlayer (nome da interface em uma versão primária da especificação).

+ +

[2] Anteriormente ao Firefox 40, estava disponível como AnimationPlayer. Em ambos os casos, é necessário definir a preferência dom.animations-api.core.enabled para poder usá-la.

+ +

 

diff --git a/files/pt-br/web/api/animation/playstate/index.html b/files/pt-br/web/api/animation/playstate/index.html new file mode 100644 index 0000000000..a31d8d7c64 --- /dev/null +++ b/files/pt-br/web/api/animation/playstate/index.html @@ -0,0 +1,152 @@ +--- +title: Animation.playState +slug: Web/API/Animation/playState +translation_of: Web/API/Animation/playState +--- +

{{APIRef("Web Animations")}}{{SeeCompatTable}}

+ +


+ A propriedade Animation.playState do Web Animations API retorna e altera um valor enumerado que descreve o estado de reprodução da animação.

+ +
+

Essa propriedade é apenas de leitura para Animações CSS e Transições.

+
+ +

Sintaxe

+ +
var estadoAtualDaReproducao = Animation.playState;
+
+Animation.playState =novoEstado;
+
+ +

Valor

+ +
+
idle
+
O tempo atual da animação não está acertado e não há tarefas pendentes.
+
pending
+
A animação está aguardando a realização de algumas tarefas para ser completada.
+
running
+
A animação está rodando.
+
paused
+
A animação está parada e a propriedade {{domxref("Animation.currentTime")}} não está sendo atualizada.
+
finished
+
A animação alcançou um de seus finais e a propriedade {{domxref("Animation.currentTime")}} não está sendo atualizada.
+
+ +

Exemplo

+ +

No jogo Growing/Shrinking Alice Game , os jogadores podem chegar ao final com a Alice chorando em uma poça de lágrimas. No jogo, por razões de performance, as lágrimas só são animadas quando estão visiveis. Então elas devem ficar pausadas enquanto a animação ocorre, como no exemplo:

+ +
// Configurando a animação das lágrimas
+
+tears.forEach(function(el) {
+  el.animate(
+    tearsFalling,
+    {
+      delay: getRandomMsRange(-1000, 1000), // aleatório para cada lágrima
+      duration: getRandomMsRange(2000, 6000), // aleatório para cada lágrima
+      iterations: Infinity,
+      easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
+    });
+  el.playState = 'paused';
+});
+
+
+// Rodar as lágrimas caindo quando o final precisa aparecer.
+
+tears.forEach(function(el) {
+  el.playState = 'playing';
+});
+
+
+// Reseta a animação e coloca o estado em pause.
+
+tears.forEach(function(el) {
+  el.playState = "paused";
+  el.currentTime = 0;
+});
+
+ +

Especificações

+ + + + + + + + + + + + + + +
EspecificaçõesStatusComentários
{{SpecName('Web Animations', '#play-state', 'playState')}}{{Spec2("Web Animations")}}Initial definition.
+ +

Compatibilidade de Navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(39.0)}} [1]{{CompatGeckoDesktop(48)}}[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatChrome(39.0)}} [1]{{CompatChrome(39.0)}} [1]{{CompatGeckoMobile(48)}}[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Antes do Chrome 50, este atributo retorna idle para animações que ainda não foram reproduzidas . A partir do Chrome 50, ele retorna paused.

+ +

[2] A Web Animations API está ativa por padrão apenas no Firefox Developer Edition e nas versões do Nightly. Você pode habilitá-la em versões beta configurando a preferência dom.animations-api.core.enabled para true, e também desativar em qualquer Firefox mudando esta mesma preferência para false.

+ +

Veja também

+ + -- cgit v1.2.3-54-g00ecf