스크롤 트리거 canvas태그 정리
우선적으로 canvas태그에 대해 간단히 정리
<canvas id="tutorial" width="150" height="150"></canvas><canvas>는 처음에는 src 및 alt 속성이 없다는 점만 제외하면 <img> 요소처럼 보입니다. 실제로 <canvas> 요소에는 width와 height의 두 속성만 있습니다. 이것들은 모두 선택사항이며 DOM 프로퍼티를 사용하여 설정할 수도 있습니다. width 및 height 속성을 지정하지 않으면 캔버스의 처음 너비는 300 픽셀이고 높이는 150 픽셀입니다.
요소는 CSS에 의해 임의로 크기를 정할 수 있지만 렌더링하는 동안 이미지는 레이아웃 크기에 맞게 크기가 조정됩니다. CSS 크기 지정이 초기 캔버스의 비율을 고려하지 않으면 왜곡되어 나타납니다 .
💡참고노트
만약 렌더링이 왜곡된 것처럼 보이는 경우 CSS를 사용하지 않고
<canvas>속성에서width 및 height 속성을 명시적으로 지정하십시오.
<canvas>요소는 일반적인 이미지 (margin, border, background…) 처럼 스타일을 적용시킬 수 있습니다. 하지만 이 방법은 실제 캔버스 위에 그리는 것에는 영향을 끼치지 않습니다.
✅ 예시 시안 정리
<html>
<div class="partner_04">
<div>
<div id="trase_symbol">
<canvas id="canvas"></canvas>
</div>
~~~
</html><script>
gsap.registerPlugin(ScrollTrigger);
//GSAP에서 ScrollTrigger 플러그인을 사용하기 위해 등록
const canvas = document.querySelector("#canvas");
//HTML에 있는 <canvas id="canvas"> 요소를 선택
const context = canvas.getContext("2d");
//getContext("2d")를 사용해 2D 그림 도구를 가져옴
canvas.width = 1080;
canvas.height = 1080;
//캔버스의 가로, 세로 크기를 각각 1080px로 설정
const frameCount = 210;
//사용할 이미지 개수 설정, 1번부터 210번까지 총 210장이 있다는 의미
const currentFrame = index => (
`//ecimg.cafe24img.com/pg790b92374334009/trase24/web/img/symbol/cut1-symbol_alpha${(index + 1).toString().padStart(5, '0')}.webp`
);
// index + 1: 이미지 번호 (0부터 시작하므로 +1을 해줍니다).
// 🌟 .toString().padStart(5, '0'): 이미지 번호를 5자리 숫자로 만듭니다
const images = []
// 이미지 객체들을 저장할 배열생성
const trase3d = {
frame: 0
};
//trase3d에 frame속성을 생성, 현재 프레임 번호를 저장(GSAP 변경되는 값을 추적하는 객체)
for (let i = 0; i < frameCount; i++) {
const img = new Image(); //이미지 객체를 생성
img.src = currentFrame(i); //함수를 사용해 이미지 URL을 설정
images.push(img); //이미지 객체를 images 배열에 저장
}
// images[] 배열에 210개의 이미지 객체가 저장
gsap.to(trase3d, {
frame: frameCount - 1, // trase3d.frame이 0에서 209(frameCount - 1)까지 변경
snap: "frame", // 🌟 프레임 단위로 값을 반올림하여 애니메이션이 부드럽게 진행
ease: "none", // 속도 변화없이 애니메이션이 진행
scrollTrigger: {
//markers:true,
trigger:'.partner .partner_04',
pin:false,
scrub: 1,
start: "top",
endTrigger:'.partner .partner_05',
},
onUpdate: render // 애니메이션이 업데이트될 때마다 render() 함수를 실행
});
images[0].onload = render;
//첫 번째 이미지가 로드되면 render() 함수를 한 번 실행
//첫 화면에서 빈 화면이 보이지 않도록 첫 이미지를 그리기 위해 사용
function render() {
context.clearRect(0, 0, canvas.width, canvas.height);
// 🌟 이전 이미지를 지워줍니다.
context.drawImage(images[trase3d.frame], 0, 0);
// 🌟 images[trase3d.frame]에 저장된 현재 프레임의 이미지를 (0, 0) 좌표에 생성
}
</script>🌟표시 부연설명
🌟 .toString().padStart(5, '0')
이미지 번호를 5자리 숫자로 만듭니다.
(5자리 이유: ftp에 210개의 이미지를 5자리의 숫자로 저장해둠)
예시) 1 → 00001, 10 → 00010, 210 → 00210
결과 예시) cut1-symbol_alpha00001.webp, cut1-symbol_alpha00002.webp ... cut1-symbol_alpha00210.webp
🌟 gsap 속성 중 snap이란?
속성은 gsap.to() 애니메이션에서의 snap은 애니메이션 값이 특정 값에 맞춰 "고정"되도록 만들어주는 옵션, 이 옵션은 애니메이션 진행 중에 값이 자연스럽게 특정 단위나 값으로 맞춰지도록 할 때 사용
🌟 snap 옵션의 값인 frame이란?
GSAP ScrollTrigger에서 frame 속성의 값을 정수 단위로 반올림하도록 설정한 것,여기서 말하는 frame은 trase3d 객체의 frame 속성을 뜻함. 즉, frame 값이 소수점 없이 0, 1, 2, ... 209와 같은 정수 단위로만 변하도록 만들어 줍니다.
snap 옵션 중 frame이란 값 말고 다양한 값도 가능!
- 숫자 (Number) : snap: 0.1 → 10% 간격으로 스냅,
- 배열 (Array) : snap: [0, 0.25, 0.5, 0.75, 1] → 0%, 25%, 50%, 75%, 100% 지점에서만 스냅
- 문자열 (String) : snap: "progress" → progress 속성이 0, 1, 2, ...처럼 스냅
- 함수 (Function) :
snap: value => Math.round(value / 0.25) * 0.25 - 객체 (Object) :
snap: { snapTo: [0, 0.25, 0.5, 0.75, 1], // 지정한 배열의 지점으로 스냅 duration: 0.5, // 스냅 애니메이션 시간 delay: 0.1 // 스냅 전 지연 시간 }
🌟 context.clearRect(0, 0, canvas.width, canvas.height);
현재 캔버스에 그려진 모든 그림을 지우는 기능이며, 각 프레임마다 새로운 이미지를 그리기 전에 이전 프레임을 지워야 합니다. 그렇지 않으면 모든 프레임이 겹쳐서 보입니다.
(0, 0)는 캔버스의 왼쪽 위 모서리 (X, Y 좌표), (canvas.width, canvas.height)는 캔버스 전체 너비와 높이입니다.
🌟 context.drawImage(images[trase3d.frame], 0, 0);
캔버스에 이미지를 그리는 역할이며, (images[trase3d.frame])는 현재 그릴 이미지 객체를 의미, images 배열에는 각 프레임에 해당하는 이미지들이 저장되어 있고, trase3d.frame은 현재 보여줄 이미지 인덱스입니다. (0, 0)는 이미지를 그릴 위치 (X, Y 좌표)
