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

[IONIC] – Criação e Validação de Forms com FormBuilder e Validators

Share this on WhatsAppOlá galera, tudo bem com vocês? A dica de hoje é bastante útil em qualquer aplicação, vou ensinar a vocês como utilizar facilmente o FormBuilder e o

Mobile 0 Comments

Curso Ionic em português – Aula 6 – Excluindo e pesquisando dados

Share this on WhatsAppVeja como excluír e pesquisar dados na localStorage Pessoal, continuando com nossa série de vídeo aulas, hoje trago para vocês dicas de como excluír dados na localStorage,

Visual Studio 2 Comments

Lista de dicas e cursos gratuitos em português

Share this on WhatsAppResumão de todos os cursos que passaram pelo site Hoje resolvi trazer um resumo de todos os cursos, treinamentos, vídeo aulas que foram divulgados aqui no site

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