10.1 결합된 애니메이션
복잡한 애니메이션은 사용자 인터페이스를 상당히 개선하여 더 상호작용적이고 매력적으로 만듭니다. 이러한 애니메이션을 만들기 위해 CSS와 JavaScript의 조합이 자주 사용됩니다. 복잡한 시나리오와 상호작용을 포함한 고급 애니메이션 기법을 살펴보겠습니다.
여러 애니메이션을 결합하여 CSS를 사용하면 복잡한 효과를 만들 수 있습니다. 요소가 동시에 크기가 변경되고, 회전하고, 이동하는 예를 살펴보겠습니다.
예제: 결합된 애니메이션
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Combined Animations</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
animation: combined 4s infinite alternate;
}
@keyframes combined {
0% {
transform: scale(1) rotate(0deg) translateX(0);
}
50% {
transform: scale(1.5) rotate(45deg) translateX(100px);
}
100% {
transform: scale(1) rotate(0deg) translateX(0);
}
}
</style>
</head>
<body>
<div style="min-height: 250px; padding: 20px 0;">
<div class="box"></div>
</div>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Combined Animations</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
animation: combined 4s infinite alternate;
}
@keyframes combined {
0% {
transform: scale(1) rotate(0deg) translateX(0);
}
50% {
transform: scale(1.5) rotate(45deg) translateX(100px);
}
100% {
transform: scale(1) rotate(0deg) translateX(0);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
코드 설명:
.box: 결합된 애니메이션이 적용된 요소@keyframes combined: 요소의 크기, 회전, 위치를 변경하는 애니메이션을 정의
10.2 JavaScript 애니메이션
requestAnimationFrame 함수는 높은 성능을 가지고 부드러운 애니메이션을 만들 수 있게 해줘. 스크린의 업데이트 주기와 애니메이션을 동기화시키게 되고, 이로 인해 애니메이션이 더 부드러워진다.
예제: requestAnimationFrame을 사용한 움직임 애니메이션
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation with requestAnimationFrame</title>
<style>
.ball {
width: 50px;
height: 50px;
background-color: #e74c3c;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div style="min-height: 60px; padding: 20px 0;">
<div class="ball"></div>
</div>
<script>
const ball = document.querySelector('.ball');
let start = null;
function animate(time) {
if (!start) start = time;
let progress = time - start;
ball.style.left = Math.min(progress / 10, 200) + 'px';
if (progress < 2000) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);
</script>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation with requestAnimationFrame</title>
<style>
.ball {
width: 50px;
height: 50px;
background-color: #e74c3c;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div class="ball"></div>
<script>
// "ball" 클래스를 가진 요소를 선택하고, 이를 ball 변수에 저장
const ball = document.querySelector('.ball');
// 애니메이션의 시작 시간을 저장할 변수
let start = null;
// 애니메이션 함수
function animate(time) {
// 애니메이션이 처음 시작되면, 현재 시간을 저장
if (!start) start = time;
// 애니메이션 시작부터 경과한 시간 계산
let progress = time - start;
// 지난 시간에 따라 공의 왼쪽 위치 설정
// 최대 이동을 200 픽셀로 제한
ball.style.left = Math.min(progress / 10, 200) + 'px';
// 2000 밀리초 미만이 경과하면 애니메이션을 계속함
if (progress < 2000) {
requestAnimationFrame(animate);
}
}
// 애니메이션 시작
requestAnimationFrame(animate);
</script>
</body>
</html>
코드 설명:
requestAnimationFrame:animate를 호출하여 애니메이션 프레임을 수행하게 해주는 함수animate: 2초 동안.ball요소를 오른쪽으로 200픽셀 이동시키는 함수
10.3 JavaScript로 CSS 애니메이션 제어하기
JavaScript는 요소의 클래스나 스타일을 변경하여 CSS 애니메이션을 제어할 수 있어.
예제: 버튼 클릭으로 CSS 애니메이션 시작하기
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation on Button Click</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
position: relative;
}
.box.animate {
animation: moveAndRotate 3s forwards;
}
@keyframes moveAndRotate {
0% {
transform: translateX(0) rotate(0deg);
}
100% {
transform: translateX(200px) rotate(360deg);
}
}
</style>
</head>
<body>
<div style="padding: 30px 0">
<div class="box" id="box"></div>
</div>
<button id="startButton">Start Animation</button>
<script>
document.getElementById('startButton').addEventListener('click', function() {
document.getElementById('box').classList.toggle('animate');
});
</script>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation on Button Click</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
position: relative;
}
.box.animate {
animation: moveAndRotate 3s forwards;
}
@keyframes moveAndRotate {
0% {
transform: translateX(0) rotate(0deg);
}
100% {
transform: translateX(200px) rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<button id="startButton">Start Animation</button>
<script>
document.getElementById('startButton').addEventListener('click', function() {
document.getElementById('box').classList.toggle('animate');
});
</script>
</body>
</html>
코드 설명:
.box.animate:.box요소에 moveAndRotate 애니메이션을 추가하는 클래스- JavaScript:
#startButton버튼의click이벤트는#box요소의animate클래스를 추가하거나 삭제하여 애니메이션을 시작
10.4 애니메이션과 이벤트의 상호작용
animationstart, animationend, animationiteration 같은 애니메이션 이벤트는 애니메이션을 추적하고 제어할 수 있게 해줘.
예제: 애니메이션 이벤트 추적
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Event Tracking</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #9b59b6;
animation: scaleUp 2s infinite;
}
@keyframes scaleUp {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<script>
const box = document.getElementById('box');
box.addEventListener('animationstart', () => {
console.log('Animation started');
});
box.addEventListener('animationend', () => {
console.log('Animation ended');
});
box.addEventListener('animationiteration', () => {
console.log('Animation iteration');
});
</script>
</body>
</html>
코드 설명:
animationstart: 애니메이션이 시작될 때 작동하는 이벤트animationend: 애니메이션이 끝날 때 작동하는 이벤트animationiteration: 애니메이션이 반복될 때마다 작동하는 이벤트
GO TO FULL VERSION