Web Animations API를 사용하면 자바스크립트로 애니메이션을 만들고 제어 할 수 있다.
animate({a}, {b}) : 메서드를 사용하며 2개의 객체를 인수로 받으며 다음과 같은 역할을 한다.
매개변수 a : 시작과 종료 값을 포함하는 객체
매개변수 b : 애니메이션 속성을 포함하는 객체
<script>
const box = document.querySelector(".box");
// animate()
const value = {
transform: [
// 프로퍼티를 배열로 작성
"translateX(0) rotate(0)", // 시작값, 문자열로 작성
"translateX(80vw) rotate(360deg)", // 종료값
],
};
const info = {
duration: 3000, // 진행 시간 1000 = 1s
iterations: 3, // 반복 횟수
direction: 'alternate', // 방향 (문자열로 작성)
easing: 'cubic-bezier(.49,.06,.11,.99)', // 움직임 형태 (문자열 작성)
fill: 'forwards' // 움직임 종료 위치 제어(문자열)
};
box.animate(value, info);
</script>
requestAnimationFrame(callback)
화면에 프레임이 실행되기 전에 함수를 호출하며 시간 경과에 따른 지속적인 변화 가능.
한 번만 호출되므로 연속 호출 필요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>requestAnimationFrame</title>
<style>
body {
width: 100%;
height: 100vh;
margin: 0;
}
.emoji {
position: fixed;
top: 10px;
left: 10px;
font-size: 2em;
will-change: transform;
/* will-chage
일어날 동작을 미리 브라우저에게 공지함
웹킷 계열 브라우저의 경우 css transform, animation 속성 사용시 깜빡이는 현상을 방지하기 위해 사용
auto : 기본값
scroll-position: 스크롤 위치 바꿈
contents: 컨텐츠 바꿈
그 외 css속성(opacity, top, left, ...)사용 가능
*/
}
</style>
</head>
<body>
<div class="emoji">✨</div>
<script>
const emoji = document.querySelector(".emoji");
// 마우스 좌표
let mouseX = 0;
let mouseY = 0;
// 커서 이모지 좌표
let emojiX = 0;
let emojiY = 0;
// 마우스 이동
addEventListener("mousemove", (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
});
// 연속 호출
function ani() {
requestAnimationFrame(ani);
emojiX += (mouseX - emojiX) * 0.1;
emojiY += (mouseY - emojiY) * 0.1;
emoji.style.transform = `translate(${emojiX}px, ${emojiY}px)`;
}
// 함수 실행
ani();
</script>
</body>
will-change
will-change: transform;
/* will-chage
일어날 동작을 미리 브라우저에게 공지함
웹킷 계열 브라우저의 경우 css transform, animation 속성 사용시 깜빡이는 현상을 방지하기 위해 사용
auto : 기본값
scroll-position: 스크롤 위치 바꿈
contents: 컨텐츠 바꿈
그 외 css속성(opacity, top, left, ...)사용 가능
*/
<!-- web Animation API polyfill CDN -->
<script src="https://cdn.jsdelivr.net/npm/web-animations-js@2.3.2/web-animations.min.js"></script>Web Animation API 폴리필 출처 -
jsDelivr - A free, fast, and reliable CDN for Open Source
Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more than 80 billion requests per month. Built for production use.
www.jsdelivr.com
참고 사이트 -
Web APIs - 웹 애니메이션 API 사용 Web Animations API를 사용하면 JavaScript로 재생을 구성하고 제어할 수
웹 애니메이션 API는 자바 스크립트에 의해 개발자 및 조작에 브라우저의 애니메이션 엔진을 엽니 다. 이 API는 CSS Animations 및 CSS Transitions 모두의 구현을 기반으로 하도록 설계되었으며 향후 애니
runebook.dev
'JavaScript' 카테고리의 다른 글
| [JavaScript] wheel_가로 스크롤 (0) | 2022.12.19 |
|---|---|
| [JavaScript] SVG 제어_more (0) | 2022.12.19 |
| [JavaScript] matchMedia(), resize(브라우저 사이즈 이벤트) (0) | 2022.12.16 |
| [JavaScript] 함수 - 재귀와 스택 (0) | 2022.12.16 |
| [JavaScript] 자바스크립트 내장 객체의 prototype (0) | 2022.12.16 |