Usando animações em seu aplicativo (HTML)

  • Artigo

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Use animações em seu aplicativo em JavaScript para ter uma experiência rápida e fluida, consistente com outros aplicativos do Windows. As animações fazem transições entre estados da interface do usuário, melhorando a resposta do aplicativo às ações do usuário. As animações dão dicas visuais importantes ao usuário, sem interromper sua operação ou distraí-lo.

Para baixar a amostra que exibe muitos dos conceitos abordados neste tópico, veja o exemplo de Biblioteca de Animação em HTML. Os exemplos de códigos neste tópico foram retirados da amostra.

Mapa: Como este tópico está relacionado aos outros? Veja:

Fontes de animações

Algumas animações são internas aos controles do Windows. Ao usar os controles, você inicia suas animações sem códigos adicionais. Você também tem a opção de usar a Biblioteca de Animação. Ao usá-la, você pode criar animações personalizadas para seu aplicativo e manter a aparência do Windows.

  • Usando animações internas
  • Usando a Biblioteca de Animação

Usando animações internas

Algumas animações são fornecidas automaticamente como parte do Windows.

Animações do sistema do Windows

Algumas animações fornecidas pelo sistema valem para todos os aplicativos do Windows. Seu aplicativo não precisa fazer nada específico para conseguir essas animações. Mas tome cuidado com alguns pontos importantes. Falaremos deles aqui.

  • Inicialização do aplicativo
  • Alterações de rotação e redimensionamento
  • Entrada e saída do teclado virtual

Inicialização do aplicativo

A inicialização do aplicativo usa duas animações. A primeira mostra a inicialização do aplicativo entre sua seleção na tela inicial e a aparência de sua tela inicial. A segunda faz o fading cruzado da tela inicial e vai para a tela de fundo do aplicativo. Recomendamos que o aplicativo também execute sua própria animação para exibir a primeira página de conteúdo depois que a tela inicial desaparecer.

Alterações de rotação e redimensionamento

Quando seu aplicativo atualiza o layout devido a uma mudança de tamanho ou orientação, as animações do sistema tornam essa transição suave.

Entrada e saída do teclado virtual

O teclado virtual aparece automaticamente quando um controle de entrada de texto no aplicativo recebe foco. Por padrão, o conteúdo do aplicativo rola automaticamente para manter o controle de entrada visível na tela, se necessário. Seu aplicativo não precisa realizar ações especiais.

Controles do Windows e controles HTML

Os comandos a seguir incluem animações. Nós recomendamos que você use esses controles sempre que possível.

Além disso, ao usar controles comuns de formulários HTML, como botões, caixas de seleção e menus suspenso, você não precisa fornecer animações para responder a ações do usuário, como clicar ou focalizar. Esses controles já incluem todas as animações necessárias ou não necessitam de animações, pois usam mudança de cor ou outro indicador visual para fornecer resposta ao usuário.

O estilo de todos esses elementos é aplicado automaticamente por meio dos arquivos UI.js e WinJS CSS nos modelos de projeto do Microsoft Visual Studio.

Usando a Biblioteca de Animação

Você pode adicionar animações personalizadas ao aplicativo usando a Biblioteca de Animação. A Biblioteca de Animação é um pacote de animações que incorporam a personalidade do design de movimento no Windows e Windows Phone. Essas animações estão disponíveis para que os desenvolvedores as usem em seus aplicativos, por meio das funções que compõem o namespace WinJS.UI.Animation. Para saber mais sobre a Biblioteca de Animação e ver vídeos e orientações para cada animação, veja Animando sua interface do usuário.

Você deve fornecer animações próprias nos seguintes casos:

  • Para mover um controle inteiro
  • Para mudar o conteúdo do aplicativo
  • Para navegar entre páginas do aplicativo

Todas as animações fornecidas pela Biblioteca de Animação são implementadas usando animações CSS e transições CSS. As animações de Biblioteca de Animação animam as propriedades CSS "opacity" e "transform".

  • Usando os parâmetros element e offset em uma função da Biblioteca de Animação
  • Tipos de animação
  • Programando animações
  • Habilitando e desabilitando animações

Usando os parâmetros element e offset em uma função da Biblioteca de Animação

Muitas das funções da Biblioteca de Animação incluem os mesmos parâmetros, usados da mesma forma.

element

Muitas funções da Biblioteca de Animação usam um elemento DOM (Document Object Model) como destino da animação. Esse parâmetro pode ser expresso das seguintes formas:

  • Como o valor especial "undefined", o que significa que a animação não tem esse alvo
  • Como um objeto único
  • Como uma matriz (possivelmente vazia) em JavaScript de elementos
  • Como NodeList (por exemplo, o resultado de querySelectorAll)
  • Como HTMLCollection

deslocamento

O parâmetro offset faz parte das animações e transições de elementos que incluem uma tradução. Essas animações movem o elemento de sua posição de deslocamento para a final; ou da posição atual para a de deslocamento.

Algumas animações possuem deslocamentos recomendados, que você pode usar ao passar null ou undefined como argumento de deslocamento, ou ao omitir o argumento completamente. Sempre que possível, use os deslocamentos padrão. Isso trará os seguintes benefícios:

  • Melhor desempenho das animações
  • Espelhamento automático em aplicativos da direita para a esquerda
  • Distância de tradução recomendada para designers, ajustada automaticamente (em animações aplicáveis) quando o aplicativo é redimensionado.

A menos que você tenha uma exceção plausível relacionada ao design, essas animações devem sempre usar o deslocamento padrão:

Para outras animações da Biblioteca de Animação, o deslocamento pode ser específico do aplicativo, com base em sua interface do usuário. Todas as seguintes funções têm um deslocamento padrão que será usado se nenhum deslocamento específico for fornecido, mas normalmente você especificará um deslocamento com base no design do seu aplicativo.

É possível fornecer o parâmetro offset de várias formas:

  • Como o valor especial "undefined", que você pode especificar explicitamente na chamada ou implicitamente ao omitir o valor do parâmetro. O valor undefined indica que será usado o deslocamento padrão da animação.

  • Como um objeto único em JavaScript deste formulário:

    { top: string, left: string, rtlflip: true | false }

    Por exemplo:

    { top: "12px", left: "0px", rtlflip: true }

    O objeto deve ter propriedades chamadas "top" e "left", que representam o deslocamento aplicado no início da animação. Todas as unidades CSS válidas podem ser usadas para expressar o deslocamento. Nesse formulário, o deslocamento é aplicativo a todos os elementos envolvidos na animação.

    O parâmetro rtlflip alterna os valores para um alinhamento da direita para a esquerda. Ele afeta o parâmetro "left", mudando seu sinal. Por exemplo, 10 px vira -10px. Esse parâmetro é opcional e pode ser omitido. Quando isso é feito, o valor padrão é false.

  • Como uma matriz (possivelmente vazia) em JavaScript dos objetos {top: ..., left: ..., rtlflip: ...} abordados acima. Neste caso, cada objeto da matriz é aplicado a um elemento da animação, na ordem dada; o primeiro objeto é aplicado ao primeiro elemento, o segundo objeto ao segundo elemento, e assim por diante. Quando o número de elementos é maior do que o número de objetos na matriz, o último elemento da matriz é aplicado a todos os restantes. Normalmente, a única animação que precisa de uma matriz de registros de deslocamento é dragBetweenEnter. No caso de outras animações, geralmente é melhor passar apenas um registro de deslocamento, que será usado em todos os elementos.

O valor de retorno Promise

O valor de retorno de todas as animações de Biblioteca de Animação é um objeto Promise. O método done ou then desse objeto pode ser usado para acompanhar o momento de conclusão da animação. O objeto Promise também fornece um método cancel, por meio do qual você pode cancelar uma animação em execução.

Tipos de animação

As animações na Biblioteca de Animação têm três tipos: animação de elemento, transição de elemento ou transição de layout. Cada tipo tem um padrão de implementação diferente.

  • Animações de elementos
  • Transições de elementos
  • Transições de layout

Animações de elementos

As animações de elementos são implementadas como animações CSS. Elas não mudam o estado do elemento; são animações que ocorrem sobre o estado atual. Por exemplo, a animação showPanel é uma animação de elemento que desliza um painel (como um painel de tarefas) a partir da borda da tela. A animação showPanel anima a tradução do painel a partir de um deslocamento (fornecido pelo desenvolvedor) para a posição atual do elemento.

Para usar uma animação de elemento, é preciso definir o estado final desse elemento. No exemplo a seguir, o elemento myPanel já está em seu local final antes de ser mostrado, mas não fica visível. Para mostrar o painel, seu código define a opacidade do elemento do painel como 1 e aciona a animação. Enquanto essas etapas ocorrerem na mesma função, a mudança de opacidade não terá efeito até o início da animação. O painel aparece em sua posição de deslocamento e, por meio da animação, vai para a posição real.


                                                
myPanel.style.opacity = "1";
WinJS.UI.Animation.showPanel(myPanel, { top: "0px", left: "350px" });

Para ocultar o painel, há a reversão do processo. Primeiro, seu código deve chamar hidePanel, que anima o painel para a posição de deslocamento a partir de sua posição atual. Quando a animação é concluída, seu código define a opacidade como 0 para ocultar o elemento. Quando você não inclui a mudança de opacidade, o elemento é ajustado de volta para sua posição original ao fim da animação e continua visível na tela.


                                                
WinJS.UI.Animation.hidePanel(myPanel, { top: "0px", left: "350px" })
    .then(function () { myPanel.style.opacity = "0"; });

Veja quais são as animações de elementos na Biblioteca de Animação:

Função Descrição
showEdgeUI Desliza a interface do usuário baseada na borda para a exibição. Anima a tradução do elemento de destino para a sua posição atual a partir de um deslocamento.
hideEdgeUI Desliza a interface do usuário baseada na borda para fora da exibição. Anima a tradução do elemento de destino para um deslocamento a partir de sua posição atual.
showPanel Desliza grandes painéis baseados na borda para a exibição. Anima a tradução do elemento de destino para a sua posição atual a partir de um deslocamento.
hidePanel Desliza grandes painéis baseados na borda para fora da exibição. Anima a tradução do elemento de destino para um deslocamento a partir de sua posição atual.
showPopup Exibe a interface do usuário contextual sobre a exibição. Anima a opacidade para 1 e anima a tradução para a sua posição atual a partir de um deslocamento.
hidePopup Oculta a interface do usuário contextual. Anima a opacidade para 0.
updateBadge Atualiza uma notificação numérica. Anima a opacidade para 1 e anima a tradução para a sua posição atual a partir de um deslocamento.

 

Transições de elementos

As transições de elementos são implementadas como transições CSS. Elas mudam o estado de um elemento por meio da transição da propriedade CSS para o valor definido pela animação.

Muitas das transições de elementos da Biblioteca de Animação vêm como um par de animações que devem ser usadas juntas. A mudança de estado aplicada por uma animação no par é revertida pela outra animação. Por exemplo, a animação fadeIn faz a transição da opacidade do elemento para 1; já a animação fadeOut faz a transição da opacidade para 0.

Algumas animações da Biblioteca de Animação usam uma combinação de animações e transições de elementos. Por exemplo, a animação enterContent faz a transição da opacidade do elemento para 1 e, ao mesmo tempo, anima uma tradução para sua posição atual a partir de um deslocamento.

As animações na Biblioteca de Animação que usam apenas transições de elementos ou transições junto com animações de elementos são listadas aqui:

Função Descrição
fadeIn Mostra controles ou elementos transitórios. Faz a transição da opacidade para 1.
fadeOut Oculta controles ou elementos transitórios. Faz a transição da opacidade para 0.
enterContent Anima um elemento ou um conjunto de conteúdo na exibição. Faz a transição da opacidade para 1 e anima a tradução para a sua posição atual a partir de um deslocamento.
exitContent Anima um elemento ou um conjunto de conteúdo para fora da exibição. Faz a transição da opacidade para 0.
enterPage Anima todo o conteúdo de uma página da exibição. Faz a transição da opacidade para 1 e anima a tradução para a sua posição atual a partir de um deslocamento.
exitPage Anima todo o conteúdo de uma página para fora da exibição. Faz a transição da opacidade para 0.
crossFade Atualiza uma área de conteúdo. Faz a transição da opacidade para 1 no conteúdo de entrada e para 0 no conteúdo de saída.
pointerDown Fornece resposta visual quando o usuário toca ou clica em um bloco. Faz a transição da escala para um valor um pouco menor.
pointerUp Fornece resposta visual quando o usuário para de tocar ou clicar em um bloco. Restaura a escala a seu tamanho completo.
dragSourceStart Fornece resposta visual quando o usuário inicia uma operação de arrastar e soltar. Faz a transição da escala para um valor um pouco maior e reduz a opacidade. Esta animação também faz a transição da escala de elementos circundantes (afetados) para um valor um pouco menor.
dragSourceEnd Fornece resposta visual quando o usuário conclui uma operação de arrastar e soltar, soltando o objeto arrastado. Reverte as animações executadas por dragSourceStart.
dragBetweenEnter Fornece resposta visual de que os elementos sob o objeto arrastado no momento ficarão fora do caminho caso o objeto arrastado seja solto naquele ponto. Faz a transição da propriedade de transformação dos objetos afetados para um deslocamento.
dragBetweenLeave Fornece resposta visual de que um objeto arrastado saiu da área para arrastar e soltar, revertendo a animação executada por dragBetweenEnter.
swipeSelect Faz a transição de um bloco para um estado selecionado pelo gesto de passar o dedo. Faz a transição da opacidade do bloco para 0 ao mesmo tempo em que faz a transição do visual "selecionado" do deslocamento para 1.
swipeDeselect Faz a transição de um bloco para um estado com seleção anulada pelo gesto de passar o dedo. Faz a transição da opacidade do estado visual para 0 ao mesmo tempo em que faz a transição da opacidade do bloco original para 1.
swipeReveal Dá uma dica visual ao usuário de que um bloco permite a interação de passagem com o dedo. Faz a transição da tradução da posição atual para um deslocamento.
turnstileBackwardIn Gira um elemento no sentido horário na página.
turnstileBackwardOut Gira um elemento no sentido horário para fora da página.
turnstileForwardIn Gira um elemento no sentido anti-horário na página.
turnstileForwardOut Gira um elemento no sentido anti-horário para fora da página.
slideDown Desliza elementos para fora pela parte inferior da tela.
slideUp Desliza elementos para acima na exibição a partir da parte inferior da tela.
slideLeftIn Desliza elementos para dentro a partir do lado esquerdo da tela.
slideLeftOut Desliza elementos para fora pelo lado esquerdo da tela.
slideRightIn Desliza elementos para dentro a partir do lado direito da tela.
slideRightOut Desliza elementos para fora pelo lado direito da tela.
continuumBackwardIn Reduz uma página de entrada enquanto dimensiona, gira e converte um item de entrada.
continuumBackwardOut Dimensiona, gira e converte uma página de saída, uma vez que é removida.
continuumForwardIn Traz um item para a tela e amplia a página de entrada enquanto dimensiona, gira e converte o item de entrada.
continuumForwardOut Remove um item da tela, reduzindo a página de saída enquanto dimensiona, gira e converte o item de saída.

 

Transições de layout

As animações de transição de layout na Biblioteca de Animação são mais complexas que as animações de elementos ou de transições. Normalmente, as animações de transição de layout envolvem vários elementos e resultam em mudanças de layout. Porém, as funções de animação não podem fazer suposições sobre como a mudança de layout ocorre. Por exemplo, na animação reposition, um elemento move-se do ponto A para o ponto B. Isso pode ocorrer de modos diferentes, como pela mudança de largura do elemento, de seu deslocamento ou de sua margem ou preenchimento.

Para transições de layout, a Biblioteca de Animação proporciona uma função de criação e retorna um objeto com um método.execute(). O padrão de chamada para essas animações é:

  1. Chame a função criar animação apropriada. A posição atual dos elementos de destino é coletada.
  2. O aplicativo executa suas alterações de layout da maneira que quiser.
  3. O aplicativo chama o método execute no objeto retornado pela função de criação para acionar a animação. Isso coleta a nova posição dos elementos de destino e os anima a partir da sua posição original para a nova posição.
  4. O método execute retorna um objeto Promise que pode ser utilizado de uma forma normal.

O exemplo a seguir mostra a animação add-to-list, usada para animar a inserção de um item ao topo de uma lista. Quando createAddToListAnimation é chamado, as posições de todos os elementos passados no conjunto affectedItems são registradas. Todos os elementos cujas posições podem ser afetadas pela chegada do novo item são incluídos no conjunto.

Após a chamada a createAddToListAnimation, o exemplo insere o novo item no topo da lista. No código a seguir, list é o elemento div que contém os itens da lista. A chamada ao método insertBefore do elemento realiza a adição real de newItem ao topo da lista. Essa inserção faz com que todos os outros itens da lista mudem de posição. Você pode mudar a posição do conjunto affectedItems do modo que quiser.

Por fim, o exemplo aciona a animação para posicionar o novo item da lista no local correto, chamando o método execute do objeto retornado por createAddToListAnimation.


                                                
var addToList = WinJS.UI.Animation.createAddToListAnimation(newItem, affectedItems);
list.insertBefore(newItem, list.firstChild);
addToList.execute();

As funções de criação de animações de transição na Biblioteca de Animação são listadas aqui:

Função Descrição
createExpandAnimation Mostra informações adicionais embutidas. Move outro conteúdo para liberar espaço, se necessário.
createCollapseAnimation Oculta conteúdo embutido. Recolhe outro conteúdo, se necessário.
createRepositionAnimation Move um elemento para uma nova posição.
createAddToListAnimation Adiciona um item a uma lista.
createDeleteFromListAnimation Remove um item de uma lista.
createAddToSearchListAnimation Adiciona um item a uma lista e, ao mesmo tempo, filtra os resultados de pesquisa.
createDeleteFromSearchListAnimation Remove um item de uma lista e, ao mesmo tempo, filtra os resultados de pesquisa.
createPeekAnimation Mostra uma animação dinâmica em um bloco. O conteúdo de um bloco dinâmico rola para cima e para baixo dentro do espaço do bloco para exibir toda a comunicação.

 

Programando animações

Para concluir um cenário complexo, às vezes é necessário executar animações diferentes em partes distintas da interface do usuário. Por exemplo, quando você exclui um email, pode ser necessário removê-lo da lista e exibir a próxima mensagem de email. Na maioria dos casos, a melhor coisa a fazer é executar as duas animações ao mesmo tempo para que a duração geral seja menor. As próximas seções falam sobre questões que você deve ter em mente ao lidar com esses cenários.

Interrompendo animações

Uma animação ou transição em um elemento é interrompida quando outra animação ou transição na mesma propriedade CSS é acionada. Quando isso acontece, a primeira animação ou transição é cancelada de acordo com a especificação CSS3. As transições CSS interrompem-se de forma suave e fluida. No entanto, no caso de animações CSS, elas mostram uma transição da propriedade CSS na parte superior do elemento, enquanto o valor real da propriedade CSS no elemento permanece inalterado. A interrupção de uma animação CSS implica no reajuste do valor original da propriedade e não é recomendado. Com animações CSS, normalmente é melhor aguardar o encerramento da primeira animação antes de iniciar a segunda animação. Para saber mais, veja Aguardando a conclusão de uma animação.

Cenário Resultado
Animação CSS interrompe uma animação CSS A propriedade CSS que está sendo animada é revertida para seu estado verdadeiro e inicia a nova animação. Isso pode resultar em desconforto visual.
A animação CSS interrompe uma transição A transição é suavemente interrompida na posição em que estava e inicia a animação para o novo valor final a partir do valor atual.
A transição CSS interrompe uma transição A transição é suavemente interrompida na posição em que estava e inicia a transição para o novo valor final a partir do valor atual.
A transição CSS interrompe uma animação A propriedade CSS que está sendo animada é revertida para seu estado verdadeiro e inicia a nova transição. Isso pode resultar em desconforto visual.

 

Cancelando animações

Qualquer animação da Biblioteca de Animação em execução pode ser cancelada por meio do método cancel do objeto Promise retornado pela função de animação.

Aguardando a conclusão de uma animação

Para realizar uma ação quando uma animação é concluída, passe uma função de retorno de chamada para o método done ou then do objeto Promise retornado pela função de animação. Isso é útil quando é preciso aguardar para remover um item do DOM até a conclusão da animação de saída ou ao encadear várias animações. Aqui há um exemplo em que a função de retorno de chamada realiza fade out do destino somente após a conclusão do fade in.


                                                
WinJS.UI.Animation.fadeIn(target)
       .then(function () { WinJS.UI.Animation.fadeOut(target); });

Nós recomendamos que você não use um temporizador JavaScript para determinar quando a animação foi concluída. Esse método não é confiável, pois o temporizador pode parar antes ou após a animação, e essa sincronia pode ser baseada no hardware e em outros processos em execução no thread da interface do usuário.

Habilitando e desabilitando animações

Observação  Windows: todas as animações da Biblioteca de Animação são desabilitadas em resposta à configuração do sistema "Desabilitar todas as animações desnecessárias", encontrada no item Facilidade de Acesso do Painel de Controle, em Facilitar a visualização no computador. Quando essa configuração é selecionada, todas as animações que não são essenciais à funcionalidade básica do aplicativo são desativadas. Normalmente, isso significa todas as animações, exceto algumas necessárias para rodas jogos. As animações da Biblioteca de Animação e animações personalizadas que usam executeAnimation ou executeTransition respondem automaticamente a essa configuração. Quando você cria uma animação personalizada, o código deve escutar essa configuração explicitamente.

Como desenvolvedor, você deve decidir se as animações da Biblioteca de Animação usadas em seu aplicativo respondem às funções WinJS.UI.enableAnimations e WinJS.UI.disableAnimations.

Otimizando o desempenho de animações

Mostrar a capacidade de resposta do aplicativo por meio de animações

Para fornecer uma boa experiência geral ao usuário, seu aplicativo precisa ser rápido e responder bem às ações do usuário. Quando usadas corretamente, as animações podem ajudar a melhorar a resposta do aplicativo, fornecendo a resposta correta ao usuário no momento exato.

As animações que reagem a uma ação do usuário devem ser iniciadas o mais rapidamente possível. Isso é essencial para mostrar ao usuário que a ação teve êxito e que algo acontece como resposta a isso. Caso sejam necessárias mais ações para concluir uma transição, como carregar uma nova página, faça isso após o acionamento da animação de resposta ao usuário.

Use animações independentes

A plataforma de animação para aplicativos em JavaScript permite a execução de certos tipos de animação em um thread do sistema separado e acelerado por hardware, independente do thread da interface do usuário. Esse tipo de animação é chamado de animação independente. Uma animação executada em um thread da interface do usuário é chamada de animação dependente. Como não precisam concorrer com outras ações no thread da interface do usuário, as animações independentes são muito mais suaves que animações dependentes.

Todas as animações da Biblioteca de Animação podem ser executadas de forma independente, mas é preciso atender a alguns requisitos na implementação do aplicativo para que isso ocorra. Para saber mais sobre como qualificar chamadas da função de animação para execução como animações independentes, veja o tópico sobre composição independente: renderização e composição no Internet Explorer.

Minimize o número de elementos sendo animados de uma só vez

Sempre que possível, reduza o número de elementos individuais sendo animados. Por exemplo, em vez de passar uma matriz de elementos para uma animação, passe apenas o elemento pai para que o mecanismo de animação crie apenas uma única operação de animação.

Use deslocamentos padrão

Para animações da Biblioteca de Animação que incluem um parâmetro de deslocamento, use o deslocamento padrão sempre que possível. Além de obter a tradução da animação recomendada para design, o desempenho será melhor, pois a animação pode usar quadros-chave pré-calculados.

Os deslocamentos padrão também realizam o espelhamento automático em aplicativos da direita para a esquerda e, no caso de algumas animações, o deslocamento padrão muda automaticamente o valor da tradução quando o aplicativo é redimensionado, para mostrar o efeito apropriado do estado de exibição mais estreito.

Criando animações personalizadas

Você deve usar as animações da Biblioteca de Animação sempre que possível. Porém, quando você tem um cenário único e nenhuma das animações internas atende às suas necessidades, é possível criar uma animação personalizada.

Há dois modos de implementar uma animação personalizada em aplicativos do em JavaScript: por meio da animações e transições CSS3 padrão ou com as funções auxiliares executeAnimation e executeTransition da Biblioteca de Animação.

Criando animações personalizadas com animações e transições CSS3 padrão

As animações e transições CSS3 são uma opção flexível para criar uma animação ou transição com várias propriedades CSS. Para saber mais, veja os tópicos Animações e Transições.

Quando decidir criar suas próprias animações, lembre-se dos seguintes pontos:

  • As animações ou transições com algumas propriedades CSS não serão executadas como animações independentes e poderão fazer com que toda a página seja redesenhada a cada quadro. Isso pode gerar uma animação lenta e irregular, tornando a experiência do usuário inadequada. Evite animar essas propriedades na implementação de animações personalizadas para garantir a execução independente das animações.
  • Uma animação ou transição CSS3 personalizadas não pode coexistir com uma animação da Biblioteca de Animação no mesmo elemento.

Criando animações personalizadas com executeAnimation e executeTranslation

As funções executeAnimation e executeTransition da Biblioteca de Animação são usadas por esse biblioteca para executar suas próprias animações, mas você também pode usá-las em suas animações personalizadas. Todas as animações e transições executadas por essas funções podem ser animações independentes e coexistir com animações da Biblioteca de Animação em execução. As funções executeAnimation e executeTransition retornam um objeto Promise, em sintonia com o restante das funções da Biblioteca de Animação.

Você pode usar essas udas funções em qualquer propriedade CSS animável. Porém, apenas as propriedades de opacidade e transformação podem ser executadas como animações independentes. Caso seu aplicativo necessite de algum elemento mais exótico, como animações durante um jogo, essas funções podem não ser a escolha correta para seu cenário.

Ao usar a função executeAnimation, nós recomendamos que você especifique quadros-chave para que animação obtenha um desempenho melhor.


                                
@keyframes custom-opacity-in    { from { opacity: 0; } to { opacity: 1; } }

O exemplo a seguir mostra uma animação personalizada.


                                
function runCustomShowAnimation() {
    var showAnimation = WinJS.UI.executeAnimation(
        target,
        {
            keyframe: "custom-opacity-in",
            property: "opacity",
            delay: 0,
            duration: 500,
            timing: "linear",
            from: 0,
            to: 1
        }
    );
}

O exemplo a seguir mostra uma transição personalizada


                                
function runCustomShowTransition() {
    var showTransition = WinJS.UI.executeTransition(
        target,
        {
            property: "opacity",
            delay: 0,
            duration: 500,
            timing: "linear",
            to: 1
        }
    );
}

Combinando animações e transições personalizadas

Você pode combinar animações e transições para criar um storyboard personalizado. Nos exemplos a seguir, há a combinação de uma animação e uma transição com o intuito de obter um efeito simultâneo de fade in e deslizamento no elemento de destino. As duas partes do storyboard são acionadas de modo independente por meio de chamadas a executeAnimation e executeTransition, mas elas são iniciadas ao mesmo tempo.


                                
@keyframes custom-translate-in    { from { transform: translateY(50px); } to { transform: none; } }
                            


                                
function runCustomShowStoryboard() {
    var promise1 = WinJS.UI.executeAnimation(
        target,
        {
            keyframe: "custom-translate-in",
            property: "transform",
            delay: 0,
            duration: 367,
            timing: "cubic-bezier(0.1, 0.9, 0.2, 1)",
            from: "translate(50px)", 
            to: "none"
        });
    var promise2 = WinJS.UI.executeTransition(
        target,
        {
            property: "opacity",
            delay: 0,
            duration: 167,
            timing: "linear",
            to: 1
        });
    return WinJS.Promise.join([promise1, promise2]);
}

Tópicos relacionados

Animando sua interface do usuário (HTML)