Resumo

  • O primeiro rascunho público do W3C, em junho de 2013, reuniu conceitos comuns de tempo e efeito das transições CSS, animações CSS e animações SVG.
  • O texto de 2014 apresentou uma interface para criar animações por script e executá-las no navegador. Em 2023, o modelo detalhava tempo corrente, pausa, reversão, término e cancelamento.

Nos bastidores há três cronômetros. Um empurra o gráfico para dentro da página, outro repete uma sequência de quadros, o terceiro move uma linha vetorial. A leitora pergunta se pode voltar ao momento em que a linha alcançou um ponto importante. A editora agora precisa alinhar os três relógios. Poderia anexar um temporizador JavaScript a cada figura e desenhar todos os passos intermediários. Aí passaria mais tempo regulando ponteiros do que explicando o assunto.

O primeiro rascunho público de Web Animations, de 25 de junho de 2013, identificou o atrito: CSS Transitions, CSS Animations e SVG fazem coisas parecidas, mas descrevem seus mecanismos com termos distintos. A proposta criou um modelo abstrato para o que compartilham. Uma linha do tempo fornece a posição, um efeito calcula o valor intermediário e efeitos podem se combinar. O editor decide a cena; o navegador ganha uma gramática consistente para fazê-la progredir.

O rascunho de 5 de junho de 2014 aproximou esse modelo de uma interface de programação. O script cria a animação; depois de criada, o agente de usuário a executa. A página não precisa manter um callback que calcula e pinta cada quadro por conta própria. O documento também tratou da convivência com requestAnimationFrame, inclusive valores de tempo e ordem de execução. Uma equipe escreve a intenção do movimento; o navegador cuida do relógio que o realiza.

Uma pausa no meio do caminho serve a algo concreto. O leitor para um diagrama de rede para ler a legenda de uma seta. Uma professora inverte a direção para mostrar a origem de um pacote. O tempo atual e o estado de reprodução passam a ser partes manipuláveis da explicação. Sem essa linguagem comum, cada técnica de animação exigiria seu próprio painel e seus próprios acertos de relógio.

O rascunho Level 1 de 11 de outubro de 2018 seguiu definindo papéis distintos para linha do tempo, animação e efeito. O efeito diz o que muda; a linha do tempo fornece o progresso; o estado indica espera, execução, pausa ou conclusão. Alterar velocidade ou sentido depende dessa estrutura, mesmo quando o desenho permanece igual. A simplicidade do botão de voltar repousa sobre uma pergunta técnica respondida com precisão: onde está o “agora”?

O texto de 5 de junho de 2023 detalha as operações do painel: definir tempo corrente e inicial, tocar, pausar, finalizar, cancelar, mudar a taxa de reprodução e inverter o sentido. Também trata de estados e promessas ligados à preparação e ao fim. Um pedido de pausa pode chegar antes de a animação começar de fato; uma inversão pode acontecer quase no último quadro. O navegador precisa ordenar essas mudanças para mostrar exatamente a imagem correspondente, sem transformar o retorno em um salto.

A história de publicações do W3C marca as etapas de 2013, 2014, 2018 e 2023. A pergunta central aqui é como movimentos de famílias diferentes compartilham um modelo de tempo e como o script pode dirigir a reprodução. Fazer da rolagem uma fonte de progresso é outra história. A editora ainda decide qual movimento ajuda a compreender e quando a leitora precisa rever uma etapa. O navegador mantém a máquina sincronizada; os três cronômetros dos bastidores podem descansar.