Animação de imagens na web

Esse post apresenta um exemplo usando HTML/PHP/Javascript que permite o usuário escolher um intervalo temporal e exibir as imagens correspondentes em uma animação. Pode ser útil para mostrar uma sequência de imagens cuja distribuição espacial dos fenômenos varie ao longo do tempo ou mesmo um conjunto de fotografias.

busca_anima

O exemplo está dividido em quatro arquivos (sem contar o estilo CSS):

1 - historico.php

Base do exemplo, de onde é incluído o arquivo com o calendário para busca (em jQuery) e o frame com a animação de imagens.

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta http-equiv="content-type" content="text/html"/>
<title>Busca por data e horário</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="arquivos/base.css" type="text/css" media="all" charset="utf-8">


</head>

<body>
	<p><?php include 'calendario_busca.php';?></p>
	<iframe id="anima" src="animacao.php" name="anima" frameborder="0" height="580" scrolling="no" width="500"></iframe> 
</body>
</html>

2 - calendario_busca.php

Composto dos campos de busca (formulários) e calendário jQuery. Caso o usuário não coloque nenhuma data/horário, é apresentado como fim a data atual e horário 00:00 e data inicial como 3 dias antes. Existe o calendário, para o início do período de buscas, e o calendário2, para o final. O resultado do formulário é enviado para o arquivo de animação de imagens.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />




<?php print("<form action='animacao.php'  method='post' name='busca' target='anima'>");?>
<?
$submit=$_POST['submit'];

if (empty($_POST['start_date']) && empty($_GET['start_date'])) {
	$start = date('d/m/Y', time()-3*24*60*60);
} else {
	$start= (empty($_GET['start_date'])? $_POST['start_date'] : $_GET['start_date']);
}
if (empty($_POST['end_date']) && empty($_GET['end_date'])) {
	$end = date('d/m/Y', time());
} else {
	$end= (empty($_GET['end_date'])? $_POST['end_date'] : $_GET['end_date']);
}

if (empty($_POST['start_hour']) && empty($_GET['start_hour'])) {
	$start_hour="00:00";
} else {
	$start_hour= (empty($_GET['start_hour'])? $_POST['start_hour'] : $_GET['start_hour']);
}
if (empty($_POST['end_hour']) && empty($_GET['end_hour'])) {
	$end_hour="00:00";
} else {
	$end_hour= (empty($_GET['end_hour'])? $_POST['end_hour'] : $_GET['end_hour']);
}
?>

<div class="filtergroup" id="date-filtergroup">
	<p style="padding-left: 10px;font-size: 15px;">Pesquisa de 
	<input type="text" id="calendario" name="datei" style="width: 80px;" value="<?php echo $start;?>" autocomplete="off"/>
	<input id="horarioi" name="horarioi" style="width: 40px;" value="<?php echo $start_hour;?>" autocomplete="off" type="text">
	 a 
	<input type="text" id="calendario2" name="datef" style="width: 80px;" value="<?php echo $end;?>" autocomplete="off"/>
	<input id="horariof" name="horariof" style="width: 40px;" value="<?php echo $end_hour;?>" autocomplete="off" type="text">
	<button id="datesearch" type="submit" >Busca</button>
	</p>
	
	</form>
</div>

3 - animacao.php

Constrói a sequência de arquivos para animação de imagens. A rotina que introduz os controles de animação ao usuário (4 - animacao.js) pode ser baixado aqui.

<HTML>
<HEAD></HEAD>
<BODY onload="launch()">


<?php include 'animacao.js'; ?> 


<?echo $lista[0];?>
</BODY>
</HTML>

Caso queria utilizar como imagem "default" a mais recente, está comentado a execução do arquivo de shell script "last_image.sh", que grava o nome dessa imagem em um arquivo, a ser guardado em um vetor pelo php:

#!/bin/bash
# retorna ultimo diretorio alterado
cd /home/user/www/dir_img/
pasta=`ls -tr | tail -1`
cd $pasta
# retorna o nome do último arquivo alterado
arquivo=`ls -tr | tail -1`
echo $arquivo
Compartilhe o link desse texto, mas se for copiar algum trecho, cite a fonte. Valorize nosso trabalho.
Mais informações na licença de uso do site.
  • Tem algum exemplo para mostrar como fica depois de pronto?