Guia do Usuário Cancelar

Animar protótipos

Saiba como criar microinterações usando a Animação automática.

Com a Animação automática, você pode criar transições imersivas para visualizar o movimento do conteúdo nas pranchetas.

Combinada com os acionadores Arrastar e Tempo, ela ajuda a criar uma ampla variedade de efeitos, como o deslizar e arrastar do YouTube, o que permite que você conte uma história melhor com seu protótipo.

Interações de ondulação em um site
Efeito de ondulação em um site

Efeito de deslizar e arrastar em um dispositivo de toque
Efeito de deslizar e arrastar em um dispositivo de toque

Para criar um protótipo animado, siga estas etapas:

  1. Antes de começar, use estas regras simples para entender como os objetos são manipulados durante a animação:

    • Se um objeto não estiver presente na prancheta de destino, ele aparecerá gradualmente.
    • Se um objeto não estiver presente na prancheta de origem, ele desaparecerá gradualmente.
    • Se um objeto apresentar uma correspondência em termos de nome de camada e grupo, os atributos serão animados. Para obter uma lista abrangente de propriedades e transições compatíveis, leia Propriedades de objeto.
    • Se quiser testar um efeito de rolagem vertical ou horizontal, use os grupos de rolagem.
  2. Conecte as pranchetas no modo de Protótipo. 

  3. Clique no conector para exibir o painel Interação no Inspetor de propriedades e configure as seguintes opções:

    • Acionador: selecione uma opção para acionar uma animação. Por exemplo, para simular um cartão sensível a toque, selecione Tocar. 
    • Ação: selecione Animação automática. Agora é possível atribuir duas ações em um só acionador, como Tocar. Para fazer isso, defina o primeiro botão Ação + no Inspetor de propriedades como Transição, Animação automática, Sobreposição, Rolar para ou Prancheta anterior e defina o segundo botão Ação + como uma ação não transacional, por exemplo, Reprodução de áudio ou Reprodução de fala. Observe que, se você selecionar a Reprodução de áudio ou a Reprodução de fala como a primeira ação, não poderá adicionar uma segunda ação.
    • Destino: selecione a prancheta de destino para a qual será feita a transição da animação.
    • Atenuação: selecione uma opção para criar efeitos de atenuação. Por exemplo, selecione Fade Out se você quiser que as animações do protótipo comecem rápidas e diminuam gradativamente de velocidade até o final.
    Fluxo de trabalho de Animação automática
    Fluxo de trabalho de Animação automática

    A. Selecionar o tipo de Acionador B. Definir a Ação como Animação Automática C. Selecionar a prancheta de destino D. Escolher um efeito de Atenuação 

  4. Para definir mais interações para um objeto, selecione o objeto com uma interação já definida e clique no botão + na prancheta. Como alternativa, você também pode clicar em + no Inspetor de propriedades.

     Lembre-se de que você pode aplicar os acionadores Tocar, Arrastar, Focalizar e Tempo uma vez e VozTeclas e Controle várias vezes. 

  5. Selecione   para visualizar suas animações nos navegadores compatíveis

     Lembre-se de que o XD não oferece suporte para rolagem durante a visualização de pranchetas com animação automática.

Exemplos e arquivos de amostra

Saiba mais

Para saber mais sobre animação automática no XD, assista a este vídeo.
Duração: 6 minutos

Receba ajuda com mais rapidez e facilidade

Novo usuário?