[IONIC] – Animações com Lottie Files (ng-lottie)

[IONIC] – Animações com Lottie Files (ng-lottie)

Olá devs, tudo bem por aí??

Bom, a dica de hoje é bem legal e com certeza deixa nossos apps bem mais intuitivos e interessantes, pois iremos utilizar animações com Lottie Files, instalando o ng-lottie.

1. Criar o projeto Ionic

Vamos começar gerando um novo aplicativo Ionic em branco, para fazer isso, apenas execute o seguinte comando:

Uma vez criado, vamos entrar no diretório do Projeto, executando:

2. Instalando o ng-lottie

Antes de tudo, devemos instalar através do npm, o ng-lottie, executando o comando:

3. Importando no App.module

Devemos importar e adicionar aos Imports, para isso vamos acessar o arquivo src/app/app.module.ts

4. Implementando o Lottie Animation

Bom, agora iremos implementar em nossa homepage (src/pages/home/home.ts):

Criamos uma variável chamada lottieConfig do tipo any com 3 propriedades:

  1. path: será o caminho do nosso arquivo lottie (como exemplo, baixando nesse site)
  2. autoplay: para começar automaticamente a animação
  3. loop: para que quando terminar a animação, começar novamente automaticamente.

Pronto, feito isso, iremos para o arquivo src/pages/home/home.html e colocar nosso lottie na tela:

Simplesmente colocamos a tag <lottie-animation-view>, passamos como options, o lottieConfig criado no arquivo home.ts anteriormente e definimos 200 para altura e largura.

Pronto!!!

5. Executando o projeto

Simplesmente é isso pessoal, muito fácil, não é??

Vamos ver o resultado, então digite o comando

ou

ou

e deveremos ter algo semelhante à isso:

Espero que tenham gostado e que possam utilizar daqui pra frente nos projetos de vocês essa dica bem bacana.

Caso tenham gostado, compartilhe com os amigos, e se houver dúvidas podem comentar, que o mais breve possível eu respondo!!

O Código fonte para tudo isso que fizemos, encontra-se aqui. E também tem um vídeo explicando no Canal do Abranches.

Valeu, até mais!

Previous Criando uma Splash Screen animada no Ionic 2/3 com HTML e CSS3
Next Trabalhando com leaflef no Ionic 2/3

About author

Junior Abranches
Junior Abranches 19 posts

Um apaixonado por tecnologia e desenvolvimento web e mobile. Compartilhar e aprender sempre!

You might also like

Mobile 0 Comments

Bomba! Xamarin agora permite desenvolver para iOS sem mesmo ter um Mac!

Share this on WhatsAppO Xamarin Live permite aos desenvolvedores implantar, testar e depurar seus aplicativos diretamente em dispositivos iOS e Android. Para isso basta instalar o aplicativo Xamarin Live Player

Mobile 0 Comments

Curso criando aplicativo Uber com Ionic 2

Share this on WhatsAppAprenda criar um aplicativo igual do Uber com Ionic 2 Fala galera, um tempo atrás um sujeito chegou até a mim e me pediu para criar um

Mobile 0 Comments

Aprenda criar componentes no Ionic 4

Share this on WhatsAppFala galera!Hoje irei compartilhar com vocês uma dica muito útil que vai permitir que você evite de ficar replicando códigos no Ionic. Imagine um app que tenha

4 Comments

  1. Rafael Silva
    janeiro 22, 09:36 Reply
    Que massa Junior, já penso em algumas coisas pra projetos. Parabéns. Olha, será que não rola um tuto sobre login/api? Eu estou procurando na internet sobre como autenticar usuario usando php/mysql. Valew
  2. Ana
    agosto 21, 15:17 Reply
    Amigo, vc sabe me dizer como eu faço para ter uma page simples com dois botoes grandes arredondados com apenas icone centralizados no meio da page? tentei fazer de diversas formas mas nenhuma ficou legal, se puder me ajudar, te agradeço. abraço
  3. Ana
    agosto 21, 15:44 Reply
    path: será o caminho do nosso arquivo lottie (como exemplo, baixando nesse site) sobre esse path se for usado em um aplicativo publicado na playstore tem que dar os créditos para o site?

Leave a Reply