Por Howard Pinsky
Oi, pessoal! Eu sou Howard Pinsky, evangelista sênior do XD aqui na Adobe. Hoje veremos como adicionar vídeos e animações do Lottie a seus protótipos para aperfeiçoá-los. Vamos lá.
Estamos aqui no Adobe XD com uma plataforma de jogos que estou criando. Para dar mais vida a essa experiência, vamos adicionar alguns vídeos e animações do Lottie. Na tela inicial, tenho uma imagem grande muito legal na parte superior, mas ela está me parecendo muito estática. Adicionar vídeos a um projeto do XD é muito similar a adicionar fotos. Eles podem ser arrastados diretamente para a tela ou em uma forma vazia, para serem mascarados. Depois de adicionados e selecionados, você notará as opções de reprodução de vídeo no Inspetor de propriedades. Aqui, você não só poderá controlar quando o vídeo é reproduzido... neste caso, automaticamente, quando a visualização é iniciada. Mas clicar no ícone à esquerda revelará um HUD com ainda mais controles, incluindo a capacidade de definir uma miniatura personalizada, depurar e visualizar o vídeo, ativar ou desativar o áudio, cortar, o que veremos em breve, e reproduzir em loop.
Agora que adicionamos um vídeo e escolhemos quando ele é reproduzido, iniciar a visualização nos permitirá vê-lo em ação. E, só com essa única adição, nosso protótipo já tem uma vida totalmente nova. Antes de vermos como adicionar animações do Lottie, vamos mudar para um dos outros estados neste componente em destaque. Aqui, tenho outro vídeo que é reproduzido automaticamente. Mas, como você pode ver na visualização, leva alguns segundos para que a aeronave entre na cena. Quando olhamos rapidamente para o HUD há alguns instantes, mencionei que havia uma forma de cortar seus vídeos. Entrar nesse modo permite definir os pontos inicial e final arrastando pelas alças. Neste caso, quero que a reprodução comece imediatamente antes de a ação começar. Quando tudo estiver pronto, a marca de seleção aplicará essas alterações. Convém observar que o corte é totalmente não destrutivo, então você pode retornar ao HUD para ajustar ou desfazer suas edições.
Ao voltar ao estado padrão, vou iniciar a visualização mais uma vez. Agora, quando clico no segundo estado, o vídeo é reproduzido automaticamente no novo ponto inicial. Também conectei um terceiro vídeo. E, se eu voltar ao primeiro, há uma visualização expandida que revela mais informações. Você pode até notar que os vídeos presentes entre os estados de Animação automática são reproduzidos continuamente sem interrupção.
Certo! Vamos dar uma olhada no Lottie. Na tela Community, configurei um componente que é revelado quando o cursor do mouse passa sobre ele. Dentro dele, esbocei uma área adicional, que eu adoraria usar para um seletor de emojis animados. Vamos editar o componente principal para que possamos adicionar nosso conteúdo. Passando para o grupo empilhado, vou rapidamente duplicar a camada existente algumas vezes e alternar para o Finder, onde tenho animações adoráveis do Lottie de vários emojis criados por Anna Movin no ui8.net. Assim como nos vídeos, os arquivos do Lottie podem ser arrastados diretamente para uma camada existente do Lottie, diretamente para a tela ou mascarados em formas para serem dimensionados. Quando as camadas são selecionadas, a reprodução pode ser configurada à direita. E, para tudo isso, queremos que a reprodução seja automática. Algo a destacar aqui é que, ao contrário dos vídeos, o ícone à esquerda é estritamente para o controle do loop, que nós queremos definir para essas interações. Perfeito.
Ao voltar ao estado padrão neste componente, agora posso visualizar a tela Community. Passe o cursor sobre a mensagem e, depois, sobre o ícone do emoji para revelar nossas animações do Lottie e vê-las em ação.
Antes de mostrar o protótipo completo, vamos dar uma olhada no acionador End of Playback, que pode ajudar a automatizar algumas de suas interações de vídeo e do Lottie. Mostrei anteriormente o estado expandido do componente em destaque. Nesta seção, tenho um botão que leva a um estado de download. Aqui, eu incluí uma animação do Lottie que começa imediatamente após a transição. Mas a pergunta que você deve estar se fazendo é: o que acontece depois que a animação termina?
Ao mudar para o modo Protótipo, você verá que há um acionador Tempo anexado, mas podemos adicionar uma segunda interação clicando no botão azul de adição. Isso nos permite escolher o acionador End of Playback no Inspetor de propriedades, que instruirá o XD a executar a transição após o término do vídeo ou da animação do Lottie. E, para essa interação, uma transição simples que leva ao estado Reproduzir deve funcionar. Esse acionador também funciona entre pranchetas. No estado de carregamento do mesmo componente, adicionei outra animação do Lottie. Além do acionar Tempo, há um acionador End of Playback que leva à tela do Jogo. É claro que nada disso significa muito se não for visto em ação. De volta ao estado padrão, vou iniciar a visualização, expandir esta exibição e iniciar a interação de Download. Graças ao acionar End of Playback, o componente faz automaticamente a transição para o estado Reproduzir, onde agora posso clicar para iniciar a animação de carregamento. Quando isso termina, ocorre a transição de prancheta.
Esses exemplos são apenas uma pequena amostra do que pode ser feito com vídeos e com o Lottie. Falarei sobre muitos outros casos de uso em tutoriais futuros. Mas, antes de terminarmos, aqui está um resumo de toda a experiência. Divirta-se.
Dê vida nova aos seus protótipos com animações. Neste tutorial, você verá como criar uma plataforma de jogos com vídeos e animações do Lottie. Arraste arquivos de vídeo e do Lottie diretamente para a tela de design ou para uma forma vazia que serve de máscara. Ajuste as opções de reprodução de vídeo no Inspetor de propriedades. Adicione uma miniatura, depure e visualize vídeos, ative o áudio, corte videoclipes e reproduza em loop. Conecte interações com transições de Animação automática e assista a vídeos sem interrupções. Crie interações usando o acionador End of Playback para fazer a transição automática para outro estado quando uma animação do Lottie terminar.
