[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 18 posts

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

You might also like

Visual Studio 0 Comments

Conheça alguns atalhos do Visual Studio que irão agilizar seu dia!

Share this on WhatsAppConheça agora atalhos interessantes para usar no Visual Studio Sabemos que o mouse facilita muito o nosso dia a dia, com ele clicamos em menus, arrastamos documentos,

Curso completo e gratuito de Angular 2!

Share this on WhatsAppAprenda agora mesmo tudo sobre Angular 2 gratuitamente Sabemos que o Angular JS é um framework javascript mantido pela gigante Google e que cresce cada vez mais

Mobile 0 Comments

Curso Grátis Ionic – Estrutura de Pastas e Arquivos do Projeto

Share this on WhatsAppOlá galera, tudo bem? Bom, dando sequência à série “Iniciando com Ionic”, já esta no ar o novo vídeo. Nesse vídeo vamos conhecer um pouco sobre a

2 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

Leave a Reply