As animações rápidas e fluidas dão vida aos aplicativos. No Windows 8 Consumer Preview, você observará que as animações são parte integral da experiência do usuário. Quando fazemos logon no PC, há uma animação dos itens do menu Iniciar. Quando iniciamos um aplicativo imersivo ou ampliamos o menu Iniciar, a experiência é enriquecida com uma animação contínua. As animações podem informar ao usuário o resultado de uma determinada ação. Esse feedback visual aumenta a confiança do usuário na capacidade de resposta do aplicativo. Até mesmo uma simples adição ou exclusão de um item em uma lista pode se tornar fluida, moderna e informativa, com o uso de uma animação sutil (como mostrado por Jensen Harris em sua sessão na //build/ em torno do minuto 25:00).

Esse pequeno vídeo apresenta uma interface do usuário aperfeiçoada por animações contínuas.


Baixe este vídeo para assistir no seu media player favorito:
MP4 de alta qualidade | MP4 de qualidade inferior

No Windows 8, as animações são um elemento essencial da personalidade do estilo Metro e você pode levar essa personalidade aos seus próprios aplicativos!

Veja o que abordarei nesta postagem:

  1. Uma breve visão geral do mecanismo de animação
  2. Como aprender a usar a Biblioteca de animação
  3. Como personalizar animações e usufruir os aperfeiçoamentos do mecanismo de animação
  4. Dicas e macetes para inserir animações nos seus aplicativos estilo Metro.

Animação independente

Grande parte da experiência do Windows 8 é composta por animações contínuas e sem falhas, o que é obtido por meio de uma funcionalidade chamada animação independente. Uma animação independente é uma animação que é executada independentemente do thread que estiver executando a lógica principal da interface do usuário. (Uma animação dependente é executada no thread da interface do usuário.) No Windows 8, muitos elementos animados são formados por um mecanismo de composição que é executado em um thread separado. O trabalho do mecanismo é descarregado da CPU para a GPU. Mudando a composição para um thread fora da interface do usuário, a animação não fica distorcida nem é bloqueada pelo aplicativo que estiver funcionando no thread da interface do usuário (como operações de sincronização ou a execução de um código JavaScript). O hardware da GPU é otimizado para fornecer elementos gráficos visualmente ricos e fazer uso dos recursos de memória do vídeo. O uso da GPU aumenta muito o desempenho, permitindo que as animações sejam executadas em uma taxa de quadros consistente e contínua.

Não é necessário marcação adicional para que a sua animação usufrua a funcionalidade da animação independente. O sistema determina quando é possível compor a animação de forma independente. Para permitir que as animações dos seus aplicativos tenham um grande desempenho e sejam contínuas, você precisa seguir as diretrizes sobre animação do Centro de Desenvolvimento. Essas diretrizes são mais úteis para a criação de animações personalizadas, que serão aprofundadas mais à frente nesta postagem.

Agora, vamos começar aprendendo como é possível aprimorar os seus aplicativos fazendo uso das animações estilo metro fornecidas na Biblioteca de animação primeiro.

Biblioteca de animação

A Biblioteca de animação é um conjunto de animações estilo Metro criadas especificamente para usufruir a funcionalidade da animação independente da plataforma. Essas animações são usadas em toda a interface do usuário do Windows e também estão disponíveis para o seu aplicativo Metro. Pense nessa biblioteca como uma paleta de animações que fazem a coisa certa para você e foram criadas para serem rápidas e fluidas.

Nós, como desenvolvedores de aplicativos, adoramos esse recurso porque não precisamos perder tempo criando animações com a aparência do Windows 8. Basta usar a Biblioteca de animação e o seu aplicativo já fará parte da experiência do Windows.

Essa biblioteca anima a própria interface do usuário do Windows. Essas animações são limpas e objetivas. Ficamos muito atentos para conseguir a precisão do timing e das curvas da animação para que o usuário receba um feedback rápido e fluido ao interagir com interface do usuário do Windows. Ao criar animações no seu aplicativo, recomendamos que você primeiro consulte a Biblioteca de animação para localizar a animação que melhor atenda à sua necessidade.

Não importa se você está usando HTML ou XAML, a Biblioteca de animação oferece uma maneira de usar as animações certas e garante que a interface do usuário fique rápida e fluida. Veremos alguns exemplos.

Exemplo com JavaScript

A Biblioteca de personalidade do JavaScript/HTML é criada com transições e animações CSS3. Essas animações são usadas para navegação no aplicativo, transições de conteúdo e controles do Windows 8.

Uma animação simples, mas atraente é a EnterPage. Use-a para exibir conteúdo pela primeira vez ou fazer a transição entre páginas de um aplicativo em execução.

Esse exemplo demonstra como você pode usar essa API simples no seu aplicativo.

HTML

<html>
<body>
<div id="input">
Some content here
</div>
<button onclick="runAnimation()", Run animation&lt;/button>
</body>
</html>

CSS

<style>
#input
{
background-color:blue;
}
</style>

JavaScript

<script>       
function runAnimation(){
enterPage = WinJS.UI.Animation.enterPage(input);
}
</script>

Exemplo com XAML

No XAML, a Biblioteca de animação interna envolve dois conceitos: Animações de tema e transições de tema.

As transições de tema são usadas normalmente para animar elementos visuais na tela, enquanto eles são carregados, descarregados ou mudam de lugar na tela. O sistema de layout em XAML dispara essas animações internas em resposta a alterações no layout da página.

Esses gatilhos de layout incluem:

  1. Adição de um UIElement à página ou árvore visual.
  2. Remoção de um UIElement da página ou árvore visual.
  3. 3. Atualização de propriedades de layout de um UIElement existente na página ou árvore visual que leva à atualização de seu local ou tamanho.

Uma determinada transição de tema pode responder a um dos gatilhos de layout ou todos eles. A EntranceThemeTransition responde ao gatilho 1 e anima os UIElements, conforme são adicionados à página ou árvore visual. No exemplo a seguir, todos os filhos de Grid são animados com o uso da EntranceThemeTransition.

<Grid>
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>

<!-- Grid's children go here -->
</Grid>

As animações de tema são internas e normalmente não são executadas pela interação do usuário, devendo ser disparadas. A maneira mais fácil de executar uma animação de tema é chamar o método Begin na classe Storyboard. Se você estiver familiarizado com o VSM (VisualStateManager), uma animação de tema pode ser inserida em um estado visual de um controle. Este exemplo mostra como disparar uma animação de tema usando o método Begin:

XAML

<Grid Background="{StaticResource ApplicationPageBackgroundBrush}">
<Grid.Resources>
<Storyboard x:Name="downAnimation">
<TapDownThemeAnimation TargetName="rectangle"/>
</Storyboard>
<Storyboard x:Name="upAnimation">
<TapUpThemeAnimation TargetName="rectangle"/>
</Storyboard>
</Grid.Resources>

<Rectangle x:Name="rectangle"
PointerPressed="Rectangle_PointerPressed"
PointerReleased="rectangle_PointerReleased"/>
</Grid>

Código


private void Rectangle_PointerPressed(object sender, PointerEventArgs e)
{
downAnimation.Begin();
}

private void rectangle_PointerReleased(object sender, PointerEventArgs e)
{
upAnimation.Begin();
}

Animações personalizadas

Apesar de avançada, a Biblioteca de animação não pode atender a todos os seus cenários. Para esses casos, você pode criar as suas próprias animações personalizadas, que são executadas pelo sistema de forma independente (consulte Animating (Animação) para ver as diretrizes de design na criação das suas próprias animações). Aqui é necessário mais cuidado com a criação de uma animação para que ela não acabe sendo executada no thread da interface do usuário.

Você ainda pode usar animações dependentes no seu aplicativo. Recomendamos seguir as diretrizes sobre animação independente para animações personalizadas, mas se o seu cenário exigir animações que não possam ser animadas de forma independente, a animação poderá ser executada de forma dependente.

Os exemplos aqui demonstrados usam uma animação independente não afim com 3D que não está na Biblioteca de animação.

JavaScript

Para aplicativos JavaScript, você pode acessar a funcionalidade de animação independente para animações personalizadas por meio da Animação CSS3 e da sintaxe Transition, recentemente introduzida na Microsoft Web Platform no IE10. A animação independente somente dá suporte a propriedades que não exigem um novo layout ou renderização. Isso significa que a animação independente para aplicativos JavaScript somente se aplica a Animações/Transições CSS, que se destinam a Transformações CSS3 2D e 3D ou Opacidade. As animações de outras propriedades CSS são executadas de forma dependente no thread da interface do usuário.

Exemplo de animação personalizada em HTML

O exemplo aqui demonstra um flip CSS 3D simples.

HTML

<html>
<head>
<title>Html animations CSS3</title>
</head>
<body>
<div id="parent">
<div id="box" onclick="className='move'" >Click me for CSS Change!</div>
</div>
</body>
</html>

CSS

<style>
body
{
background-color:gray;
}
#box
{
position: relative;
background-color:green;
width:300px;
height:300px
}

#box.move
{
-ms-transition-property: -ms-transform;
-ms-transition-duration: 1s;
-ms-transition-timing-function: ease-in;
-ms-transform: rotateY(-180deg);
-ms-transform-origin: 50% 50%;
}

#parent{-ms-perspective: 600px;}
</style>

XAML

Para aplicativos XAML, há suporte independente para um subconjunto específico de propriedades (mais informações podem ser obtidas no Windows 8 Developer Center). Essas propriedades incluem o posicionamento da tela, opacidade, transformações de renderização, projeções, clipes e cor.

A animação de qualquer propriedade, além da lista que acabamos de ver, resulta em uma animação dependente. Isso significa que a animação é executada no thread da interface do usuário, com risco de falhas. Para incentivar o desenvolvimento de uma interface do usuário rápida e fluida, o XAML somente executa animações independentes, a menos que você habilite explicitamente as animações dependentes. Se desejar executar uma animação dependente, você poderá usar a propriedade EnableDependentAnimation permite a execução de uma animação dependente na Linha do Tempo. Também há uma propriedade estática global AllowDependentAnimations que pode ser definida como false para desabilitar todas as animações dependentes no seu aplicativo.

Exemplo de uma animação personalizada em XAML

O próximo exemplo mostra como animar propriedades no PlaneProjection que o sistema executa de forma independente. Os conceitos e sintaxe da animação são exatamente os mesmos de outras tecnologias XAML, mas foram aperfeiçoados no Windows 8 para serem executados de forma independente, o que resulta em aplicativos com melhores características de desempenho.

<Grid>
<Grid.Resources>
<Storyboard x:Name="customAnimation">
<DoubleAnimation Storyboard.TargetProperty="RotationY" Storyboard.TargetName="projection"
Duration="0:0:1" To="-180" />
</Storyboard>
</Grid.Resources>

<Grid Background="Red" Height="400" Width="600" PointerPressed="Grid_PointerPressed">
<Grid.Projection>
<PlaneProjection x:Name="projection"/>
</Grid.Projection>

<!-- Grid's children go here -->

</Grid>
</Grid>
 
private void Grid_PointerPressed(object sender, PointerEventArgs e)
{
customAnimation.Begin();
}

Práticas Recomendadas para animações independentes

Como ocorre com todos os sistemas, há algumas limitações para a animação independente. Essas limitações se diferem nas plataformas HTML e XAML. Em geral, as animações independentes são obtidas com a exceção destes casos:

  1. Propriedade de animação que afeta o layout: Essas propriedades, como a CSS Width, dispara um novo layout e não tem suporte independente.
  2. O estado do elemento de animação não segue as diretrizes de animação independentes: O sistema não dá suporte às animações independentes que não seguem as diretrizes (consulte a postagem Animating (Animação)).
  3. Recursos de sistema insuficientes: Se o sistema não possuir recursos suficientes (por exemplo, memória de vídeo), a animação volta à composição dependente.

Veja aqui algumas diretrizes para as animações independentes.

JavaScript

  1. Evite a animação infinita: A GPU aloca memória de vídeo para usar animações independentes. Na CSS, é possível especificar –ms-iteration-count: infinite. Ao definir esse valor de propriedade, a animação especificada continuará em execução. Isso significa que o seu aplicativo usa a memória de vídeo do elemento de animação enquanto a animação não é interrompida. Para interromper uma animação infinita, você pode remover o valor –ms-animation-name ou alterar a propriedade de exibição do elemento de animação para display: none.
  2. Não alterne a propriedade CSS Visibility: Ao definir um elemento de animação independente para visibility: hidden e depois voltar para visibility: visible, esse elemento deixa de ser independente. A animação é mantida, mas passa a ser composta no thread da interface do usuário.
  3. Deixe os elementos da animação independente visíveis: Como a composição independente usa a sua GPU, há um limite na quantidade que o seu sistema pode compor de forma independente. Se a sua animação independente estiver atrás de outros elementos da interface do usuário, esses elementos visíveis também serão compostos de forma independente. Isso leva a um consumo desnecessário da memória de vídeo. Para evitar esse problema, todas as animações independentes devem ficar visíveis, acima de outros elementos da interface do usuário. Se a sua animação independente ficar em uma posição muito baixa na pilha, ela correrá o risco de voltar à animação dependente.

    Você pode manter as suas animações independentes visíveis destas formas:

    • Atribuindo aos seus elementos de animação independentes um índice Z alto.
    • Usando índices Z não negativos para elementos de animação independentes.
    • Não sobrepondo a sua animação independente com outros elementos.
  4. Não use superfícies grandes nem animações independentes demais: Assim como manter a sua animação independente visível, atente para o tamanho do elemento de animação e o número que está sendo animado ao mesmo tempo. Animações independentes são limitadas pela GPU do sistema. Se você ultrapassar esse limite, as suas limitações voltarão ao thread da interface do usuário dependente. Se observar que as suas animações não estão contínuas, você pode usar a API IsIndependentlyComposed para consultar o seu elemento.
  5. Use a API IsIndependentlyComposed: Você pode usar esta API para determinar se um elemento HTML está sendo composto de forma independente do thread da interface do usuário. Essa propriedade retornará true para elementos de animação independentes, subcontroles de rolagem e elementos que se sobrepõem, além do elemento de animação independente.

XAML

  1. Dimensione os elementos para animações de altura e largura: A animação das propriedades Height e/ou Width do UIElement resultam em uma animação dependente porque essas propriedades exigem alterações de layout que somente podem ser feitas no thread da interface do usuário. Para ter um efeito semelhante ao da animação da Height ou da Width, você pode animar a Escala do controle. A ScaleTransform é animada de forma independente, essa abordagem permite uma taxa de quadros melhor.
  2. Não anime o conteúdo de cache: Se você definir a propriedade CacheMode (UIElement.CacheMode) de um elemento como BitmapCache, todas as animações na subárvore visual serão executadas de forma dependente. Isso ocorre porque temos de recriar todo o cache inteiro em cada quadro. A solução é simplesmente não animar conteúdo em cache.
  3. Não use animações infinitas de controles de progresso: O ProgressRing e ProgressBar têm animações infinitas que podem continuar em execução mesmo se o controle não estiver visível na página, o que pode impedir a CPU de ficar com baixo consumo de energia ou no modo ocioso. Recomendamos que você defina as propriedades ProgressRing.IsActive e ProgressBar.IsIndeterminate como false quando não estiver mostrando os respectivos controles.

Resumo

Estamos entusiasmados com as experiências rápidas e fluidas proporcionadas pela animação independente para aplicativos do Windows 8. Esperamos que a Biblioteca de animação e o suporte a animações personalizadas que são executadas de forma independente do thread da interface do usuário sejam úteis na criação de experiências do usuário atraentes nos seus aplicativos estilo Metro para Windows 8.

-- Angelina Gambo e Hamid Mahmood
    Gerentes de programas, Windows