Animações e transições de estados em aplicativos Windows 10

Sabe-se que o sucesso de um aplicativo está atrelado a uma boa experiência do usuário. E que uma animação fluida oferece uma experiência mais agradável. É claro que não é qualquer animação que acrescenta uma experiência positiva: animações escandalosas, com itens correndo de uma lado para o outro da tela, ou algumas que existem só porque “seria legal colocar uma animação” cansam o usuário e não acrescentam em nada.

Animações interessantes são, por exemplo, as que dão feedback sobre o tempo de espera que o aplicativo leva para carregar os itens da interface. Ou que chamam atenção do usuário, de forma sutil, para elementos de interações importantes. Ou ainda, caso o usuário mude o tamanho da tela e os ícones sejam reorganizados, é interessante mostrá-los se reorganizando para que ele consiga acompanhá-los e não os precise procurar na tela de novo.

Quando se trata de desenvolvimento Windows utilizando XAML, essas mudanças de layout são feitas através de VisualStates. O Blend for Visual Studio automatiza a tarefa de criar esses estados e suas transições, não sendo necessário digitar código algum C# ou XAML.

O QUE MUDOU NO BLEND FOR VISUAL STUDIO 2015

As edições do Blend anteriores a 2015 geravam transições “animadas” mesmo que não houvesse animação alguma: nesse caso, o editor gerava um código XAML com animação de tempo zero. Entretanto, isso foi alterado no Windows 10: no Blend for Visual Studio 2015, essas animações foram substituídas por Setters.

Isso não quer dizer que o recurso de animação durante a transição foi removido. Muito pelo contrário: ainda está lá e continua fácil de se fazer, porém requer um esforço um pouco maior. Isso porque, ao se criar um novo estado, muda-se o layout da tela (por exemplo arrastando os objetos no editor), o que faz com que o Blend construa alguns Setters no código. Depois, ao adicionar uma animação de transição para aquele estado, precisa-se criar uma Timeline e arrastar os objetos (de novo!) para a mesma posição, para que o Blend gere a tag DoubleAnimation correspondente. Além de ter o trabalho de organizar os itens duas vezes, dessa forma obtém-se uma redundância no código: se precisarmos alterar a propriedade de algum objeto, é preciso mudar no estado e na transição.

Existe, entretanto, um jeito de organizar os estados e as animações de forma que não haja essa redundância no código, nem a repetição de trabalho.

CRIANDO TRANSIÇÕES ANIMADAS SEM REDUNDÂNCIA NO CÓDIGO

Para fazer isso, basta criar os VisualStates normalmente e, quando for atribuir as propriedades aos objetos naquele estado, utilizar a Timeline para que elas sejam atribuídas somente depois de um certo tempo dentro do novo estado. Vamos mostrar isso passo a passo, criando um aplicativo Windows 10 que reorganiza os ícones ao mudarmos o tamanho da janela.

Começamos criando um aplicativo Universal Windows em branco no Blend 2015. Vamos chamá-lo de VisualStates.

animações_e_transição_de_estados_em_apps_Windows_10_01_criar_projeto

No Solution Explorer, abra a página inicial, MainPage.xaml, onde desejamos incluir a animação.

animações_e_transição_de_estados_em_apps_Windows_10_01_2_mainpage

Para criar os estados da aplicação, primeiramente temos que criar um grupo de estados. Clique na aba States para substituir o Solution Explorer pela janela de estados.

animações_e_transição_de_estados_em_apps_Windows_10_01_3_state

Em seguida, clique em Add state group.

animações_e_transição_de_estados_em_apps_Windows_10_02_adicionar_state_group

Um novo grupo será criado com o nome de VisualStateGroup. Vamos adicionar 2 estados e chamá-los de PortraitState e LandscapeState. Para isso, clique duas vezes em Add State. Renomeie os estados recém-criados.

animações_e_transição_de_estados_em_apps_Windows_10_03_adicionar_state

Vamos agora colocar os dados na tela. Eles serão representados aqui por retângulos coloridos. Clique em Base, na janela States, e só depois insira os retângulos na página. Se não clicarmos em Base antes, os retângulos não estarão visíveis em todos os estados, apenas no estado selecionado.

animações_e_transição_de_estados_em_apps_Windows_10_04_selecionar_base

animações_e_transição_de_estados_em_apps_Windows_10_05_adicionar_retangulos

Caso a sua página esteja muito pequena para inserir os retângulos, pode ser porque o Blend está em modo de visualização para celular. Nesse caso, escolha 23″ Desktop (1290 x 1080) 100% Scale.

animações_e_transição_de_estados_em_apps_Windows_10_05_01_desktop_mode

Colorimos cada retângulo clicando uma vez nele e escolhendo a cor da caixa de seleção à direita.

animações_e_transição_de_estados_em_apps_Windows_10_06_colorir_retangulos

Agora serão feitas as alterações pertinentes a cada estado. Em PortraitState, vamos reorganizar os ícones de forma que ocupem um espaço maior na vertical, enquanto se estendem horizontalmente em LandscapeState.

Na janela States, clique em PortraitState. Um ícone vermelho aparecerá ao lado do nome, informando que as mudanças estão sendo gravadas para esse estado.

animações_e_transição_de_estados_em_apps_Windows_10_07_01_portrait_state

Ainda nessa janela, logo acima de Base e abaixo do título (States), se encontram dois ícones que indicam como as mudanças serão feitas internamente. O primeiro é o Layout Property Mode, que vem selecionado por padrão. Cada mudança que for feita nesse estado será interpretada como uma mudança de layout, ou seja, serão alteradas propriedades dos objetos como margin top, margin left, width. Essa opção é a melhor escolha quando queremos fazer mudanças sem animação na organização dos itens.

A segunda opção, Render Transform Mode, é a indicada quando as mudanças ocorrem ao longo do tempo, ou seja, quando existem animações. Nesse caso, as alterações serão feitas através de translate, rotate e scale, calculados pela GPU (Graphics Processing Unit), e não bloquearão a thread de UI. Em outras palavras, isso impede que nosso aplicativo fique travando durante as animações. Clique nesse ícone.

animações_e_transição_de_estados_em_apps_Windows_10_07_portrait_state

Na janela Objects and Timeline, clique em Show Timeline.

animações_e_transição_de_estados_em_apps_Windows_10_08_show_timeline

Aparecerá uma linha do tempo com o cursor amarelo no tempo zero. Arraste essa linha amarela para a posição 0:00.0500.

animações_e_transição_de_estados_em_apps_Windows_10_09_posicionar_tempo

Basta então reorganizar os retângulos. Conforme os movemos, nota-se que são gerados keyframes na linha do tempo. A aplicação se encarregará de gerar animações de movimento que se iniciam no tempo 0s e duram até a posição dos keyframes.

animações_e_transição_de_estados_em_apps_Windows_10_10_posicionar_retangulos

Podemos organizá-los tanto os arrastando como clicando em cada um e digitando os valores desejados em Transform > Translate X e Translate Y, do lado direito da tela.

animações_e_transição_de_estados_em_apps_Windows_10_10_01_posicionar_retangulos_transfom

Vamos fazer o mesmo para o outro estado. Clique em LandscapeState, na janela States. O ícone vermelho informará que as alterações estarão sendo salvas para aquele estado. Clique na posição 0:00.500s da linha do tempo, em Objects and Timeline, e rearranje os dados da tela espalhando-os horizontalmente.

animações_e_transição_de_estados_em_apps_Windows_10_11_landscape_e_posicionar_tempo

animações_e_transição_de_estados_em_apps_Windows_10_12_landscape_posicionar_retangulos

Temos nossos dois estados prontos, assim como suas transições animadas. Para visualizá-las, precisamos transitar entre esses estados. Podemos fazer isso com triggers. Com o Windows 10, é possível ativar estados usando um objeto chamado AdaptiveTrigger, sem a criação de código algum. Entretanto, atualmente só existem prontos o MinWindowWidth e MinWindowHeight, que testam o tamanho da janela e ativam ou não os estados. Existem artigos ensinando a criar outros triggers customizados (como esse aqui, em inglês), mas vamos usar a função MinWindowWidth só para ver os estados mudando.

Iremos configurar nossa aplicação para entrar no estado Landscape quando a largura da janela for maior ou igual a 1000 pixels, e em Portrait caso seja menor. A mudança de largura pode se dar tanto alterando o tamanho da janela em um Desktop quanto rotacionando um SmartPhone.

Na janela States, em LandscapeState, clique em Edit Adaptive Triggers.

animações_e_transição_de_estados_em_apps_Windows_10_13_editar_adaptive_triggers

Clique em Add para adicionar um novo Adaptive Trigger.

animações_e_transição_de_estados_em_apps_Windows_10_14_adicionar_trigger

Coloque o valor 1000 em MinWindowWidth, e pressione Ok.

animações_e_transição_de_estados_em_apps_Windows_10_15_minwidth

E quando a tela for menor do que 1000 pixels de largura? Atualmente, a aplicação vai para o estado Base. Devemos configurar o PortraitState da mesma forma, colocando por exemplo uma largura mínima de 0.1. Em PortraitState, clique em EditAdaptiveTriggers, Add, e atribua o valor 0.1 a MinWindowWidth.

animações_e_transição_de_estados_em_apps_Windows_10_16_editar_adaptive_triggers_portrait

animações_e_transição_de_estados_em_apps_Windows_10_17_minwidth_portrait

Pronto. Execute a aplicação e veja que, quando se altera a largura da janela os ícones se reorganizam quando o tamanho fica maior ou menor do que 1000 pixels.

Conheça também algumas boas práticas de como organizar a interface dos aplicativos em Adaptive UI em Aplicativos Universais. E continuem nos acompanhando para mais novidades!

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s