[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 1Comments

Curso Ionic em português – Aula 5 – Salvando e obtendo dados do localStorage

Share this on WhatsAppVeja como salvar e obter dados do localStorage Pessoal, continuando com nossa série de vídeo aulas, hoje trago para vocês dicas de como salvar contatos no localStorage

Mobile 0 Comments

Curso básico sobre XAML para iniciantes

Share this on WhatsAppCurso básico sobre XAML Uma das grandes dificuldades para quem esta iniciando o processo de desenvolvimento de aplicações universais para Windows e Windows Phone, é a manipulação

Mobile 0 Comments

Curso Ionic em português – Aula 10 – Consumindo serviços externos

Share this on WhatsAppAprenda como consumir serviços externos Pessoal, continuando com nossa série de vídeo aulas, hoje iremos criar um aplicativo dos Correios onde poderemos consultar um determinado CEP e

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