Reglas antiguas, primero aplique el código fuente. Se puede hacer clic en el área de la imagen y la animación comenzará desde la posición de clic.
Originalmente hice este efecto hace tres años, pero se hizo con innumerables etiquetas Div. Recientemente, quiero aprender un gran dios con CSS puro para aprender un efecto CSS.
Preparación1. En primer lugar, prepare una serie de imágenes del mismo tamaño. CSS). Para facilitar el uso, agregue estas imágenes a un elemento oculto en HTML para su uso posterior.
<div class = 'hide'> <img class = 'img' src = './images/a.jpg'/> <img class = 'img' src = './images/b.jpg'/> <img class = 'img' src = './images/c.jpg'/> <img class = 'img' src = './images/d.jpg'/> <img class = 'img' src = './ imágenes/e.jpg '/> </div>
.Hide {Display: Ninguno;}2. Inserte un lienzo de lienzo en HTML, y se determina por tamaño, pero debe asegurarse de que sea consistente con el ancho y la altura de los recursos de la imagen. El tamaño del lienzo en este ejemplo es 800 * 450.
<Canvas ID = MyCanvas Width = 800 Height = 450> Su navegador no admite Canvas </ Canvas>
3. El código básico es el siguiente, primero obtenga el objeto de contexto del lienzo;
var ctx = document.queryselector ('#mycanvas'). ataque (); lograrCreo que muchas personas pueden entender rápidamente después de verlo.
Luego, antes de explicar el código fuente, revisemos el uso de la función DrawImage en el lienzo. Dado que necesitamos usar los 9 parámetros de esta función, hay muchos parámetros, y debemos tener en cuenta el significado y el objeto de referencia de estos parámetros.
Context.drawimage (img, sx, sy, swidtht, sheight, x, y, ancho, altura, altura);
· IMG: la imagen, el lienzo o el video que especifica que se utilizará
· SX: la posición de coordenada x del corte de corte
· Sy: la posición de coordenada y del corte de corte
· Swidth: ancho de la imagen de la imagen cortada
· Sheight: se cortó la altura de la imagen
· X: Coloque la posición de coordenada x de la imagen en el lienzo
Y: Coloque la posición de coordenada y de la imagen en el lienzo
· Ancho: el ancho de la imagen que desea usar
· Altura: la altura de la imagen que desea usar
Creo que incluso si los parámetros anteriores se enumeran, todavía es fácil de desmayarse cuando se desarrolla. Aquí hay un consejo para todos: además del primer parámetro IMG, hay 8 parámetros, de los cuales la referencia de tamaño de los primeros 4 parámetros es el mapa original, es decir, 1920 * 1080;
Recuerde esta fórmula, no es fácil de desmayarse cuando es real.
DividirLa división es establecer el tamaño de una unidad en el lienzo. . El número de convenciones no es necesariamente el número máximo o el mínimo de la división, porque el efecto excesivo no es deslumbrante, y el pequeño rendimiento estará bajo presión.
Tomando el tamaño del 800 * 450 En este ejemplo, elijo 25 * 25 como el tamaño de la unidad aquí, es decir, todo el lienzo consiste en 32 * 18 en un total de 576 celdas. Después de dividir la cuadrícula, necesitamos calcular algún parámetro básico de repuesto.
Var imgw = 1920, // imágenes del ancho original/altura imgh = 1080; I I I I I I I I I I I I I I I I I I I I I I I I I = CONH /DH, // Número de unidad /columna J = conw /dw; = imgh /i;
Los primeros tres conjuntos行数= 画布高度/ 单元格高度；列数= 画面宽度/ 单元格宽度parámetros se establecen antes.行数= 画布高度/ 单元格高度；列数= 画面宽度/ 单元格宽度. Si esto se invierte, se forzará más tarde. El último conjunto de DW/DH es un tamaño de celda que se amplía y se convierte en la imagen original, que se usa para fotos de adaptación posteriores.
En orden, primero dibujamos la celda en la esquina superior izquierda. Debido a que su原图裁切位置y画布摆放位置(0, 0), el más fácil.
Ctx.DrawImage (img, 0, 0, dh, dh, 0, 0, dh);
Exitoso. Entonces, ¿cómo escribir la segunda línea ahora, cómo escribir la imagen en la tercera columna?
var i = 2, j = 3;
Lo que es fácil de confundir aquí es que裁剪或摆放的横坐标为单元格宽度* 列号，纵坐标为单元格高度* 行号.
Por conveniencia, se encapsula una función pura responsable de la representación.
Función handledraw (img, i, j) {ctx.drawimage (img, dw*j, dh*i, dh, dw*j, dh*i, dh);}Después de encapsular el método de renderizado, la imagen completa se representa a través de los ciclos duales de filas y columnas.
ctx.beginpath (); ();
Perfecto ~. De hecho, la parte central de este paso se completa. Porque en este momento esta imagen ya se combina con cientos de células, y todos pueden darle un efecto de animación con la imaginación de Tianma.
Antes de compartir su algoritmo de animación, déjame mostrarte cuál es la ortografía incorrecta ~
Es un poco genial ~
Algoritmo de animaciónCompartamos mi algoritmo de animación. ¿Cómo se logra el efecto en la demostración?
Dado que cada celda ha clasificado el número (i, j) en la cuadrícula del lienzo. Espero que después de una coordenada (i, j), podamos obtener todos los puntos alrededor de las coordenadas de cerca a lejos. La imagen específica a continuación, demasiado vago para hacer una imagen ~
Por ejemplo, las coordenadas son (3, 3)
Hay 4 puntos con una distancia de 1 (2, 3), (3, 4), (4, 3), (3, 2) en total;
Hay puntos con una distancia de 2 (1, 3), (2, 4), (3, 5), (4, 4), (5, 3), (4, 2), (3, 1), (2), (2) 2) hay 8 en total;
..........
También es fácil encontrar el algoritmo de esta serie de puntos, porque行号差值的绝对值+ 列号差值的绝对值= 距离, el específico:
Funciones countaround (i, j, dst) {var sevarr = []; ); ;}}} Return sevarr;}Esta función se usa para dar una coordenada y distancia dada (DST), y encontrar todos los puntos en la distancia alrededor de las coordenadas para regresar en forma de una matriz. Sin embargo, el algoritmo anterior tiene menos limitaciones límite, como sigue:
CounTaround (i, j, dst) {var sevarr = []; ; n <= (j+dst); = (i i -1) && n <= (j -1))) {resarr.push ({x: m, y: n});}}} return sevarr;}De esta manera, tenemos una función pura que calcula todos los puntos en la distancia fija circundante, y luego comienza a completar la representación de animación.
Primero escriba una función de compensación para borrar el contenido de la celda.
HandLeclear (i, j) {ctx.ClearRect (dw*j, dh*i, dw, dh);}OtroMg es la siguiente imagen, y finalmente dibuja una nueva imagen a la capa externa a través de SetInterval para completar el efecto de gradiente fragmentado.
Var dst = 0, intervalbj = setInterval (function () {var resarr = coundound (i, j, dst); resarr.forEach (it, index) {handleclear (item.x, item. Y); manejo (otro Itemg itemg. x, item.y);});Cuando la longitud de la matriz devuelta por el Countaround es 0, es decir, todos los puntos en el punto de coordenada están fuera del límite y el ciclo del temporizador se detiene. En este punto, se ha introducido todo el código central.
En la actualidad, cualquier coordenada en un lienzo dado puede extender el efecto de conmutación de imágenes fragmentados desde este punto hasta los alrededores.
Cuando la rotación automática, comience la animación del preajuste 8 puntos (cuatro esquinas y el punto medio de cuatro lados).
var randompoint = [{x: 0, y: 0}, {x: i -1, y: 0}, {x: 0, y: j -1}, {x: i -1, y: j -1 }, {x: 0, y: math.ceil (j / 2)}, {x: i -1, y: math.ceil (j / 2)}, {x: math.ceil (i / 2), y: 0}, {x: math.ceil (i / 2), y: j -1}]Al hacer clic, se calculan los clics, comenzando la animación desde el punto.
Function handLecLick (e) {var offSetX = e.offsetx, office = e.offsety, j = math.floor (offsetx / dw), i = math.floor (offsety / dh), // con i, j, comenzar a comenzar para comenzar.En la actualidad, este efecto es solo una etapa de demostración.
Lo anterior es todo el contenido de este artículo.