10.1 Hoạt hình kết hợp
Những hoạt hình phức tạp có thể cải thiện giao diện người dùng đáng kể, làm cho nó trở nên tương tác và hấp dẫn hơn. Để tạo ra những hoạt hình như vậy thường sử dụng sự kết hợp giữa CSS và JavaScript. Hãy xem qua các kỹ thuật hoạt hình nâng cao, bao gồm các kịch bản phức tạp hơn và tính tương tác.
Kết hợp nhiều hoạt hình bằng cách sử dụng CSS cho phép tạo ra các hiệu ứng phức tạp. Hãy xem một ví dụ, trong đó một phần tử đồng thời thay đổi kích thước, quay và di chuyển.
Ví dụ: Hoạt hình kết hợp
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hoạt hình kết hợp</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>Hoạt hình kết hợp</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>
Giải thích mã:
.box: phần tử mà hoạt hình kết hợp được áp dụng@keyframes combined: định nghĩa hoạt hình, thay đổi độ lớn, xoay và vị trí của phần tử
10.2 Hoạt hình JavaScript
Hàm requestAnimationFrame cho phép tạo ra những hoạt hình mượt mà với hiệu suất cao.
Nó đồng bộ hóa hoạt hình với tần số làm mới của màn hình, làm cho chúng mượt hơn.
Ví dụ: Hoạt hình di chuyển sử dụng requestAnimationFrame
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hoạt hình với 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>Hoạt hình với requestAnimationFrame</title>
<style>
.ball {
width: 50px;
height: 50px;
background-color: #e74c3c;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div class="ball"></div>
<script>
// Chọn phần tử với class "ball" và lưu vào biến ball
const ball = document.querySelector('.ball');
// Biến để lưu thời điểm bắt đầu của hoạt hình
let start = null;
// Hàm hoạt hình
function animate(time) {
// Nếu hoạt hình bắt đầu lần đầu, lưu thời gian hiện tại
if (!start) start = time;
// Tính toán thời gian đã trôi qua từ khi bắt đầu hoạt hình
let progress = time - start;
// Thiết lập vị trí của quả bóng theo trục trái dựa trên thời gian đã trôi qua
// Giới hạn khoảng cách tối đa là 200 pixel
ball.style.left = Math.min(progress / 10, 200) + 'px';
// Nếu chưa hết 2000 mili giây, tiếp tục hoạt hình
if (progress < 2000) {
requestAnimationFrame(animate);
}
}
// Bắt đầu hoạt hình
requestAnimationFrame(animate);
</script>
</body>
</html>
Giải thích mã:
requestAnimationFrame: hàm gọianimateđể thực hiện các khung của hoạt hìnhanimate: hàm di chuyển phần tử.ballvề phía bên phải 200 pixel trong 2 giây
10.3 Kiểm soát CSS Activity bằng JavaScript
JavaScript có thể được sử dụng để kiểm soát CSS activity, thay đổi các lớp hoặc kiểu dáng của các phần tử.
Ví dụ: Khởi động hoạt hình CSS khi nhấn nút
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Khởi động hoạt hình bằng nút</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>Khởi động hoạt hình bằng nút</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>
Giải thích mã:
.box.animate: lớp thêm hoạt hình moveAndRotate vào phần tử.box-
JavaScript: sự kiện
clicktrên nút#startButtonthêm hoặc xoá lớpanimatekhỏi phần tử#box, kích hoạt hoạt hình
10.4 Tương tác với hoạt hình qua sự kiện
Các sự kiện hoạt hình như animationstart, animationend và animationiteration cho phép theo dõi và kiểm soát hoạt hình.
Ví dụ: Theo dõi sự kiện hoạt hình
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Theo dõi sự kiện hoạt hình</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>
Giải thích mã:
animationstart: sự kiện xảy ra khi bắt đầu hoạt hìnhanimationend: sự kiện xảy ra khi kết thúc hoạt hìnhanimationiteration: sự kiện xảy ra mỗi khi hoạt hình lặp lại
GO TO FULL VERSION