Como animar entre visualizações

Saiba como criar animações entre duas visualizações nos seus apps.

Paul Lewis

Normalmente, convém mover os usuários entre visualizações no aplicativo, seja de uma lista para uma visualização de detalhes ou mostrar uma navegação de barra lateral. Animações entre essas visualizações prendem a atenção do usuário e dão ainda mais vida aos seus projetos.

• Use traduções para alternar entre visualizações. Evite usar left, top ou qualquer outra propriedade que acione o layout.
• Certifique-se de que as animações usadas sejam rápidas e de curta duração.
• Considere como suas animações e layouts mudam conforme o tamanho da tela aumenta. O que funciona para uma tela menor pode parecer estranho quando usado em um contexto de computador.

A aparência e o comportamento dessas transições de visualização dependem do tipo de visualização com que você está lidando. Por exemplo, animar uma sobreposição modal sobre uma visualização deve ser uma experiência diferente da transição entre uma visualização de lista e uma visualização de detalhes.

Sucesso: tente manter 60 fps para todas as suas animações. Dessa forma, os usuários não verão animações oscilantes que interfiram na experiência. Verifique se qualquer elemento de animação tem will-change definido para tudo o que você planeja mudar bem antes do início da animação. Para transições de visualização, é altamente provável que você use will-change: transform.

Usar traduções para alternar entre visualizações

Para facilitar a vida, presuma que há duas visualizações: uma de lista e outra de detalhes. Quando o usuário toca em um item da lista dentro da visualização em lista, a visualização de detalhes entra e a visualização em lista desliza para fora.

Para conseguir esse efeito, você precisa de um contêiner para as duas visualizações com overflow: hidden definido. Dessa forma, as duas visualizações podem ficar dentro do contêiner lado a lado sem mostrar barras de rolagem horizontais, e cada visualização pode deslizar lado a lado dentro do contêiner conforme necessário.

O CSS do contêiner é:

.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

A posição do contêiner é definida como relative. Isso significa que cada visualização dentro dele pode ser posicionada totalmente no canto superior esquerdo e depois movida com transformações. Essa abordagem é melhor para o desempenho do que usar a propriedade left, porque ela aciona o layout e a pintura, e normalmente é mais fácil de racionalizar.

.view {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;

  /* let the browser know we plan to animate
     each view in and out */
  will-change: transform;
}

Adicionar uma transition à propriedade transform proporciona um bom efeito de deslize. Para proporcionar uma experiência agradável, ele usa uma curva cubic-bezier personalizada, que discutimos no Guia de easing personalizado.

.view {
  transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

A visualização que está fora da tela deve ser convertida para a direita, portanto, neste caso, a visualização de detalhes precisa ser movida:

.details-view {
  transform: translateX(100%);
}

Agora, uma pequena quantidade de JavaScript é necessária para lidar com as classes. Isso alterna as classes adequadas nas visualizações.

var container = document.querySelector('.container');
var backButton = document.querySelector('.back-button');
var listItems = document.querySelectorAll('.list-item');

/**
    * Toggles the class on the container so that
    * we choose the correct view.
    */
function onViewChange(evt) {
    container.classList.toggle('view-change');
}

// When you click a list item, bring on the details view.
for (var i = 0; i < listItems.length; i++) {
    listItems[i].addEventListener('click', onViewChange, false);
}

// And switch it back again when you click the back button
backButton.addEventListener('click', onViewChange);

Por fim, adicionamos as declarações CSS para essas classes.

.view-change .list-view {
  transform: translateX(-100%);
}

.view-change .details-view {
  transform: translateX(0);
}

Faça um teste

É possível expandir esse recurso para cobrir várias visualizações, e o conceito básico deve permanecer o mesmo. Cada visualização não visível deve ser colocada fora da tela e trazida conforme necessário, e a visualização atual na tela deve ser removida.

Cuidado: criar esse tipo de hierarquia entre navegadores pode ser um desafio. Por exemplo, o iOS exige uma propriedade CSS adicional, -webkit-overflow-scrolling: touch, para "reativar" a rolagem rápida, mas não é possível controlar para qual eixo, como é possível fazer com a propriedade overflow padrão. Teste sua implementação em vários dispositivos.

Além da transição entre visualizações, essa técnica também pode ser aplicada a outros elementos de deslizamento, como elementos de navegação da barra lateral. A única diferença real é que você não precisa mover as outras visualizações.

Verificar se a animação funciona com telas maiores

Para uma tela maior, mantenha a visualização de lista disponível o tempo todo em vez de removê-la e deslize a visualização de detalhes do lado direito. É muito parecido com lidar com uma visualização de navegação.