html5 ensina você a fazer fragmentos legais interruptor de imagem (tela)

Regras antigas, primeiro aplique o código -fonte. A área da imagem pode ser clicada e a animação começará na posição de clique.

Originalmente, fiz esse efeito há três anos, mas foi feito com inúmeras tags de div. Recentemente, quero aprender um grande Deus com CSS puro para aprender um efeito CSS.

1. Primeiro, prepare várias imagens do mesmo tamanho. CSS). Para facilitar o uso, adicione essas imagens a um elemento oculto no HTML para uso posterior.

 <div class = 'hide'> <img class = 'img' src = '. class = 'img' src = './images/c.jpg'/> <img class = 'img' src = './images/d.jpg'/> <img class = 'img' src = './ imagens/e.jpg '/> </div>

 .Hide {Display: Nenhum;}

2. Insira uma tela de tela em HTML e é determinada pelo tamanho, mas deve ser garantido que seja consistente com a largura e a altura dos recursos da imagem. O tamanho da tela neste exemplo é 800 * 450.

 <canvas id = myCanvas width = 800 altura = 450> Seu navegador não suporta tela </canvas>

3. O código básico é o seguinte, primeiro obtenha o objeto de contexto da tela;

 var ctx = document.QuerySelector ('#MyCanvas'). AVC ();

Eu acredito que muitas pessoas podem entender rapidamente depois de assistir. Esta é uma combinação de várias unidades pequenas.

Depois de explicar o código -fonte, vamos revisar o uso da função Drawimage na tela. Como precisamos usar os 9 parâmetros dessa função, existem muitos parâmetros e precisamos ter em mente o significado e o objeto de referência desses parâmetros.

 Context.Drawimage (IMG, SX, SY, Swidtht, Sheight, X, Y, Largura, Altura, Altura);

· IMG: a imagem, tela ou vídeo que especifica para ser usado

· Sx: a posição de coordenadas x do corte do corte

· Sy: a posição de coordenada y do corte de corte

· Swidth: largura da imagem da imagem cortada

· Sheight: a altura da imagem foi cortada

· X: Coloque a posição de coordenada X da imagem na tela

Y: Coloque a posição de coordenada y da imagem na tela

· Largura: a largura da imagem que você deseja usar

· Altura: a altura da imagem que você deseja usar

Acredito que, mesmo que os parâmetros acima estejam listados, ainda é fácil desmaiar ao desenvolver. Aqui estão as dicas para todos: além do primeiro parâmetro IMG, existem 8 parâmetros, dos quais o tamanho da referência dos primeiros 4 parâmetros é o mapa original, ou seja, 1920 * 1080;

Lembre -se dessa fórmula, não é fácil desmaiar quando é real.

A divisão é definir o tamanho de uma unidade na tela. . O número de convenções não é necessariamente o número máximo ou o mínimo da divisão, porque o efeito excessivo não é deslumbrante e o pequeno desempenho estará sob pressão.

Tomando o tamanho dos 800 * 450 neste exemplo, escolho 25 * 25 como o tamanho da unidade aqui, ou seja, toda a tela consiste em 32 * 18 no total de 576 células. Depois de dividir a grade, precisamos calcular alguns parâmetros básicos sobressalentes.

 Var IMGW = 1920, // imagens da largura/altura original 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, // unidade /número da coluna J = CONW /DW; = imgh /i;

Os três primeiros conjuntos de parâmetros são definidos por行数= 画布高度/ 单元格高度；列数= 画面宽度/ 单元格宽度antes.行数= 画布高度/ 单元格高度；列数= 画面宽度/ 单元格宽度. Se isso for revertido, será forçado mais tarde. O último conjunto de DW/DH é um tamanho de célula que aumenta e se converte para a imagem original, que é usada para figuras posteriores de adaptação.

Em ordem, primeiro desenhamos a célula no canto superior esquerdo. Porque seu原图裁切位置e画布摆放位置(0, 0), o mais fácil.

 Ctx.drawimage (img, 0, 0, dh, dh, 0, 0, dh);

Bem-sucedido. Então, como escrever a segunda linha agora, como escrever a imagem na terceira coluna?

 var i = 2, j = 3;

O que é fácil confundir aqui é que裁剪或摆放的横坐标为单元格宽度* 列号，纵坐标为单元格高度* 行号.

Por conveniência, uma função pura responsável pela renderização é encapsulada.

 Função manipulada (img, i, j) {ctx.drawimage (img, dw*j, dh*i, dh, dw*j, dh*i, dh);}

Após o método de renderização ser encapsulado, a imagem inteira é renderizada através dos ciclos duplos de linhas e colunas.

 ctx.beginpath (); ();

Perfeito ~. De fato, a parte central desta etapa é concluída. Porque neste momento essa imagem já está combinada com centenas de células, e todos podem dar um efeito de animação com a imaginação de Tianma.

Antes de compartilhar seu algoritmo de animação, deixe -me mostrar qual é a ortografia errada ~

É um pouco legal ~

Vamos compartilhar meu algoritmo de animação. Como o efeito na demonstração é alcançado?

Como cada célula tem o número classificado (i, j) na grade da tela. Espero que, depois de uma coordenada (i, j), possamos obter todos os pontos em torno das coordenadas de perto a longe. A imagem específica abaixo, com preguiça de fazer uma foto ~

Por exemplo, as coordenadas são (3, 3)

Existem 4 pontos com uma distância de 1 (2, 3), (3, 4), (4, 3), (3, 2) no total;

Existem pontos com uma distância de 2 (1, 3), (2, 4), (3, 5), (4, 4), (5, 3), (4, 2), (3, 1), (2), (2) 2) Existem 8 no total;

..........

Também é fácil encontrar o algoritmo desta série de pontos, porque行号差值的绝对值+ 列号差值的绝对值= 距离, o específico:

 Função contarLound (i, j, dst) {var ressarr = []; ); ;}}} Retorne Rederr;}

Esta função é usada para fornecer uma determinada coordenada e distância (DST) e encontre todos os pontos na distância ao redor das coordenadas para retornar na forma de uma matriz. No entanto, o algoritmo acima tem menos limitações de limites, como segue:

 CONTRELA (I, J, DST) {var ressarr = []; ; = (i i -1) && n <= (j -1))) {reserr.push ({x: m, y: n});}}} retornar REARRA;}

Dessa forma, temos uma função pura que calcula todos os pontos na distância fixa circundante e, em seguida, começa a concluir a renderização da animação.

Primeiro, escreva uma função de compensação para limpar o conteúdo da célula.

 handleclear (i, j) {ctx.clearrect (dw*j, dh*i, dw, dh);}

Outroimg é a próxima foto e, finalmente, desenha uma nova imagem para a camada externa através do setInterval para completar o efeito do gradiente fragmentado.

 Var dST = 0, intervalBJ = setInterval (function () {var ressarr = countAlound (i, j, dst); reserr.foreach (it, index) {handleclear (item.x, item. Y); manipulamento (outro item. x, item.y);});

Quando o comprimento da matriz retornado pela contagem de contagem é 0, ou seja, todos os pontos no ponto de coordenadas estão fora do limite e o ciclo do timer é interrompido. Neste ponto, todo o código principal foi introduzido.

Atualmente, quaisquer coordenadas em uma determinada tela podem espalhar o efeito de comutação de imagem fragmentado deste ponto para o ambiente.

Quando a rotação automática, inicie a animação dos 8 pontos predefinidos (quatro cantos e o ponto médio de quatro 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}]

Ao clicar, os cliques são calculados, iniciando a animação a partir do ponto.

 Função handleclick (e) {var offsetx = e.offsetx, officey = e.offsety, j = math.floor (offsetx / dw), i = math.floor (offsety / dh), // com i, j, comece a começar para começar.

Atualmente, esse efeito é apenas um estágio de demonstração.

O acima é todo o conteúdo deste artigo.