Criar transições temporizadas

Saiba como usar acionadores de tempo para criar transições temporizadas.

Com os acionadores de tempo, é possível criar transições entre pranchetas com base no atraso de tempo e na duração. 

Você pode usar os acionadores de Tempo junto com as Ações para criar diversos efeitos, como animações em loop, barras de progresso e muito mais. Veja abaixo um exemplo de um acionador de Tempo usado com a Animação automática para criar um efeito em loop.

Contadores animados usando transições de tempo
Contadores animados usando transições temporizadas

Para criar uma transição temporizada simples, siga as seguintes etapas:

  1. No modo de Protótipo, clique no título da prancheta de origem e conecte-a à prancheta de destino. 

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

    • Acionador: selecione Tempo. Se a opção Tempo não estiver disponível, é possível que você não tenha selecionado a prancheta inteira, incluindo o título, na etapa 1.  
    • Atraso: insira o tempo de atraso para iniciar a transição. O intervalo aceitável é de 0,2 a 5 segundos.
    • Ação: selecione Transição. Você também pode usar o acionador Tempo com outras Ações, como Animação automática, Sobreposição e Reprodução de fala para obter vários efeitos. Consulte Exemplos para saber como criar efeitos de animação em loop.
    • Destino: exibe a prancheta de destino conectada na etapa 1, que pode ser alterada, se necessário.
    • Atenuação: selecione o efeito de atenuação que você deseja aplicar à prancheta de origem.
    • Duração: insira a duração do efeito de atenuação para indicar o período de tempo do efeito de atenuação. O intervalo aceitável é de 0,2 a 5 segundos. 

    O XD salva seus atributos na prancheta e os oferece como padrão nas próximas telas.

  3. Para visualizar a transição temporizada, selecione  

Exemplos e arquivos de amostra

Animações de contadores são usadas para exibir números de uma maneira interessante e chamativa. Deseja aprender a usar transições temporizadas para criar um placar animado?

1. No modo de Protótipo, selecione o título da prancheta e defina as seguintes opções:

  • Acionador: selecione Tempo.
  • Atraso: insira 0,8 segundos como atraso de tempo.
  • Ação: selecione Animação automática.
  • Atenuação: selecione Atenuar para dentro/fora.
  • Duração: insira 4 segundos como duração de tempo.

2. Clique em  para visualizar o contador animado.

Baixe os arquivos de amostra e assista a este vídeo para ver como funciona.

Duração do vídeo: 2 minutos e 47 segundos.

Deseja usar uma transição temporizada para criar uma experiência de boas-vindas para seu aplicativo? Confira este vídeo e use este kit de interface de usuário gratuito para criar um fluxo de trabalho de boas-vindas.

Duração do vídeo: 5 minutos e 2 segundos.

Experiência de boas-vindas para um aplicativo

Você também pode consultar a comunidade de suporte do XD para encontrar mais exemplos e tutoriais.

Dicas e truques

Você sabia que é possível combinar as transições de Tempo com a Animação automática e a Sobreposição para criar efeitos interativos? Assista a este vídeo para saber mais.

Duração do vídeo: 8 minutos e 33 segundos.

Logotipo da Adobe

Fazer logon em sua conta