[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

Participe – Maratona Xamarin gratuita e com certificado da Microsoft

Share this on WhatsAppMicrosoft Brasil cria maratona Xamarin e da certificado No dia 30 de janeiro de 2017 a Microsoft Brasil irá realizar uma Maratona Xamarin com direito a certificado.

Mobile 2 Comments

Curso Ionic 5 é lançado, garanta cupons grátis!

Share this on WhatsAppFala Dev! Passando aqui rapidinho para informar que o curso de Ionic 5 do Zero até Publicação acaba de ser lançado! Este curso é para pessoas iniciantes

Mobile 0 Comments

Curso de Ionic 4 é lançado!

Share this on WhatsAppSe você gosta de criar aplicativos para as plataformas (Android e IOS) ou tem vontade de criar uma versão web do seu aplicativo em PWA, esse post

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