Breve Visão Geral

O widget Lottie permite adicionar animações leves e escalonáveis aos ShoutOuts de Layout Dinâmico usando arquivos JSON do Lottie. As animações do Lottie carregam rapidamente, escalam sem pixelização e ajudam a melhorar o envolvimento visual sem afetar o desempenho.

Este artigo explica como adicionar uma animação Lottie a um ShoutOut, editá-la e configurar ajustes de reprodução.

Como funciona

As animações do Lottie são arquivos baseados em JSON hospedados no LottieFiles. No Designer Visual, você adiciona um widget Lottie e o vincula a uma animação JSON hospedada, que é renderizada diretamente dentro do ShoutOut.

Somente links JSON gerados a partir de LottieFiles são suportados no Designer Visual.

Adicionar uma animação Lottie

Para adicionar uma animação Lottie a um ShoutOut:

1. No Designer Visual, selecione o ícone + no Menu lateral
2. Selecione Lottie e arraste-o para a tela
3. Selecione Alterar animação para abrir LottieFiles
   • Se você não tiver uma conta LottieFiles, crie uma gratuitamente
4. Em LottieFiles, escolha uma animação e selecione Gerar link
5. Escolha o local de upload para adicionar a animação aos seus projetos
6. Copie o link do ativo JSON que foi gerado
7. Cole o link JSON no campo Colar um URL no Designer Visual

Configure os ajustes de reprodução

Você pode controlar como a animação é executada no saco de propriedades.

As opções de reprodução incluem:

• Reproduzir em um loop: ative para reproduzir continuamente a animação Lottie
• Velocidade de reprodução: defina a velocidade de reprodução, como 1x, 1,5x ou 2x

Uma visualização da animação aparece no Designer Visual depois que o link é adicionado.

Eleva o teu ShoutOut com animações Lottie

Editar animações do Lottie

Para editar uma animação Lottie:

• Abra a animação no Editor Lottie

Notas técnicas

• O widget Lottie está disponível apenas no Designer Visual Dinâmico
• Somente o link JSON gerado no LottieFiles funciona no Designer Visual

Recursos

Para saber mais sobre as funcionalidades do Lottie, consulte os seguintes recursos:

• O que é uma animação Lottie?
• Centro de Educação Lottie
• Lottie FAQ e Suporte