분류 javascript

떨어지는 모래 - 이미지 전환 효과

컨텐츠 정보

  • 조회 309 (작성일 )

본문

16 줄의 바닐라 자바 ​​스크립트로 간단한 이미지 전환 효과를 재현하고 HTML5 캔버스에서 비트맵 기술을 연습 할 수 있습니다.


http://slicker.me/javascript/image_transition_effect.htm 


하나의 이미지로 간단한 버전부터 시작해 보겠습니다.



<html>
<body>
<canvas id="myCanvas" width="600" height="373"></canvas>
<script>
let image = new Image();
image.src = "example1.jpg";
let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");
let row, imageWidth, imageHeight;
 
image.onload = function() {
  imageWidth = image.width;
  imageHeight = image.height;
  row = imageHeight;
  requestAnimationFrame(animate);
};
 
function animate() {
  context.drawImage(image, 0, row, imageWidth, 1, 0, 0, imageWidth, row);
  if (row > 0) row--;
  else
    row = imageHeight;
  requestAnimationFrame(animate);
}
 
</script>
</body>
</html>


다음은 작동 방식입니다.


[5-6] 화면에 보이지 않는 소스 이미지를 설정합니다.

[7-8] 대상 캔버스 설정

[11-13] 이미지가 로드되면 크기를 가져옵니다.

[15] 애니메이션 시작


[18-24] 애니메이션 기능은 모든 동작이 있고 [19], '모래를 그립니다'는 가장 복잡한 부분이므로 더 자세히 살펴 보도록 하겠습니다.

소스 이미지의 한 행 (한 픽셀 높이의 가로 스트라이프)을 복사하여 대상 캔버스의 맨 위에 놓고 세로로 늘입니다. 높이는 'row'의 값과 같습니다.

즉, 좌표 (0, 행) 및 크기 (imageWidth, 1)의 비트 맵을 소스에서 복사하고 차원 (imageWidth, row)이있는 (0,0)을 대상에 붙여 넣습니다.

변수 'row'의 값은 이미지 [14]의 높이와 동일하게 시작한 다음 모든 반복에서 감소합니다. drawImage 함수가 작동하는지 여기에서 읽을 수 있습니다.


예를 통해 더 쉽게 볼 수 있습니다. 이것이 소스 영상이라고 가정 해 보겠습니다.


1 

2 

3 

4 

5


(숫자는 행 번호에 해당하므로 그림은 5 픽셀 높이입니다.) 

아래 주어진 반복에서 그려진 부분은 빨간색입니다.


첫 번째 반복에서 'row'는 5이므로 코드는 소스에서 가장 낮은 행을 가져 와서 대상의 모든 행에 배치합니다.


5

5

5

5

5


두 번째 반복, 행 = 4. 소스에서 4 행을 가져 와서 대상의 상위 4 행에 넣습니다.


4

4

4

4

5


세 번째 반복 :


3

3

3

4

5


네번째 :


2

2

3

4

5


마지막으로 5 번째 반복에서 맨 위 행을 복사하면 이미지가 완성됩니다.


1

2

3

4

5


우리 코드로 돌아 가기 : [20-23]은 'row'의 값을 줄이고 전체 그림이 그려진 경우 하단으로 다시 설정합니다.


이제 코드의 풀 버전을 위해 두 줄의 추가 선을 추가하여 이미지 배열 [5-9]과 토글 링 메커니즘 [28-31]을 추가합니다.



<html>
<body>
<canvas id="myCanvas" width="600" height="373"></canvas>
<script>
let image = [];
image[0] = new Image();
image[1] = new Image();
image[0].src = "example0.jpg";
image[1].src = "example1.jpg";
 
let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");
let row, imageWidth, imageHeight;
let currentImage = 0;
 
image[0].onload = function() {
  imageWidth = image[0].width;
  imageHeight = image[0].height;
  row = imageHeight;
  requestAnimationFrame(animate);
};
 
function animate() {
  context.drawImage(image[currentImage], 0, row, imageWidth, 1, 0, 0, imageWidth, row);
  if (row > 0) row--;
  else {
    row = imageHeight;
    if (currentImage == 1)
      currentImage = 0;
    else
      currentImage = 1;
  }
  requestAnimationFrame(animate);
}
 
</script>
</body>
</html>


다른 방향에서 또는 심지어 여러 방향에서 동시에 전환하여 중앙에서 회의가 진행되도록 코드를 수정할 수 있습니다. 또한 drawImage의 '1'을 다른 값으로 대체하면 어떻게되는지보십시오. 





image transition effect