DMG CAP13 2025 VA01 SUA ANIMACAO EM CODIGOS

Você já aprendeu como animar
e também aprendeu como exportar

a sua animação em código
utilizando a extensão Bodymovin.

Agora a gente vai pegar
esse arquivo JSON

e vamos levá-lo
para o Vscode para mostrar

como a gente aplica a sua animação
em uma interface digital.

Vamos lá?

Aqui, como você pode ver,

já abrimos o VS Code criamos uma pasta
e importamos para essa pasta

o arquivo da nossa animação
que é o json.

Criamos também um "index.html"
onde nosso HTML estará todo pronto.

Importante saber que quando
você vai utilizar uma animação em lote

exportada pelo pelo bodymovin
temos que importar este link aqui

e colocar em como o "script"
no nosso HTML.

Este "cdnj' você pode acessar o site
se cdnj.com

que você vai consegui
achar este link aqui.

Ok, temos nosso script aqui

colocamos também um link também
para o "styles.css"

Aqui eu não criei ainda
nossa página de style,

mas eu vou criar clicando
com o botão direito

e "new file" ou novo arquivo.

Opa!

Antes da gente criar
eu não quero criar na pasta,

quero criar aqui fora.

Então "new file",
"styles",

porque tem que ter
o mesmo nome no nosso link.

".css" muito legal,
então tem aqui já meu o meu style

e também vou criar uma página
para o JavaScript,

já que a gente colocou o script aqui,
elencamos o script.

Então vamos lá.

"New file", "script.js",
porque é nossa linguagem JavaScript

é o que vamos utilizar.

Ok,
temos aqui uma "div'

que eu dei o nome
de "animação-container",

joguei ele ao invés de uma classe,
coloquei um ID

e defini alguns parâmetros
de tamanho e largura,

coloquei 300 pixels para cada um,
fechei minha div e linkei com o script

como eu já falei.

Agora vamos para o nosso JS.

Aqui na nossa página,
na nossa aba melhor dizendo de script,

onde nós vamos colocar
o nosso arquivo JS

e eu vou dar um "control + "
para aumentar a fonte

para você visualizar melhor.

Bom, aqui em script,
vou até tampar aqui

para a gente ficar ter uma melhor
visualização da nossa página.

Vamos que vamos criar primeiro
uma variável.

"var" e eu vou chamar essa variável
de "animacao = bodymovin"

porque a gente vai encapsular
o nosso ID aqui,

a nossa animação aqui.

"loadAnimation"
aqui vai ficar a nossa animação.

Vamos abrir um colchetes
e fechar colchetes

e dentro a gente vai criar
um "container :"

e vamos chamar o nosso ID
com um "document.getElementById".

Então, vamos colocar aspas,
não podemos esquecer,

"animacao-container".

Aqui o nosso ID,
chamando ela bonita.

Vamos ","

Ok.
Aqui vamos definir alguns parâmetros.

Como "renderer" para ele renderizar
os arquivos mais comuns.

Nesse caso eu vou utilizar "svg".
O renderer vai ficar em svg.

Ai o "loop",
no loop eu vou colocar "false",

porque eu não quero
que a minha animação

ela fique em um processo infinito
de liga e desliga,

então eu quero só que ela acione
quando eu clicar sobre ela.

Então, por isso eu coloco false
em loop

"autoplay" a mesma coisa,

porque ele vai começar
automaticamente.

Eu não quero começar
automaticamente.

Eu quero que comece com o meu click.

E "path" é o caminho
de onde está a nossa animação

está na pasta "animation/"
o nome da animação "animacao.json".

Muito bem,
já temos essa parte,

não podemos esquecer
do nosso final de ponto e vírgula

e nosso famoso "control + S".

Olha o que apareceu aqui
até agora não acontece nada,

mas a nossa animação já está aqui.

Vamos criar agora
uma função para ela

e para isso vamos criar
mais uma variável

que nós vamos chamar
de "containerAnimacao"

Opa!

Nossa variável
nós chamamos de "containerAnimação"

e vamos convocar o nosso
"documents.getElementById"

Isso, muito bem.

Vamos abrir um aos nossos parentes,
colocar as nossas aspas

e apontar a nossa animação
que é "animacao-container"

Então tá.

Nós começamos a criar a nossa função,
ela está aqui, bonita

e agora vamos chamar
um evento para ela.

Então, para isso,
a gente vai colocar 'containerAnimacao",

que é nossa variável,
vamos chamar o "add".

Eu sempre coloco
com "addEventListener",

que vai criar um evento de click.

Opa!

Click que vai levar uma função

que eu vou deixar aqui
com o nosso parênteses vazio.

Ai vou abrir o nosso colchete
e vou colocar a "animacao"

que é a nossa variável,

onde que está levando
a animação aqui em cima

e vou chamar o "goToAndPlay".

Deixa eu ver se eu escrevi certo,
a gente não pode errar.

Aqui "goToAndPlay"
com o valor zero,

começar a partir do zero
e verdadeiro.

Assim que foi clicado
ele funciona.

Vamos dar um "control + S"
e vamos ver.

Funcionou!

Cliquei muito rápido,

mas se eu clicar aqui devagar,
já está funcionando.

Mas, está faltando alguma coisa.

Então o que que eu vou fazer?

Eu vou pegar o ID
que eu coloquei aqui no index,

"animacao-container".

Vou abrir aspas,
"cursor: pointer" e S.

Para quando eu passar o mouse aqui
parecer que é clicado.

Então quando sai da seta
e vai para a mão,

a gente sabe o que é clicado.

Cliquei,
está funcionando.

E assim que você aplica
o seu arquivo json no Vscode.

Óbvio,
coloquei algumas funções a mais

para criar interatividade,
mas é basicamente isso.

Agora você já sabe como levar
as suas animações em código

para o Vscode e aplicá-las
em interfaces digitais.

Se aprofunde no estudo do código
para criar funcionalidades,

interatividades
com a sua animação e pratique.