suaves - scroll animado javascript

¿Desplazamiento suave de mosaicos de imágenes en una cuadrícula grande?

Question

Oyente desde hace mucho tiempo, primera vez que llama aquí.

Ok, me disculpo por la extensión de esta publicación, pero quiero ser muy claro en lo que estoy tratando de hacer y en lo que he intentado guiar con la esperanza de sus respuestas.

El objetivo: estoy tratando de crear una cuadrícula de mosaicos (imágenes) de 100 x 100 y mostraré solo una parte de la cuadrícula a la vez porque las imágenes son de 240 x 120. Al hacer clic en los botones (nota: no es necesario desplazar el mouse, zoom, etc.), el usuario se desplazará horizontal y verticalmente.

Como analogía, tome un tablero de damas que esté configurado para jugar y lo está mirando hacia abajo. Sería bastante simple mostrar, requiriendo solo unas pocas imágenes base y ubicándolas en una cuadrícula. Ahora, considera que solo querías mostrar el tercio inferior del tablero. Luego, cuando un usuario hace clic, mueve su vista al medio y otro clic lo lleva al primer tercio del tablero. Este es un ejemplo simple de lo que estoy tratando de lograr, excepto en una cuadrícula mucho más grande con una vista / movimiento más pequeño.

Lo que he intentado:

1. Primero escribí el código en PHP para dibujar la cuadrícula completa de 100x100 y todo se veía genial
2. Luego modifiqué el código para escribir archivos para cada cuadrado, guardándolos como XY.png
3. Me absorbí en un mundo de herramientas de mapas y herramientas de tipo zoomify
4. Tuve algún éxito parcial escribiendo mi propia solución

Herramientas de mapa / Zoomify Fail:

Después de obtener el mapa completo y los mosaicos, traté de averiguar cómo diablos solo para desplazar parte de esta ventana. Se encendió una bombilla: "¿qué pasa con algo como la forma en que Google Maps hace las cosas?" Fue entonces cuando empezaron los problemas y me chupé un poco por el agujero del conejo investigando todas estas herramientas de mapas que realmente no me llevaron a ninguna parte porque, sencillamente, parecen estar hechas solo para mostrar mapas geográficos.

Sin embargo, me llevaron a Zoomify en un momento u otro y pensé que realmente podría ser una opción. El primer problema fue que parecía que no podía tomar mis propias baldosas sin una sola toma de la imagen completa, así que probé todos los programas de captura de pantalla bajo el sol para intentar obtener una captura completa de mi navegador con la cuadrícula completa para permitir Zoomify los hace. Digamos que no funcionó, pero lo intenté con un tamaño reducido. Funcionó, pero perdió mucha calidad y me di cuenta de que zoomify ni siquiera logra lo que necesito porque 1. el rollo no es tan suave; y 2. estas imágenes eventualmente contendrán algunos enlaces conectados con sus acordes XY, lo que significa que necesito control sobre cuánto se desplaza cada vez que se hace clic en las flechas arriba, abajo, izquierda, derecha.

Mi intento no tan fallido de hacerlo yo mismo

Ok, luego volví a lo básico y lancé la cuadrícula en un DIV con desbordamiento: oculto en el CSS. Genial, ahora tenía una ventana. Sin embargo, no quería cargar todas estas imágenes a la vez, por lo que dibujé solo una parte de la cuadrícula en DIV con posiciones únicas con ID únicas (por ejemplo, Tile_1_1). Todo se veía genial, pero ahora necesitaba que pareciera que estás desplazándote por la cuadrícula mientras haces clic en los botones de flecha, así que lo lancé a una función javascript para esto. Hice que javascript calcule la nueva X y la nueva Y e intercambie la fuente de la imagen de todos los mosaicos, ya que todos llevan el nombre de sus coordenadas X / Y en la cuadrícula. En realidad, esto funcionó totalmente y ahora el mapa se está desplazando. El problema es que es un poco entrecortado cambiar las fuentes de la imagen. No hay ilusión de que nos estamos moviendo alrededor de esta cuadrícula tanto como el contenido está cambiando instantáneamente. y ESTE mis amigos es donde necesito nuestra ayuda.

¿Qué hice mal? ¿Estaba en el camino correcto con este último intento? ¿Necesito repensar totalmente esto o hay alguna solución simple para mover las baldosas con un poco más de elegancia que intercambiar la fuente?

Tenga en cuenta que me he vuelto bastante bueno con php, css, etc., pero en realidad nunca he invertido mucho tiempo en javascript, por lo que es posible que tenga que explicar un poco más en esa área.

PD: esto fue lo más cercano que pude encontrar en estos tableros, pero nunca llegó a una respuesta clara: desplazamiento / precarga de mosaicos (estilo de Google Maps) de capas HTML con Ajax

Actualización: Solución utilizada

Me gustaron tanto las respuestas de Cobby como las de Pseudosavant. La solución de Pseudosavant era realmente mi aliada al permitir que CSS hiciera la mayor parte del trabajo duro, sin embargo, opté por la solución de Cobby. Pensé que me daría un poco más de control y porque en realidad estoy usando una rejilla de diamante, podría rodear mi cabeza mejor (no decir que la otra no necesariamente funcionaría también).

Aquí esta lo que hice. Sé que el código es un poco tosco y necesita algo de limpieza, pero tal vez pueda ayudar a alguien.

Primero necesitaba encontrar la relación entre mi eje X e Y, así que dibujé un pequeño diagrama.

Rápidamente noté que más X significaba comenzar el diamante más a la izquierda y más arriba para obtener las coordenadas correctas en el centro de la vista (inicio definido por el usuario) y luego compensar con las coordenadas Y para quitar algo de la izquierda negativa y bajar el comienzo punto.

Luego, el PHP para dibujar la cuadrícula se parece a esto ($ xcoord y $ ycoord provienen de un formulario):

//draw the grid
//Offset leftStart and topStart by Xcoord
$leftStart = 360 - ($xcoord * 120);
$topStart = 360 - ($xcoord * 60);

//Offset leftStart and topStart by Ycoord
$leftStart += ($ycoord * 120);
$topStart -= ($ycoord * 60);

for($y = 1; $y <= 99; $y++) { //y min to y max
    $left = $leftStart;
    $top = $topStart;
    for($x = 1; $x <= 99; $x++) { //x min to x max
       //I only want to draw part of the square
       if(($x < ($xcoord + 6)  && $x > ($xcoord - 6)) && ($y < ($ycoord + 6)  && $y > ($ycoord - 6))) {
          //Put out the image - this is how i needed mine formated
          echo "/t<div class=/"move/" id=/"T" . $x . "_" . $y . "/" style=''position:absolute; left:" . $left . "px; top:" . $top . "px;''>/n";
          echo "/t/t<img src=/"./<path to your image>" . $x . "-" . $y . ".gif/">/n";
          echo "/t</div>/n";
       }
       $left = $left + 120;
       $top = $top + 60;
    }
$leftStart = $leftStart - 120;
$topStart = $topStart + 60;
}

Lance un DIV alrededor de eso con un desbordamiento: oculto y déle una ID (el mío es #tileView). Bien, ahora tienes una cuadrícula de diamante dibujada dentro de tu vista y ¡ahora tenemos que empezar a moverla!

Así es como se ve mi jQuery. Perdón si necesita mejorar, acabo de aprender Jquery y Ajax ayer.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#top").click(function(){
        var y = document.getElementById(''ycoord'').value;
        var x = document.getElementById(''xcoord'').value;
        $(".move").animate({"left": "-=120px", "top": "+=60px"}, 500);
        changeImg(x, y, ''up'');
        $("#ycoord").val(parseInt( y ) - 1);
    });     
    $("#bottom").click(function(){
        var y = document.getElementById(''ycoord'').value;
        var x = document.getElementById(''xcoord'').value;
        $(".move").animate({"left": "+=120px", "top": "-=60px"}, 500);
        changeImg(x, y, ''down'');
        $("#ycoord").val(parseInt( y ) + 1);
    });     
    $("#left").click(function(){
        var y = document.getElementById(''ycoord'').value;
        var x = document.getElementById(''xcoord'').value;
        $(".move").animate({"left": "+=120px", "top": "+=60px"}, 500);
        changeImg(x, y, ''left'');
        $("#xcoord").val(parseInt( x ) - 1);
    });
     $("#right").click(function(){
        var y = document.getElementById(''ycoord'').value;
        var x = document.getElementById(''xcoord'').value;
        $(".move").animate({"left": "-=120px", "top": "-=60px"}, 500);
        changeImg(x, y, ''right'');
        $("#xcoord").val(parseInt( x ) + 1);
    });

function changeImg(x, y, move){
    $.ajax({
        type: "POST",
        url: "addImage.php",
        data: ''x='' + x + ''&y='' + y + ''&move='' + move,  
        cache: false,
        success: function(html){
            $(html).appendTo($("#tileView"));
        }
    });
    $.ajax({
        type: "POST",
        url: "removeImage.php",
        data: ''x='' + x + ''&y='' + y + ''&move='' + move,  
        cache: false,
        success: function(xml){             
            $("removeTile",xml).each(function(id) {    
            removeTile = $("removeTile",xml).get(id);
            removeID = $("tileID",removeTile).text();
            $("#" + removeID).remove();
        });
        }
    });
}
});
</script>

El ajax llama a addImage.php para agregar una nueva fila en el lugar correcto y deleteImage.php para eliminar la fila que ahora está fuera de vista (encontré sin eliminar esas filas que las cosas empezaron a funcionar muy lentamente).

En agregar imagen, solo se determina la nueva posición y los resultados para que el html agregue en la página. Por ejemplo, la parte podría verse así (pero establezca las variables según el movimiento y luego pase por el bucle):

if($_REQUEST["move"] == "up") {
    $xmin = $x - 5;
    $xmax = $x + 5;
    $y = $y - 6;

    $left = 360;
    $top = -360;

    for($i = $xmin; $i <= $xmax; $i++) {
        $id = "T" . $i . "_" . $y;
        $newTiles .= "<div class=''move'' style=''position:absolute; left:" . $left . "px; top:" . $top . "px;'' id=''$id''><img src=''./Map/TileGroup1/1-$i-$y.gif''></div>/n";
        $left += 120;
        $top += 60;
    }
}

luego simplemente echo $ newTiles a cabo para que su script lo use.

Eliminar es similar, solo se agrega en xml el ID de DIV para eliminar porque no pude hacer que cada () funcione de otra manera.

if($_REQUEST["move"] == "up") {
    $xmin = $x - 5;
    $xmax = $x + 5;
    $y = $y + 5;

    echo "<?xml version=/"1.0/"?>/n";  
    echo "<response>/n";  
    for($i = $xmin; $i <= $xmax; $i++) {
        echo "/t<removeTile>/n";
        echo "/t/t<tileID>T" . $i . "_" . $y . "</tileID>/n";
        echo "/t</removeTile>/n";
    }
    echo "</response>"; 
}

Espero que esto ayude a alguien. ¡Gracias a todos por las ideas y apoyo!

Answer 1

Aquí está la solución que he usado antes.

1. Los mosaicos deben ser un <div> que está configurado para ser inline-block con el <img> dentro de él. Controla el ancho y la altura del título a través de <div> . * Es importante que no haya un espacio en blanco entre los elementos <div> , de lo contrario, los mosaicos no se pegarán uno al lado del otro.
2. Los mosaicos deben estar en un #container <div> que tiene line-height 0. El contenedor debe configurarse en varios múltiplos de los tamaños de mosaicos ya que los mosaicos se alinearán automáticamente. Así que 20 azulejos podrían ser 4x5 o 5x4 dependiendo del tamaño del contenedor.
3. El #container debe estar en otro <div> con overflow: hidden que llamo la vista. Puede desplazar el #viewport usando jQuery y .scrollLeft .scrollTop .

Aquí hay un ejemplo de jsfiddle: http://jsfiddle.net/pseudosavant/b4hSV/

Answer 2

Creo que necesita volver al enfoque de toda la cuadrícula que está anidada en un DIV con overflow:hidden pero usar JavaScript para descubrir qué imágenes deberían ser visibles y solo cargar esas imágenes según sea necesario, luego cargar las imágenes relevantes adicionales como el usuario se desplaza a esa área.

Por supuesto, el desplazamiento solo debe manipular las propiedades de CSS top e left para que su cuadrícula se mueva en el DIV overflow: hidden contiene. En su caso, sería más fácil simplemente cambiando las propiedades de CSS de posicionamiento en incrementos del tamaño de su mosaico (para que nunca se muestren partes de mosaicos).

Desde el punto de vista de la programación, esto es un poco difícil de hacer, pero parece que ya tienes un método para calcular cuáles están / deberían estar mostrando.

Con este método, tendrá ese problema inicial inicial cuando las imágenes se cargan por primera vez, pero el movimiento posterior de la cuadrícula no tendrá que volver a cargar las mismas imágenes. Una vez que haya funcionado, puede usar jQuery o similar para animar las propiedades left y top para dar un efecto de desplazamiento suave.

Luego, si lo desea, puede continuar con esto y permitir el desplazamiento parcial de mosaicos y el desplazamiento con un clic y arrastre como Google Maps. Además, si desea trabajar en el rendimiento, recomendaría configurar un servidor nginx que escuche algunos subdominios de su sitio para mostrar las imágenes de mosaico.

EDITAR: Recomiendo animar scrollLeft y scrollTop en el div contenedor (que tiene overflow: hidden ) en su lugar, dará un mejor rendimiento / desplazamiento más suave.

Hay un programa limpio llamado TileMill , mientras que el OP no lo usa, podría ser aplicable a otras personas.

Answer 3

Solo puede brindar una experiencia de animación suave si su animación se basa en el tiempo en lugar de en la posición o el recuento de fotogramas. Comenzaría mirando requestAnimationFrame (o los requestAnimationFrame - requestAnimationFrame basados ​​en el tiempo para ello) y diseñaría sus cálculos de animación / posicionamiento en función del tiempo. La pregunta sería:

dado el tiempo t ¿cuáles deberían ser las compensaciones x y y desplazamiento de mi mapa?

Luego piense en utilizar la ilusión de tener una ventana gráfica en un conjunto de mosaicos masivo, en lugar de tener un conjunto de baldosas masivas que usan overflow: hidden para mirar a través de una ventana pequeña. No querrás agotar el DOM con demasiadas fichas.

Digamos que su vista permite la visualización de 4 x 4 mosaicos, lo que representa un máximo de 5 x 5 mosaicos considerando los mosaicos mostrados parcialmente cuando el desplazamiento de mosaico no se ajusta a su ventana (que será el caso la mayor parte del tiempo) . 5 x 5 mosaicos serán todo lo que necesitarás, independientemente de cuántos mosaicos tenga realmente tu mapa. Aquí hay un bosquejo:

http://jsfiddle.net/6uRHD/

La tarea será:

1. Calcule la aceleración / velocidad / posición en función de las acciones del usuario (desplazarse, empujar con amortiguación) y luego calcule la posición en el momento t de su animación.
2. Calcule qué mosaicos caen en el conjunto de mosaicos de 5 x 5 según la posición y también calcule el desplazamiento de la ventana gráfica para estos mosaicos.