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>
// 选择带有"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: 函数将元素.ball在2秒内向右移动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: 为元素.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>跟踪动画事件</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('动画已开始');
});
box.addEventListener('animationend', () => {
console.log('动画已结束');
});
box.addEventListener('animationiteration', () => {
console.log('动画迭代');
});
</script>
</body>
</html>
代码解释：
animationstart: 在动画开始时触发的事件animationend: 在动画结束时触发的事件animationiteration: 在每次动画重复时触发的事件
GO TO FULL VERSION