No modo de Protótipo, clique no título da prancheta de origem e conecte-a à prancheta de destino.
Última atualização em
10 de fev de 2023
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.
Para criar uma transição temporizada simples, siga as seguintes etapas:
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.
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 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 numérico 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.
Recursos relacionados
Fale conosco
Se você tiver alguma dúvida ou sugestão para compartilhar, venha participar da comunidade do Adobe XD. Adoraríamos ver suas criações e ouvir o que você tem a dizer.
Criar protótipos de UX com o Adobe XD
Crie modelos interativos para sites e aplicativos para dispositivos móveis.
