Ir para conteúdo


Foto

Animação Em Java Script + Tutorial


Não há respostas para este tópico

#1 zariel

zariel
  • Membros
  • 139 posts

Postado 24 February 2007 - 21:43 PM

Animação em Java Script

Nos links, os arquivos compactados com a animação exemplo que fiz, baixe e depois para visualizar clique no arquivo anima.htm (Visualize melhor no Internet Explorer, no Firefox ainda dá alguns bugs na parte da legenda deixando ilegível e lenta)

Link Direto: http://www.terzidis.com/anima.zip

mirror1: http://rapidshare.co.../anima.zip.html

mirror2: http://d.turboupload.../anima.zip.html


------------------------

Bom, galera eu me aprofundei nisso, por um motivo de local de trabalho, ou seja aonde eu trabalho os micros estão restritos a instalar programas como o Flash, ou programas de GIF animados pois lá só entra software original, e o Flash não faz parte de seus pacotes, e também a internet é restrita, só que eu posso programar para empresa ou pra mim mesmo somente com os recursos instalados

As vezes quando estava sem trabalho era chato ficar na sala sem fazer nada, sendo que eu trabalho numa empresa de ônibus e se não tiver ocorrências de defeitos eu fico na sala só acompanhando o status dos carros pelos pc's, para passar o tempo ficava desenhando ou lendo um livro... mais um dia eu tive uma idéia, já que estava fazendo 2 scripts em javascript para empresa otimizar seus relatórios, vou aproveitar e fazer um script para simular animação, aproveitei e pesquisei sobre algo relacionado na net, e esse foi o resultado obtido

Os desenhos são feitos no Paint, não é preciso desenhar bem, mas que tenha um leve noção de animação quadro a quadro, e depois é animado no java script com legendas, botão único de start e pausa, e na barra de status mostra-se a taxa de quadro da animação, não entrarei em detalhes em programação em java script ou html, apenas comentarei os pontos de importância... na net há bons tutoriais de java script, dê uma vasculhada caso não conheça a linguagem ainda e queira entender melhor este script.

E se quiser acompanhe esse tutorial, passo a passo...

-----------------------

Abra o bloco de notas ou editor de sua preferência copie ou cole essas tags

<html>
<head>
<title>Animação em JavaScript </title>
</head>
<body>
</body>
</html>


ou seja, estará criando primeiramente um pagina em html padrão, salve com “nomeda animação.html”

Agora vamos a parte do código java script que ficará entre as tags <head></head> logo abaixo da tag “title” que encontra dentro, veja abaixo como ficará, estamos primeiramente declarando as variaveis, veja que cada variavel tem um comentario (os comentarios não impedem o funcionamento do script)

<html>
<head>
<title> Animação em JavaScript </title>
<script>

//Inicializando variaveis
var taxa = 12 //aqui é a aonde chamara os quadros, por segundo
var segundo = 1000 // 1 segundo representado em milisegundos
var delay = segundo / taxa /*aqui dividimos o milisegundo pela taxa, delay será o intervalo de pausa entre cada pausa, isso respeita a interrupção da ótica humana que percebe o movimento.

Nas três variaveis acima ficou definido que essa animação terá um FPS de 12 quadros por segundo, mais nada impedi que você modifique conforme necessidade*/

var reiniciar = 231 /* essa variavel define um loop da animação, no caso, ela respeita o loop for deste script, ou seja a quantidade de imagens na animação + uma padrão que é a 1º imagem em branco que não entra na Array do script*/
//reiniciar, deverá ter um quadro a mais além da matriz, igual ao loop FOR
var repetindo = 1 // aqui soma quanta veses a animação rodou
var def = taxa // ou seja igual a 12
var frames = 230 // aqui são quantos quadros a animação terá realmente
var totalFrames = Math.round(frames / taxa) /* aqui é tirado o tempo total em segundos da animação, e arredondado para o segundo mais próximo */
var anima = new Array(230) /* aqui é o mesmo que a variavel frames, só que estara armazenado na Array que loop FOR referenciará */
//A matriz da animação deve ter a quantidade dos quadros iguais as imagens
var quadro=0 // aonde pode acessar o quadro corrente em tempo de execução
var tempo_acabado=null /* para o setTimeout que faz o Delay (intervalo) da animação, parando de vez a animação */
//Fim das variaveis
</script>
</head>
<body>
</body>
</html>


Veja acima que todas a variáveis tem um significado, e nenhuma delas deve ficar sem um valor, pois o script só funciona se elas estiverem com valores apropriados, como já foi comentado acima

Abaixo declaro as funções, copie ou digite o código abaixo dentro so script logo abaixo ao “fim das variaveis”

A funções estão bem comentadas, depois se quiser, para um código mais limpo, pode apagar as linhas de comentários


//Inicialização das funções
/*A função “carrega”, é a função que carregará todas as imagens de sua animação presentes no diretório do script, o loop for dentro dela faz a armazenagem das imagens dentro da array declarada, “anima[]”*/
//

function carrega(){
for(var i=1; i<231; i++){

//loop for, deve ter 1 quadro a mais do que a matriz (Array) por motivo de indice
anima[i-1]=new Image()
anima[i-1].src="anima"+i+".jpg"
}
tempo_anime = setTimeout("anime()",delay)
/* essa é a função mais importante, pois é ele que cria o delay ( intervalo do FPS) */
}
//
/* A função “anime”, é a função que incrementa o formulario da pagina em HTML, para que seja atualizado a animação na tela, respeitando O FPS criado, que no caso é 12 quadros por segundo, e tambem é encarregada de mostrar o status atual da animação na barra de status pra melhor acompanhamento*/
//

function anime(){
document.animando.src = anima[quadro].src
quadro++
window.status="Animação rodando pela : "+repetindo+"º vez | taxa de quadro: "+def+" quadros por segundo | Quadro: "+quadro
dialogo()
if (quadro>229){
quadro = 0
repetindo++
}
tempo_anime = setTimeout("anime()",delay)
/* essa é a função mais importante, pois é ele que cria o delay ( intervalo do FPS) */
[color=green]}

//
/* A função “dialogo” é a função que fará as legendas, de acordo com o quadro escolhido para iniciar o dialogo, seja quando narra, ou conversa, isso é você que decidira em qual quadro sua anima terá o dialogo e qual quadro cessa o dialogo*/
//

function dialogo(){
if(quadro>30){
document.mensagem.texto.value = "Adriano animações java script"
}
if(quadro>60){
document.mensagem.texto.value = "apresenta:"
}
if(quadro>80){
document.mensagem.texto.value = ""
}
if(quadro>100){
document.mensagem.texto.value = "Olha a merda que eu fiz!"
}
if(quadro>140){
document.mensagem.texto.value = ""
}
}

//
/* Esta ultima função, checará se o botão do formulario foi apertado, e executará os comando correpondente ao valor do label do botão, e essa função também é a que permite a quem interage, controlar a função “anime”*/
//

function checaBtn (){
if(document.animacao.animBtn.value == "Iniciar"){
document.animacao.animBtn.value = "Pausar"
anime()
}else{
window.status="Animação Parada, parou na: "+repetindo+"º vez que rodou | Quadro: "+quadro
document.animacao.animBtn.value = "Iniciar"
clearTimeout(tempo_anime)
tempo_acabado=null
}
}

//
//fim das funções
// fim do script



depois de “fim do script” não esqueça de fechalo com a tag: </script>

modifique agora a tag <body> para:

<body scrollbars="no" onload="carrega()" alink="#0033aa"
bgcolor="#333333" link="#442211" text="#a6a6a6" vlink="#336677">
<center><img name="animando" src="anima1.jpg" slideshow="" picture=""
height = "200" width="300">


veja que incluimos em “onload” a função carrega, declarada do script de inicialização, e inserimos a primeira imagem, que é “anima1.jpg” e o nome do objeto imagem é “animando” que é usado pela função “anime”, também declaramos o tamanho da imagem que deve ser padrão para todas as outras que você criar

6ºAgora adicionaremos 2 formularios html que fará a parte visual da animação, debaixo de body

<form name="mensagem">
<input type="text" name="texto" size="50" style="background-color : #333333; color : #a6a6a6; border : 0; font-family : Verdana, Arial, Helvetica; font-size : 12pt; text-align : center;" onfocus="window.document.mensagem.texto.blur()">
</form>
<form name="animacao">
<input value="iniciar" name="animBtn" onclick="checaBtn()" type="button">
</form>


No formulario, foi construido o botão duplo “iniciar / parar” que chama a função do script “checaBtn” e em “onfocus="window.document.mensagem.texto.blur()" é aonde chacrá as mudança do texto da legenda, atenuando conforme a função “dialogo” do script pedir

Se desejar, Para mais limpeza, código inteiro sem comentários ficará assim:

<html>
<head>
<title>Animação em JavaScript </title>
<script>
var taxa = 12
var segundo = 1000
var delay = segundo / taxa
var reiniciar = 231
var repetindo = 1
var def = taxa
var frames = 230
var totalFrames = Math.round(frames / taxa)
var anima = new Array(230)
var quadro=0
var tempo_acabado=null
function carrega(){
for(var i=1; i<231; i++){
anima[i-1]=new Image()
anima[i-1].src="anima"+i+".jpg"
}
}
function anime(){
document.animando.src = anima[quadro].src
quadro++
window.status="Animação rodando pela : "+repetindo+"º vez | taxa de quadro: "+def+" quadros por segundo | Quadro: "+quadro
dialogo()
if (quadro>229){
quadro = 0
repetindo++
}
tempo_anime = setTimeout("anime()",delay)
}
function dialogo(){
if(quadro>30){
document.mensagem.texto.value = "Adriano animações java script"
}
if(quadro>60){
document.mensagem.texto.value = "apresenta:"
}
if(quadro>80){
document.mensagem.texto.value = ""
}
if(quadro>100){
document.mensagem.texto.value = "Olha a merda que eu fiz!"
}
if(quadro>140){
document.mensagem.texto.value = ""
}
}
function checaBtn (){
if(document.animacao.animBtn.value == "Iniciar"){
document.animacao.animBtn.value = "Pausar"
anime()
}else{
window.status="Animação Parada, parou na: "+repetindo+"º vez que rodou | Quadro: "+quadro
document.animacao.animBtn.value = "Iniciar"
clearTimeout(tempo_anime)
tempo_acabado=null
}
}
</script>
</head>
<body scrollbars="no" onload="carrega()" alink="#0033aa"
bgcolor="#333333" link="#442211" text="#a6a6a6" vlink="#336677">
<center><img name="animando" src="anima1.jpg" slideshow="" picture=""
height = "200" width="300">
<form name="mensagem">
<input type="text" name="texto" size="50" style="background-color : #333333; color : #a6a6a6; border : 0; font-family : Verdana, Arial, Helvetica; font-size : 12pt; text-align : center;" onfocus="window.document.mensagem.texto.blur()">
</form>
<form name="animacao">
<input value="iniciar" name="animBtn" onclick="checaBtn()" type="button">
</form>
</body>
</html>

Depois, deve se fazer a anima no braço, quer dizer no meu caso foi no paint, pois era o único editor disponivel, apesar de ser antiquado era oque eu tinha, fiz o primeiro quadro e nomei “anima1.JPG” e o segundo como “anima2.JPG” e assim respectivamente até somar 230 quadros que tem a animação do exemplo

Oque você deve Ter em mente é que as imagens e os script tem que se comunicar, ou seja se fizer 20 quadros de animação, deve referenciar igualmente ao que foi orientado no script e todas as imagens deve estar no mesmo diretório, mas se quizer pode criar uma pasta para organizar melhor, só que daí terá que modificar algumas partes do script

Quem se aventurar a fazer e tiver duvidas é só perguntar

Falow!!!

Até o próximo tuto...

(esse tutorial escrevi no meu trampo nas horas vagas)
<!--sizeo:3--><span style="font-size:12pt;line-height:100%"><!--/sizeo--><!--coloro:blue--><span style="color:blue"><!--/coloro--><!--fonto:Arial--><span style="font-family:Arial"><!--/fonto--><i>"Todo conhecimento existente, ainda seria tolice perante sua imaginação!"</i> <!--sizec--></span><!--/sizec--><!--colorc--></span><!--/colorc--><!--fontc--></span><!--/fontc-->

<b>Trabalhos concluidos:</b>

<a href="http://www.terzidis.com" target="_blank">Terzidis Gallery - Galeria de pinturas realistas</a> - (WebSite)
<a href="http://rapidshare.co...rvete.zip.html" target="_blank">Mortal Kombat - Subzero sorveteiro</a> (Animação) - Assista!
<a href="http://www.newground...al/view/382152" target="_blank">K.O.F Anime - sample</a> (Animação) - Assista!




Responder



  


0 usuário(s) está(ão) lendo este tópico

0 membros, 0 visitantes, 0 membros anônimos