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>組合動畫</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>組合動畫</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>使用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>使用requestAnimationFrame的動畫</title>
<style>
.ball {
width: 50px;
height: 50px;
background-color: #e74c3c;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div class="ball"></div>
<script>
// 選擇 class 為 "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>按下按鈕啟動動畫</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>按下按鈕啟動動畫</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: 這個類會將moveAndRotate動畫應用到元素.box-
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>追蹤動畫事件</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