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

Agora a gente vai pegar esse arquivo
Jeison 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

a nossa, criamos uma pastinha
e importamos para essa pastinha

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

Criamos também um index ponto HTML

onde nosso HTML estará todo pronto.

Importante
saber que quando você vai utilizar.

Uma animação em lote

exportada pelo pelo Bare Movie.

Temos que importar esta
este link aqui

e colocar em como o script
no nosso HTML.

Este CNJ você pode acessar o site
se DNJ Ponto.

Como que você
vai conseguir achar este link aqui?

Ok, Temos nosso script
aqui colocamo também.

Colocamos também um link também
para o Styles.

Acesse CSS aqui.

Eu não criei ainda nossa página de
Está eu, mas eu vou criar

clicando com o botão direito
e no fim ou no arquivo. Opa!

Antes da gente criar

eu não quero criar na pasta, quero
criar aqui fora, então nenhum fail

está ai porque tem
que ter o mesmo nome no nosso link.

Pronto, o CSS muito legal,
então tem aqui já meu estilo

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

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

Então vamos lá.

Nil, faz o script em ponto

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

aqui na nossa página, na nossa aba,
ou melhor dizendo de script, onde

nós vamos colocar o nosso arquivo JS
e eu vou dar um contra o mais

para aumentar a fonte
ficar para você visualizar melhor.

Bom, aqui
o 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,

o VAR e eu
vou chamar essa variável de animacao

igual a more

moving,
porque a gente vai encapsular

a nossa o nossa dia
que a nossa animação aqui é

no dia Animation,

aqui vai ficar a nossa animação.

Vamos abrir um

colchetes e fechar colchetes
e dentro

a gente vai criar um container.

Dois pontos

e vamos chamar a nós o nosso D

com um document

ponto

de e seu element.

Vai ai de

então vamos chamar de colocar aspas.

Não podemos esquecer a animação

com um traço

conteiner.

Aqui a nossa ideia
chamando ela bonitinha.

Vamos

vírgula

Ok? Aqui

vamos definir alguns parâmetros.

Como renderer

para ele renderizar
nos arquivos mais comuns.

Nesse caso eu vou utilizar SVG.

O renderer vai ficar em SVG,

ai um loop e o loop

eu vou colocar false
porque eu não quero que

a minha animação
ela fique num processo infinito

de liga e desligar,
então eu quero só que ela funcione

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 pé e o caminho

de onde está a nossa animação

está na pasta animation.

Se barra
o nome da animação animacao,

ponto de Não

muito bem, já temos essa parte

e não podemos esquecer

do nosso finalzinho
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

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