이전 규칙, 먼저 소스 코드를 적용하십시오. 사진 영역을 클릭 할 수 있으며 애니메이션은 클릭 위치에서 시작됩니다.
나는 원래 3 년 전에이 효과를 발휘했지만 수많은 DIV 태그로 수행되었으며 전혀 실행할 수 없었습니다. 최근에 CSS 효과를 배우기 위해 순수한 CSS를 배우고 싶습니다.
준비1. 우선, 같은 크기의 많은 사진은 1920 * 1080입니다. CSS). 사용을 용이하게하려면 나중에 사용하기 위해이 그림을 HTML의 숨겨진 요소에 추가하십시오.
매 class = 'img'src = './images/c.jpg'/> <img class = 'img'src = './images/jpg'/> <img class = 'img'src = './ 이미지/e.jpg '/> </div>
.hide {display : none;}2. HTML에 캔버스 캔버스를 삽입하면 크기에 따라 결정되지만 그림 자원의 너비 및 높이와 일치하도록해야합니다. 이 예에서 캔버스의 크기는 800 * 450입니다.
<canvas id = mycanvas 너비 = 800 높이 = 450> 브라우저는 캔버스를 지원하지 않습니다 </canvas>
3. 기본 코드는 먼저 캔버스의 컨텍스트 객체를 얻습니다.
var ctx = document.querySelector ( '#MyCanvas'). 뇌졸중 ();성취하다
나는 그것을 본 후에도 빨리 이해할 수 있다고 생각합니다.
그런 다음 소스 코드를 설명하기 전에 캔버스에서 DrawImage 함수의 사용법을 검토해 봅시다. 이 함수의 9 매개 변수를 사용해야하므로 많은 매개 변수가 있으며 이러한 매개 변수의 의미와 참조 객체를 명심해야합니다.
Context.DrawImage (IMG, SX, SY, SWIDTHT, SHEIGHT, X, Y, 너비, 높이, 높이);
· IMG : 사용하도록 지정된 이미지, 캔버스 또는 비디오
· SX : 절단 절단의 X 좌표 위치
· SY : 절단 절단의 y 좌표 위치
· SWIDTH : 컷 이미지 이미지의 너비
· Sheight : 이미지의 높이가 잘 렸습니다
· X : 캔버스에 이미지의 X 좌표 위치를 배치합니다.
Y : 캔버스에 이미지의 y 좌표 위치를 놓습니다.
· 너비 : 사용하려는 이미지의 너비
· 높이 : 사용하려는 이미지의 높이
위의 매개 변수가 나열 되더라도 개발할 때는 여전히 쉽게 희미 해집니다. 모든 사람을위한 팁은 다음과 같습니다. 첫 번째 IMG 매개 변수 외에도 8 개의 매개 변수가 있으며, 그 중 첫 번째 4 개의 매개 변수는 원래 맵, 즉 1920 * 1080;
이 공식을 기억하십시오. 실제 일 때는 희미하기 쉽지 않습니다.
나누다부서는 캔버스에서 단위의 크기를 설정하는 것입니다. 가장 중요한 것은 단위 크기가 그림의 두 모서리 길이로 제거 할 수 있다는 것입니다. . 과도한 효과가 눈부신 것은 아니며 작은 성능이 압력을 받기 때문에 컨벤션 수는 반드시 최대 수 또는 최소 부서의 부서 일 필요는 없습니다.
이 예제에서 800 * 450의 크기를 취하면 25 * 25를 여기에서 단위 크기로 선택합니다. 즉, 전체 캔버스는 총 576 개의 셀에서 32 * 18로 구성됩니다. 그리드를 나눈 후에는 기본 매개 변수 여분을 계산해야합니다.
var imgw = 1920, // 원래 너비/높이의 그림 = 800; 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, // CONW /DW; 원래 그래프 너비 /하이 DH; = imgh /i;
처음 세 세트는 우리가 세트行数= 画布高度/ 单元格高度；列数= 画面宽度/ 单元格宽度계산할 때 다음과 같이 집중해야합니다行数= 画布高度/ 单元格高度；列数= 画面宽度/ 单元格宽度. 이것이 반전되면 나중에 강제됩니다. DW/DH의 마지막 세트는 원래 그림으로 확대되고 전환되는 셀 크기로, 나중에 맞춤형 사진으로 사용됩니다.
순서대로 먼저 왼쪽 상단에 셀을 그립니다.原图裁切位置画布摆放位置때문에 가장 쉬운 것입니다.
Ctx.DrawImage (IMG, 0, 0, DH, DH, 0, 0, DH);
성공적인. 그렇다면 두 번째 줄을 쓰는 방법, 세 번째 열에 그림을 작성하는 방법은 무엇입니까?
var i = 2, J = 3;
여기서 혼동하기 쉬운 것은裁剪或摆放的横坐标为单元格宽度* 列号，纵坐标为单元格高度* 行号것입니다.
편의를 위해 렌더링을 담당하는 순수한 기능이 캡슐화되지 않으며 전송 된 그림 객체 및 좌표에 따라 그려집니다.
함수 handledRaw (img, i, j) {ctx.DrawImage (img, dw*j, dh*i, dh, dw*j, dh*i, dh);}렌더링 방법이 캡슐화 된 후, 전체 그림은 행과 열의 이중주기를 통해 렌더링됩니다.
ctx.beginpath (); (); CTXSTROKE ();
완벽한 ~. 실제로이 단계의 핵심 부분이 완료됩니다. 이 시점 에서이 그림은 이미 수백 개의 셀과 결합되어 있으며 모든 사람은 Tianma의 상상력으로 애니메이션 효과를 줄 수 있습니다.
애니메이션 알고리즘을 공유하기 전에 잘못된 철자가 무엇인지 보여 드리겠습니다 ~
조금 멋지다 ~
애니메이션 알고리즘내 애니메이션 알고리즘을 공유합시다. 데모의 효과는 어떻게 달성됩니까?
각 셀은 캔버스의 그리드에서 순위 (i, j)를 받았기 때문에. 좌표 (i, j) 후에 좌표 주변의 모든 점을 가까이에서 멀리 얻을 수 있기를 바랍니다. 아래의 특정 그림, 사진을 만들기에는 너무 게으르다 ~
예를 들어 좌표는 (3, 3)입니다.
1 (2, 3), (3, 4), (4, 3), (3, 2)의 거리가있는 4 점이 있습니다.
2 (1, 3), (2, 4), (3, 5), (4, 4), (5, 3), (4, 2), (3, 1), (3, 1)의 거리가 있습니다. (2), (2) 2) 총 8 개가있다.
..........
또한이 일련의 포인트의 알고리즘을 쉽게 찾을 수 있습니다.行号差值的绝对值+ 列号差值的绝对值= 距离, 구체적인 다음과 같이하기 때문입니다.
함수 카운트 라운드 (i, j, dst) {var resarr = []; ); n <= (j+dst); ;}}} return resarr;}이 함수는 주어진 좌표 및 거리 (DST)를 제공하는 데 사용되며 좌표 주변의 거리에서 모든 지점을 찾아 배열 형태로 반환합니다. 그러나 위의 알고리즘은 다음과 같이 경계 제한이 적습니다.
카운트 라운드 (i, j, dst) {var resarr = []; n <= (j+dst) {if (math.abs (nj) == dst) && (m> = 0 && n> = 0). = (i i -1) && n <= (j -1))) {resarr.push ({x : m, y : n});}}} return resarr;}이런 식으로, 우리는 주변 고정 거리의 모든 지점을 계산 한 다음 애니메이션 렌더링을 완료하기 시작하는 순수한 기능이 있습니다.
먼저 셀의 내용을 지우기 위해 청산 기능을 작성하십시오.
handleclear (i, j) {ctx.clearrect (dw*j, dh*i, dw, dh);}다른 IMG는 다음 그림이며, 마지막으로 SetInterval을 통해 외부 층에 새로운 그림을 그려 단편화 된 그라디언트 효과를 완성합니다.
var dst = 0, intervalbj = setInterval (function () {var resarr = countaround (i, j, dst); resarr.foreach (insertm, index) {handleclear (item.x, item. x, item.y);};카운트 라운드에 의해 반환 된 배열의 길이가 0이면, 즉, 좌표 지점의 모든 지점은 경계 외부에 있고 타이머 사이클이 중지됩니다. 이 시점에서 모든 핵심 코드가 도입되었습니다.
현재, 주어진 캔버스의 모든 좌표는이 지점에서 주변으로 조각난 그림 전환 효과를 퍼뜨릴 수 있습니다.
자동 회전은 사전 설정 8 포인트에서 애니메이션을 시작하십시오 (4 개의 코너와 4면의 중간 점)는 다음과 같습니다.
var randompoint = [{x : 0, y : 0}, {x : i -1, y : 0}, {x : 0, y : j -1}, {x : i -1, y : j -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}]클릭하면 클릭이 계산되어 시점에서 애니메이션을 시작합니다.
함수 handleClick (e) {var offsetx = e.offsetx, officey = e.offsety, j = math.floor (offsetx / dw), i = math.floor (offsety / dh), // i, j, 시작 시작 시작합니다. 애니메이션 ...}현재이 효과는 데모 단계 일뿐입니다. 시간이 있다면이 효과를 막을 수 있습니다.
위는이 기사의 모든 내용입니다.