2022. 7. 22. 16:46ㆍProgram/JavaScript
183_자바스크립트 requestAnimationFrame 사용하기 (HTML)
[적용]
- 마우스 커서를 따라다니는 애니메이션을 생성하고 싶을 때
[내용]
requestAnimationFrame()은 애니메이션의 모션을 세세하게 조절할 수 있다는 장점을 가졌다.
HTML요소에 애니메이션 효과를 주기 위해서는 style 속성값을 조절한다.
앞서 사용한 tick 함수를 다시 사용하여 확인해 보자.
https://stonefree.tistory.com/369
[JavaScript] 자바스크립트 requestAnimationFrame 사용하기
182_자바스크립트 requestAnimationFrame 사용하기 [적용] WebGL과 HTML 캔버스에서 애니메이션을 처리하고 싶을 때 요소에 3D 효과를 주고 싶을 때 [문법] 메소드 의미 반환 requestAnimationsFrame(함수) 시간..
stonefree.tistory.com
tick 함수 내에서 style 속성값을 조절해 애니메이션 효과를 부여한다.
style 속성의 대부분은 단위 표기가 필수이므로 단위 넣는 것을 잊지 않도록 주의해야 한다.
HTML index.html
<body>
<div class="followAnimation">
❤
</div>
</body>CSS style.css
.followAnimation {
position: fixed;
top: 0;
left: 0;
will-change: transform;
font-size: 2rem;
}JavaScript main.js
// 커서를 따라다니는 요소 가져오기
const el = document.querySelector('.followAnimation');
// 마우스 좌표
let mouseX = 0;
let mouseY = 0;
// 커서를 따라다니는 요소의 좌표
let currentX = 0;
let currentY = 0;
// 마우스 이동 시
document.body.addEventListener('mousemove', (event) => {
// 마우스 좌표 저장
mouseX = event.clientX;
mouseY = event.clientY;
});
tick();
function tick() {
// 애니메이션 프레임 지정
requestAnimationFrame(tick);
// 따라오는 요소 좌표에 마우스 좌표를 지연시켜 반영
currentX += (mouseX - currentX) * 0.1;
currentY += (mouseY - currentY) * 0.1;
// 지연된 좌표를 위치에 반영
el.style.transform = `translate(${currentX}px, ${currentY}px)`;
}
실행결과
마우스 커서를 따라 애니메이션이 천천히 따라온다.
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트에서 이미지 로딩 후 작업하기 (0) | 2022.07.22 |
|---|---|
| [JavaScript] 자바스크립트에서 스크립트로 이미지 로딩하기 (0) | 2022.07.22 |
| [JavaScript] 자바스크립트 requestAnimationFrame 사용하기 (0) | 2022.07.19 |
| [JavaScript] 자바스크립트 요소 채도 조절하기 (0) | 2022.07.19 |
| [JavaScript] 자바스크립트 요소 밝기 조절하기 (0) | 2022.07.19 |