ES6 - Animação
Você pode usar JavaScript para criar uma animação complexa tendo, mas não se limitando a, os seguintes elementos -
- Fireworks
- Efeito de desvanecimento
- Roll-in ou Roll-out
- Page-in ou Page-out
- Movimentos de objetos
Neste capítulo, veremos como usar JavaScript para criar uma animaçã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 ou função lógica.
JavaScript fornece as seguintes funções para serem usadas com freqüência em programas de animação.
setTimeout(função, duração) - Esta função chama a função após a duração em milissegundos a partir de agora.
setInterval(função, duração) - Esta função chama a função após cada milissegundos de duração.
clearTimeout(setTimeout_variable) - Esta função limpa qualquer cronômetro definido pela função 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. A seguir está a sintaxe para o mesmo.
// 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 definimos sua posição e atributos à esquerda.
Estamos chamando a função de inicialização no momento do carregamento da janela.
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>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() do seguinte modo.
Aqui, adicionamos mais métodos. Então, vamos ver o que há de novo aqui.
o moveRight() função está chamando a função setTimeout () para definir a posição de imgObj.
Nós adicionamos uma nova função stop() para limpar o cronômetro definido pela função setTimeout () 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 da 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.
o src propriedade é 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 é movido para longe do link, a imagem inicial html.gif reaparecerá 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>