|
This page in English |
Para criar páginas animadas de forma simples pode recorrer-se a diversos métodos, consoante o tamanho e as características do efeito pretendido:
<META HTTP-EQUIV="Refresh" CONTENT="90; URL=nova_pagina.html">
<HEAD>
e
</HEAD>
), redirecciona a janela para a página
nova_pagina.html
ao fim de 90 segundos. Encontrará nas minhas páginas múltiplos exemplos deste comando.
Os dois elementos base da animação de imagens com JavaScript são 1) a possibilidade de mudar o ficheiro de uma imagem mudando o seu atributo
SRC
e 2) a possibilidade de lançar temporizadores que ao atingir o seu termo activam funções específicas.
Como primeiro exemplo lance a animação simples. Assim a explicação será melhor ilustrada.
Para iniciar a animação carregue no botão Start. Para parar carregue no mesmo botão que entretanto mudou para Stop. Enquanto a animação está parada, pode mudar o período alterando o valor na janela.
Note que o ritmo de
substituição está limitado pelo tempo de transmissão das imagens (não é por acaso que elas são pequenas).
Este exemplo é baseado num outro apresentado nas páginas Netscape JavaScript Central.
A animação usa uma tabela de 15 imagens(1), guardadas no array
anims[]
. Quando a página é acedida, estas imagens são carregadas automaticamente através da chamada a
imageLoad()
.
A função central desta página é a função
animator()
. Sempre que
animator()
é chamada o nome da próxima imagem a visualizar é copiado para a imagem da animação, chamada
animImage
. De seguida, o índice avança uma posição:
document.animImage.src = anims[frame].src;
frame=frame+1;
if (frame>14) frame=0;
A última linha activa o temporizador (timeout). Quando o intervalo (definido em milisegundos) expirar, o browser chama automaticamente
animator()
.
timeout_state= setTimeout("animator()", 1000*document.animForm.animPace.value);
Finalmente a função
buttonCheck()
trata do arranque e da paragem da animação. Note-se que para arrancar a animação é preciso lançar expressamente
animator()
e que, ao parar a animação é necessário apagar o temporizador para que
animator()
não seja chamada.
No corpo da página está implementada uma form para controlar o ciclo da animação, com um botão de comando
<INPUT type="button" ...>
e uma janela
<INPUT type="text" size="10" ...>
para definir o valor do período.
1 Nota: nesta implementação há 16 imagens na página: 1 imagem visível e 15 imagens que não são apresentadas. Contudo, só os 15 nomes das imagens são usados. Assim sendo, poderia guardar-se apenas os nomes; preferiu-se esta solução para carregar de início todas as imagens na cache do browser, acelerando a animação.
O segundo exemplo é um desenvolvimento da Animação. Neste caso, procurou-se imitar um projector de slides, equipado com botões semelhantes aos de um videogravador.
Este exemplo é mais complexo porque junta ao mecanismo básico, que é o mesmo, vários efeitos adicionais. Aconselho o leitor a só passar ao estudo deste script quando compreender claramente o anterior.
Comparando o Projector de slides com a Animação:
landImageName
e
portImageName
, correspondendo às posições deitada (landscape) e vertical (portrait).
nextImage
que acolhe a próxima imagem a apresentar.
Math.random()
. Esta função é chamada duas vezes: a primeira para escolher entre os duas orientações das imagens, de acordo com a proporção entre elas:
var a=Math.random();
if(a < nLandImg/nTotlImg) { // imagem deitada }
else { // imagem vertical }
e pause 
, enquanto o botão stop
fecha a janela e o botão de ajuda 
mostra um pequeno manual de instruções.
A maior diferença contudo, reside na utilização de layers (=camadas), uma característica dos browsers da geração 4.0 e seguintes que implementam JavaScript 1.2.
Esta técnica permite sobrepôr diversas páginas tal como elementos num cenário de teatro. E, de forma análoga, as camadas deslocam-se, tornam-se invisíveis ou opacas no decurso da apresentação.
Foi necessário usar layers para ultrapassar uma limitação dos browsers: é possível mudar o ficheiro de uma imagem (o atributo
SRC
) mas não as suas dimensões (os atributos
WIDTH
e
HEIGHT
). Por isso, para apresentar imagens em dois formatos é necessário apresentar duas camadas alternadamente:
if(nextImgType=="land") {
document.slideL.src = nextImage.src;
if(isNav4) document.port.visibility="hidden";
if(isIE4) document.all.port.style.visibility="hidden";
}
if(nextImgType=="port") {
if(isNav4) {
document.port.visibility="visible";
document.port.document.slideP.src = nextImage.src;
}
if(isIE4) {
document.slideL.src = nextImage.src;
document.all.port.document.slideP.src = nextImage.src;
document.all.port.style.visibility="visible";
}
Para cúmulo, as implementações de layers dos dois browsers principais são diferentes e por isso é necessário identificá-los no início e duplicar o código para cada um dos casos.
Acima dos dois layers de imagens existe o layer com o manual de instruções.
Os três layers são codificados da forma seguinte: no corpo (
<BODY>
) do texto estão as imagens deitadas, numa camada de índice 1 (sobre o corpo) estão as imagens verticais e no topo a ajuda. As duas camadas adicionais são criadas no cabeçalho, dentro de um par de tags
<STYLE>
. Note-se que, no início, estas duas camadas são invisíveis:
<STYLE type="text/css">
<!--
#port {position:absolute; top:8; left:8; visibility:hidden; z-index:1;}
#help {position:absolute; top:8; left:8; visibility:hidden; z-index:2;}
-->
</STYLE>
Para criar o código HTML correspondente às duas camadas usa-se a tag
<SPAN id="port"> ... </SPAN>
inscrevendo-se o código no interior. Num browser de geração anterior à 4.0 estas três camadas apareceriam sequencialmente na página, depois de muitos erros de JavaScript :-(
Actualizado: 10-Agosto-99
©1999 João Gomes Mota