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 VS Code 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 o nosso HTML estará pronto.

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

exportada pelo Bodymovin,
temos que importar este link aqui

e colocar como script
no nosso HTML.

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

que você vai conseguir
achar esse link aqui.

Ok, temos o nosso script aqui.

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

Aqui eu não criei ainda
a 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á o meu style

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

já que a gente colocou o script aqui,
linkamos o script,

então, vamos lá.

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

É o que vamos utilizar.

Ok,
temos aqui uma "div',

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

joguei, 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,

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

para você visualizar melhor.

Bom, aqui em script,
vou até tampar aqui

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

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 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.

Vírgula.

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.

Aí em "loop",
eu vou colocar "false",

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

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 clique.

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

Está na pasta
"animation/animacao.json".

Muito bem,
já temos essa parte.

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

e o 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 "containerAnimacao"

e vamos convocar o nosso
"documents.getElementById".

Isso, muito bem.

Vamos abrir os nossos parênteses,
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.

E agora vamos chamar
um evento para ela.

Então, para isso,
vamos colocar 'containerAnimacao",

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

Eu sempre coloco
com "addEventListener",

que vai criar um evento de "click".

Que vai levar uma função,

que eu vou deixar aqui
com os nossos parênteses vazios.

Aí, vou abrir o nosso colchete
e vou colocar "animacao",

que é a nossa variável, né?

Onde 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 for 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 eu vou fazer?

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

"animacao-container".

Vou abrir aspas,
"cursor: pointer;",

para quando eu passar o mouse aqui
parecer que é clicável.

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

a gente sabe que é clicável.

Cliquei,
está funcionando.

E é assim que você aplica
o seu arquivo JSON no VS Code.

Ó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

e interatividades
com a sua animação e pratique.