Saiba como criar designs e protótipos usando animação automática com gestos de arrastar.

A animação automática permite criar facilmente protótipos com transições animadas imersivas. Duplique uma prancheta com facilidade, modifique as propriedades do objeto, como tamanho, posição e rotação, e aplique uma ação de animação automática para criar uma transição animada entre pranchetas. Para usar a animação automática, certifique-se de que os objetos que você deseja animar tenham o mesmo nome de camada em cada uma das pranchetas. Também é possível usar a experiência de pesquisa aprimorada para mostrar apenas as camadas relevantes e as pranchetas que contêm uma palavra-chave, sem a estrutura de camadas (exemplos de grupos expandidos).

Como a animação automática funciona?

Tradicionalmente, os designers usavam diversas transições em várias pranchetas para conectar as interações de protótipo.  Com a animação automática, eles podem usar o XD para criar microinterações entre duas pranchetas ao:

  • duplicar objetos entre pranchetas;
  • modificar suas propriedades, como tamanho, posição e rotação. Para obter informações sobre as propriedades com suporte, consulte Propriedades com suporte para animação automática;
  • trocar para o modo de protótipo;
  • adicionar animação automática como uma nova transição;
  • visualizar o protótipo no desktop ou em dispositivos móveis.

Assim como usar Tocar para acionar transições, você pode combinar Arrastar com animação automática para especificar microinterações entre pranchetas. Novos objetos aparecem gradualmente, e objetos excluídos desaparecem gradativamente durante uma transição que usa animação automática.

Observação:

  • Os protótipos usando transições de Animação automática têm determinadas restrições com animações de texto. No momento, não há suporte para animação de espaçamento de caracteres, espaçamento entre linhas e espaçamento entre parágrafos na Web.
  • No momento, não há suporte a gestos de arrastar na Web. Protótipos que usam um acionador de arrastar usarão a transição dissolver ao toque.

Como funciona um gesto de arrastar com animação automática?

O Adobe XD evoluiu de um aplicativo de clique básico para oferecer opções de protótipo divergentes, como Horário, Tocar, Arrastar e Voz.

Você pode usar um gesto de arrastar para simular experiências do usuário, como arrastar cartões ou telas. Quando você seleciona Arrastar na lista de acionadores, o XD alterna automaticamente a Ação para Animação automática.

Observação:

Atualmente, a visualização de um gesto de arrastar tem suporte apenas no desktop e dispositivos móveis.

  1. No modo de Protótipo, modifique a posição do mesmo objeto na prancheta de destino e defina o Acionador como Arrastar.

  2. A posição inicial e final de um objeto determina a direção do movimento. Arraste da esquerda para a direita na janela de visualização ou no aplicativo para dispositivos móveis se o objeto na primeira prancheta estiver à esquerda e o mesmo objeto na segunda prancheta estiver à direita. Você também pode criar um evento de arrastar da direita para a esquerda ou de cima para baixo e assim por diante.

  3. Para visualizar as alterações no desktop ou em dispositivos móveis, selecione o ícone Visualização.

     

    Gesto de arrastar em um trabalho
    Gesto de arrastar em um trabalho

Criar uma transição de animação automática usando um gesto de arrastar para fluxos de trabalho de integração

  1. No modo de Protótipo, selecione todas as pranchetas na tela para exibir os fios nelas.

  2. Arraste um conector de uma camada na prancheta de origem para a de destino. Quando você conecta o primeiro elemento, a prancheta daquele elemento é definida como a prancheta inicial.

  3. Na tela Acionador, defina as seguintes opções:

    • Acionador: defina o tipo de gesto como Arrastar.
    • Ação: defina como Animação automática.
    • Destino: defina a segunda prancheta como destino.
    • Atenuação: selecione as opções na lista suspensa.
    Fluxo de trabalho de animação automática
    Fluxo de trabalho de animação automática

    A. Tipo de gesto como Arrastar B. Ação como animação automática C. Defina a prancheta de destino D. Selecione as opções de Atenuação 
  4. Para visualizar as alterações no desktop ou em dispositivos móveis, selecione o ícone Visualizar no desktop.

    Animação automática em um trabalho
    Animação automática em um trabalho

Gravar transições de animação automática

  1. No aplicativo de desktop do XD, clique no ícone Compartilhar no canto superior direito e selecione Gravar vídeo.

  2. No modo de visualização, use o botão Gravar  para gravar suas animações.

Compartilhar e revisar o link do protótipo no desktop e em dispositivos móveis

No aplicativo de desktop, clique em Compartilhar e escolha Compartilhar para revisão no caso de um Protótipo ou Compartilhar paradesenvolvimento no caso de especificações de design. Para obter mais informações sobre como compartilhar protótipos e especificações de design, consulte Compartilhar protótipos e especificações de design.

Observação:

Os protótipos usando Animação automática não são compatíveis com a reprodução de animações e se dissolvem entre o início e o fim de uma prancheta quando exibidos nos seguintes navegadores:

  • Navegador IE 11
  • Edge 12

Como solução alternativa, abra o protótipo em qualquer um dos outros navegadores compatíveis listados nos Requisitos de sistema.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online