Anime.js 动画特效示例

原创已于 2025-06-27 13:35:44 修改 · 684 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-04 14:36:57 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anime.js 动画特效示例</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 20px;
background: #f5f5f5;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
h1 {
text-align: center;
color: #2c3e50;
}
.section {
background: white;
border-radius: 8px;
padding: 20px;
margin-bottom: 30px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.box {
width: 100px;
height: 100px;
background: #3498db;
margin: 20px auto;
border-radius: 4px;
}
.circle {
width: 60px;
height: 60px;
background: #e74c3c;
border-radius: 50%;
margin: 20px auto;
}
.text-animation {
font-size: 24px;
text-align: center;
margin: 30px 0;
}
.path {
width: 300px;
height: 100px;
margin: 40px auto;
position: relative;
}
.path svg {
position: absolute;
top: 0;
left: 0;
}
.path .dot {
width: 20px;
height: 20px;
background: #2ecc71;
border-radius: 50%;
position: absolute;
}
.button {
display: block;
width: 200px;
margin: 20px auto;
padding: 10px;
background: #9b59b6;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
text-align: center;
}
.grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 20px 0;
}
.grid-item {
width: 50px;
height: 50px;
background: #f1c40f;
border-radius: 4px;
}
.timeline-example {
height: 100px;
position: relative;
}
.timeline-box {
width: 80px;
height: 80px;
background: #1abc9c;
position: absolute;
left: 0;
top: 10px;
}
.footer {
text-align: center;
margin-top: 50px;
padding: 20px;
color: #7f8c8d;
}
</style>
</head>
<body>
<div class="container">
<h1>Anime.js 动画特效示例</h1>

<div class="section">
<h2>1. 基本动画</h2>
<div class="box" id="basic-animation"></div>
<p>点击下方按钮运行动画</p>
<button class="button" id="basic-btn">运行动画</button>
</div>

<div class="section">
<h2>2. 颜色和大小变化</h2>
<div class="circle" id="color-change"></div>
<button class="button" id="color-btn">改变颜色</button>
</div>

<div class="section">
<h2>3. 文字动画</h2>
<div class="text-animation" id="text-animation">欢迎来到动画世界</div>
<button class="button" id="text-btn">运行动画</button>
</div>

<div class="section">
<h2>4. SVG路径动画</h2>
<div class="path">
<svg width="300" height="100" viewBox="0 0 300 100">
<path id="motionPath" fill="none" stroke="#3498db" stroke-width="2"
d="M10,50 Q50,10 90,50 T170,50 T250,50" />
</svg>
<div class="dot" id="path-animation"></div>
</div>
<button class="button" id="path-btn">沿路径移动</button>
</div>

<div class="section">
<h2>5. 多个元素动画</h2>
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
<button class="button" id="multi-btn">运行动画</button>
</div>

<div class="section">
<h2>6. 时间轴动画</h2>
<div class="timeline-example">
<div class="timeline-box" id="timeline-box"></div>
</div>
<button class="button" id="timeline-btn">运行动画</button>
</div>

<div class="footer">

<p>使用 Anime.js 动画库制作</p>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

<script>
// 1. 基本动画
document.getElementById('basic-btn').addEventListener('click', function() {
anime({
targets: '#basic-animation',
translateX: 250,
rotate: '1turn',
backgroundColor: '#FF0000',
duration: 2000,
easing: 'easeInOutQuad'
});
});

// 2. 颜色和大小变化
document.getElementById('color-btn').addEventListener('click', function() {
anime({
targets: '#color-change',
backgroundColor: ['#e74c3c', '#3498db', '#2ecc71', '#f1c40f', '#9b59b6'],
scale: [1, 1.5, 1],
duration: 1500,
easing: 'easeInOutSine',
direction: 'alternate'
});
});

// 3. 文字动画
document.getElementById('text-btn').addEventListener('click', function() {
anime({
targets: '#text-animation',
scale: [1, 1.2, 1],
color: ['#000', '#e74c3c', '#000'],
duration: 1500,
easing: 'easeInOutQuad'
});
});

// 4. SVG路径动画
document.getElementById('path-btn').addEventListener('click', function() {
anime({
targets: '#path-animation',
translateX: anime.path('#motionPath'),
translateY: anime.path('#motionPath'),
rotate: anime.path('#motionPath'),
duration: 3000,
easing: 'linear',
loop: true
});
});

// 5. 多个元素动画
document.getElementById('multi-btn').addEventListener('click', function() {
anime({
targets: '.grid-item',
translateY: [0, -50],
scale: [1, 1.5],
delay: anime.stagger(100),
duration: 1000,
direction: 'alternate',
loop: true,
easing: 'easeInOutSine'
});
});

// 6. 时间轴动画
document.getElementById('timeline-btn').addEventListener('click', function() {
var timeline = anime.timeline({
easing: 'easeOutExpo',
duration: 1000
});

timeline
.add({
targets: '#timeline-box',
translateX: 200,
backgroundColor: '#3498db'
})
.add({
targets: '#timeline-box',
translateY: 50,
backgroundColor: '#e74c3c'
}, '-=500')
.add({
targets: '#timeline-box',
translateX: 0,
backgroundColor: '#2ecc71'
}, '-=500')
.add({
targets: '#timeline-box',
translateY: 0,
backgroundColor: '#1abc9c'
}, '-=500');
});
</script>
</body>
</html>