1
This commit is contained in:
张成
314
docs/动画效果使用指南.md
Normal file
314
docs/动画效果使用指南.md
Normal file
@@ -0,0 +1,314 @@
|
||||
# 动画效果使用指南
|
||||
|
||||
## 概述
|
||||
|
||||
本项目已集成丰富的动画效果库，包含多种CSS动画、悬停效果、滚动触发动画等，让页面更加生动有趣。
|
||||
|
||||
## 🎯 已集成的动画类型
|
||||
|
||||
### 1. 基础动画类
|
||||
|
||||
#### 淡入动画
|
||||
- `.fade-in` - 淡入
|
||||
- `.fade-in-up` - 从下方淡入
|
||||
- `.fade-in-down` - 从上方淡入
|
||||
- `.fade-in-left` - 从左侧淡入
|
||||
- `.fade-in-right` - 从右侧淡入
|
||||
|
||||
#### 滑入动画
|
||||
- `.slide-in-up` - 从下方滑入
|
||||
- `.slide-in-down` - 从上方滑入
|
||||
- `.slide-in-left` - 从左侧滑入
|
||||
- `.slide-in-right` - 从右侧滑入
|
||||
|
||||
#### 缩放动画
|
||||
- `.zoom-in` - 缩放进入
|
||||
- `.zoom-out` - 缩放退出
|
||||
|
||||
#### 特殊效果动画
|
||||
- `.bounce` - 弹跳
|
||||
- `.pulse` - 脉冲
|
||||
- `.shake` - 抖动
|
||||
- `.swing` - 摇摆
|
||||
- `.rotate-in` - 旋转进入
|
||||
- `.flip-in-x` - X轴翻转
|
||||
- `.flip-in-y` - Y轴翻转
|
||||
- `.light-speed-in` - 光速进入
|
||||
- `.rubber-band` - 橡皮筋
|
||||
- `.wobble` - 摇摆
|
||||
- `.tada` - 庆祝
|
||||
- `.heart-beat` - 心跳
|
||||
- `.hinge` - 铰链
|
||||
- `.roll-in` - 滚入
|
||||
- `.roll-out` - 滚出
|
||||
|
||||
### 2. 悬停动画效果
|
||||
|
||||
- `.hover-lift` - 悬停时上浮
|
||||
- `.hover-scale` - 悬停时缩放
|
||||
- `.hover-rotate` - 悬停时旋转
|
||||
- `.hover-glow` - 悬停时发光
|
||||
- `.hover-bounce` - 悬停时弹跳
|
||||
|
||||
### 3. 滚动触发动画
|
||||
|
||||
- `.animate-on-scroll` - 滚动时触发动画
|
||||
- `.animate-stagger` - 交错动画容器
|
||||
|
||||
### 4. 高级动画效果
|
||||
|
||||
- `.gradient-bg` - 渐变背景动画
|
||||
- `.neon-text` - 霓虹灯文字效果
|
||||
- `.wave` - 波浪效果
|
||||
- `.particles` - 粒子效果
|
||||
- `.flip-card` - 3D翻转卡片
|
||||
- `.typewriter` - 打字机效果
|
||||
|
||||
## 🚀 使用方法
|
||||
|
||||
### 基础用法
|
||||
|
||||
```html
|
||||
<!-- 添加动画类 -->
|
||||
<div class="animate fade-in-up">这个元素会从下方淡入</div>
|
||||
|
||||
<!-- 设置动画时长 -->
|
||||
<div class="animate fast fade-in-up">快速动画</div>
|
||||
<div class="animate slow fade-in-up">慢速动画</div>
|
||||
|
||||
<!-- 设置动画延迟 -->
|
||||
<div class="animate fade-in-up delay-1s">延迟1秒</div>
|
||||
<div class="animate fade-in-up delay-2s">延迟2秒</div>
|
||||
|
||||
<!-- 无限循环 -->
|
||||
<div class="animate infinite pulse">无限脉冲</div>
|
||||
```
|
||||
|
||||
### 悬停效果
|
||||
|
||||
```html
|
||||
<!-- 悬停时上浮 -->
|
||||
<div class="hover-lift">悬停时会上浮</div>
|
||||
|
||||
<!-- 悬停时缩放 -->
|
||||
<div class="hover-scale">悬停时会缩放</div>
|
||||
|
||||
<!-- 悬停时发光 -->
|
||||
<div class="hover-glow">悬停时会发光</div>
|
||||
```
|
||||
|
||||
### 滚动触发动画
|
||||
|
||||
```html
|
||||
<!-- 滚动时触发 -->
|
||||
<div class="animate-on-scroll">滚动到此处时显示</div>
|
||||
|
||||
<!-- 交错动画 -->
|
||||
<div class="animate-stagger">
|
||||
<div>第一个元素</div>
|
||||
<div>第二个元素</div>
|
||||
<div>第三个元素</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### 组合使用
|
||||
|
||||
```html
|
||||
<!-- 组合多个动画类 -->
|
||||
<div class="animate fade-in-up delay-1s hover-lift">
|
||||
延迟淡入 + 悬停上浮
|
||||
</div>
|
||||
|
||||
<!-- 动画容器 + 悬停效果 -->
|
||||
<div class="animate-stagger">
|
||||
<div class="hover-scale">悬停缩放</div>
|
||||
<div class="hover-glow">悬停发光</div>
|
||||
<div class="hover-rotate">悬停旋转</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## 🎨 自定义动画
|
||||
|
||||
### 创建新的关键帧动画
|
||||
|
||||
```css
|
||||
@keyframes customAnimation {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-animate {
|
||||
animation-name: customAnimation;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
```
|
||||
|
||||
### 自定义悬停效果
|
||||
|
||||
```css
|
||||
.custom-hover {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.custom-hover:hover {
|
||||
transform: translateY(-20px) rotate(10deg);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
```
|
||||
|
||||
## 🔧 JavaScript 动画控制
|
||||
|
||||
### 使用动画助手
|
||||
|
||||
```javascript
|
||||
// 手动触发动画
|
||||
window.animationHelper.triggerAnimation(element, 'fade-in');
|
||||
|
||||
// 添加滚动动画
|
||||
window.animationHelper.addScrollAnimation(element, {
|
||||
threshold: 0.2,
|
||||
delay: 0.5
|
||||
});
|
||||
|
||||
// 添加交错动画
|
||||
window.animationHelper.addStaggerAnimation(container, {
|
||||
delay: 0.2,
|
||||
staggerDelay: 0.1
|
||||
});
|
||||
```
|
||||
|
||||
### 事件监听
|
||||
|
||||
```javascript
|
||||
// 监听动画开始事件
|
||||
element.addEventListener('animationStart', (event) => {
|
||||
console.log('动画开始:', event.detail);
|
||||
});
|
||||
|
||||
// 监听动画触发事件
|
||||
element.addEventListener('animationTrigger', (event) => {
|
||||
console.log('动画触发:', event.detail);
|
||||
});
|
||||
```
|
||||
|
||||
## 📱 响应式动画
|
||||
|
||||
### 移动端优化
|
||||
|
||||
```css
|
||||
/* 移动端减少动画复杂度 */
|
||||
@media (max-width: 768px) {
|
||||
.animate {
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
.floating-particles {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 性能优化
|
||||
|
||||
```css
|
||||
/* 使用 will-change 优化性能 */
|
||||
.animate {
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
/* 使用 transform3d 启用硬件加速 */
|
||||
.animate {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
```
|
||||
|
||||
## 🎭 动画最佳实践
|
||||
|
||||
### 1. 适度使用
|
||||
- 不要过度使用动画，影响用户体验
|
||||
- 保持动画简洁明了
|
||||
- 考虑用户的动画偏好设置
|
||||
|
||||
### 2. 性能考虑
|
||||
- 使用 `transform` 和 `opacity` 属性
|
||||
- 避免在动画中改变布局属性
|
||||
- 合理使用 `will-change` 属性
|
||||
|
||||
### 3. 可访问性
|
||||
- 尊重用户的 `prefers-reduced-motion` 设置
|
||||
- 提供动画开关选项
|
||||
- 确保动画不影响内容可读性
|
||||
|
||||
### 4. 时机控制
|
||||
- 页面加载完成后延迟启动动画
|
||||
- 滚动触发动画使用 Intersection Observer
|
||||
- 合理设置动画延迟和持续时间
|
||||
|
||||
## 🐛 常见问题
|
||||
|
||||
### Q: 动画不工作？
|
||||
A: 检查是否正确引入了 `animations.css` 文件，确保元素有正确的类名。
|
||||
|
||||
### Q: 动画性能差？
|
||||
A: 使用 `transform` 和 `opacity` 属性，避免改变布局属性，启用硬件加速。
|
||||
|
||||
### Q: 移动端动画卡顿？
|
||||
A: 减少动画复杂度，使用更简单的动画效果，考虑禁用某些复杂动画。
|
||||
|
||||
### Q: 如何禁用动画？
|
||||
A: 在CSS中添加 `animation: none !important;` 或使用 `prefers-reduced-motion` 媒体查询。
|
||||
|
||||
## 📚 示例代码
|
||||
|
||||
### 完整的动画页面示例
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="animated-page">
|
||||
<!-- 滚动进度条 -->
|
||||
<div class="scroll-progress-bar" data-scroll-progress="bar"></div>
|
||||
|
||||
<!-- 横幅区域 -->
|
||||
<div class="banner animate-on-scroll">
|
||||
<h1 class="animate fade-in-down text-glow">欢迎访问</h1>
|
||||
<p class="animate fade-in-up delay-1s">精彩内容即将呈现</p>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="content animate-stagger">
|
||||
<div class="card hover-lift">
|
||||
<div class="icon animate pulse infinite">🚀</div>
|
||||
<h3>快速开始</h3>
|
||||
<p>简单易用的开发体验</p>
|
||||
</div>
|
||||
|
||||
<div class="card hover-scale">
|
||||
<div class="icon animate bounce delay-1s">⚡</div>
|
||||
<h3>高性能</h3>
|
||||
<p>优化的性能表现</p>
|
||||
</div>
|
||||
|
||||
<div class="card hover-glow">
|
||||
<div class="icon animate wobble delay-2s">🎨</div>
|
||||
<h3>美观设计</h3>
|
||||
<p>现代化的视觉体验</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 🎉 总结
|
||||
|
||||
通过合理使用这些动画效果，可以让您的页面更加生动有趣，提升用户体验。记住要适度使用，注重性能优化，并考虑可访问性需求。
|
||||
Reference in New Issue
Block a user