JavaScript - Animação
Você pode usar JavaScript para criar uma animação complexa tendo, mas não se limitando a, os seguintes elementos -
- Fireworks
- Efeito Fade
- Roll-in ou Roll-out
- Page-in ou Page-out
- Movimentos de objetos
Você pode estar interessado na biblioteca de animação baseada em JavaScript existente: Script.Aculo.us .
Este tutorial fornece uma compreensão básica de como usar JavaScript para criar uma animação.
O JavaScript pode ser usado para mover vários elementos DOM (<img />, <div> ou qualquer outro elemento HTML) pela página de acordo com algum tipo de padrão determinado por uma equação lógica ou função.
JavaScript fornece as duas funções a seguir para serem usadas com frequência em programas de animação.
setTimeout( function, duration) - Esta função chama function depois de duration milissegundos a partir de agora.
setInterval(function, duration) - Esta função chama function depois de cada duration milissegundos.
clearTimeout(setTimeout_variable) - Esta chamada de função limpa qualquer temporizador definido pelas funções setTimeout ().
JavaScript também pode definir vários atributos de um objeto DOM, incluindo sua posição na tela. Você pode definir os atributos superior e esquerdo de um objeto para posicioná-lo em qualquer lugar da tela. Aqui está sua sintaxe.
// Set distance from left edge of the screen.
object.style.left = distance in pixels or points;
or
// Set distance from top edge of the screen.
object.style.top = distance in pixels or points;Animação Manual
Portanto, vamos implementar uma animação simples usando propriedades de objeto DOM e funções JavaScript da seguinte maneira. A lista a seguir contém diferentes métodos DOM.
Estamos usando a função JavaScript getElementById() para obter um objeto DOM e, em seguida, atribuí-lo a uma variável global imgObj.
Nós definimos uma função de inicialização init() para inicializar imgObj onde colocamos seu position e left atributos.
Estamos chamando a função de inicialização no momento do carregamento da janela.
Finalmente, estamos ligando moveRight()função para aumentar a distância à esquerda em 10 pixels. Você também pode definir um valor negativo para movê-lo para o lado esquerdo.
Exemplo
Experimente o seguinte exemplo.
<html>
<head>
<title>JavaScript Animation</title>
<script type = "text/javascript">
<!--
var imgObj = null;
function init() {
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight() {
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
}
window.onload = init;
//-->
</script>
</head>
<body>
<form>
<img id = "myImage" src = "/images/html.gif" />
<p>Click button below to move the image to right</p>
<input type = "button" value = "Click Me" onclick = "moveRight();" />
</form>
</body>
</html>Resultado
Animação Automatizada
No exemplo acima, vimos como uma imagem se move para a direita a cada clique. Podemos automatizar esse processo usando a função JavaScriptsetTimeout() como segue -
Aqui, adicionamos mais métodos. Então, vamos ver o que há de novo aqui -
o moveRight() função está chamando setTimeout()função para definir a posição de imgObj .
Nós adicionamos uma nova função stop() para limpar o cronômetro definido por setTimeout() função e para definir o objeto em sua posição inicial.
Exemplo
Tente o seguinte código de exemplo.
<html>
<head>
<title>JavaScript Animation</title>
<script type = "text/javascript">
<!--
var imgObj = null;
var animate ;
function init() {
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight() {
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
animate = setTimeout(moveRight,20); // call moveRight in 20msec
}
function stop() {
clearTimeout(animate);
imgObj.style.left = '0px';
}
window.onload = init;
//-->
</script>
</head>
<body>
<form>
<img id = "myImage" src = "/images/html.gif" />
<p>Click the buttons below to handle animation</p>
<input type = "button" value = "Start" onclick = "moveRight();" />
<input type = "button" value = "Stop" onclick = "stop();" />
</form>
</body>
</html>Rollover com um evento de mouse
Aqui está um exemplo simples que mostra o rollover de imagem com um evento de mouse.
Vamos ver o que estamos usando no exemplo a seguir -
No momento de carregar esta página, a instrução 'if' verifica a existência do objeto de imagem. Se o objeto imagem não estiver disponível, este bloco não será executado.
o Image() construtor cria e pré-carrega um novo objeto de imagem chamado image1.
A propriedade src é atribuída ao nome do arquivo de imagem externo chamado /images/html.gif.
Da mesma forma, criamos image2 objeto e atribuído /images/http.gif neste objeto.
O # (marca de hash) desativa o link para que o navegador não tente ir para um URL quando clicado. Este link é uma imagem.
o onMouseOver o manipulador de eventos é acionado quando o mouse do usuário se move para o link, e o onMouseOut o manipulador de eventos é disparado quando o mouse do usuário se afasta do link (imagem).
Quando o mouse passa sobre a imagem, a imagem HTTP muda da primeira imagem para a segunda. Quando o mouse é afastado da imagem, a imagem original é exibida.
Quando o mouse é afastado do link, a imagem inicial html.gif reaparece na tela.
<html>
<head>
<title>Rollover with a Mouse Events</title>
<script type = "text/javascript">
<!--
if(document.images) {
var image1 = new Image(); // Preload an image
image1.src = "/images/html.gif";
var image2 = new Image(); // Preload second image
image2.src = "/images/http.gif";
}
//-->
</script>
</head>
<body>
<p>Move your mouse over the image to see the result</p>
<a href = "#" onMouseOver = "document.myImage.src = image2.src;"
onMouseOut = "document.myImage.src = image1.src;">
<img name = "myImage" src = "/images/html.gif" />
</a>
</body>
</html>