DMG CAP13 2025 VA01 SUA ANIMACAO EM CODIGOS

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

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

Agora a gente vai pegar
esse arquivo jason

e vamos levá lo
para o Vs Code para mostrar

como que a gente aplica 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 jason.

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 body movin
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 container.

A animação com o par.

Nossa variável
nós chamamos de Contem a animação

e vamos convocar o nosso Documents

Ponto Get

Pai getElementById.

A ID é isso?

Muito bem,
Vamos abrir um aos nossos parentes,

colocar as nossas aspas e apontar
a nossa animação que é a animação.

Contem né?

Então tá,

Nós começamos a criar a nossa função
using.

Ela está aqui, bonitinha

e agora vamos chamar uma
um evento para ela.

Então para isso
a gente vai colocar contêiner,

a animação, que é nossa variável,

e vamos chamar o AND.

Eu sempre coloco com e de listener,
que vai criar um evento de

click. Opa!

Clique.

Que vai levar uma função

que eu vou deixar aqui

com o nosso.

Parenteses vazio.

Ai vou abrir

bonitinho o nosso colchete e vou.

Colocar a animação

que é a nossa variável

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

e vou chamar o gol.

O show and

play.

Deixa eu ver se eu escrevi certo.

A gente não pode errar

aqui.

Google and play.

Com o valor zero,

começar a partir do zero.

E verdadeiro.

Assim foi clicado.

E ele funciona.

Vou montar um control S
e vamos ver se funcionou.

Cliquei muito rápido,
mais se eu clicar aqui e divagar

já está funcionando.

Mas tem que faltando alguma coisa.

Então o que que eu vou fazer?

Eu vou pegar um

o ID que eu coloquei
aqui no index, a animação container.

Vo abre aspas,

cursor pointer e S
para quando eu passar o mouse aqui

virá parecer que é clicado,
então quando sai da setinha

e vai para a mãozinha,
a gente sabe o que é clicado.

Cliquei.

Está funcionando.

É assim que você aplica
o seu arquivo.

Jeison No versículo de óbvio,
coloquei algumas funções

a mais para criar interatividade,
mas é basicamente isso.

Agora você já sabe como levar a sua
animações

em código para o versículo de aplicá
los em interfaces digitais.

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

interatividades
com a sua animação e pratique.