172 lines
4.7 KiB
Markdown
172 lines
4.7 KiB
Markdown
# 首页动画统一优化说明
|
||
|
||
## 🎯 优化目标
|
||
将首页的容器动画从 Container 组件的自定义 `revealDistance` 属性改为统一的 `AnimatedElement` 组件，确保整个网站的动画效果一致性和流畅性。
|
||
|
||
## 🔧 修改内容
|
||
|
||
### 1. 导入 AnimatedElement 组件
|
||
```astro
|
||
// 添加 AnimatedElement 导入
|
||
import AnimatedElement from '../components/AnimatedElement.astro';
|
||
```
|
||
|
||
### 2. 替换 Hero 区域动画
|
||
|
||
**修改前：**
|
||
```astro
|
||
<Container
|
||
variant="glass"
|
||
size="large"
|
||
padding="xl"
|
||
className="text-center mb-12"
|
||
revealDistance="48px" // ← 自定义 reveal 属性
|
||
>
|
||
<h1 class="hero-title">焦七七小站</h1>
|
||
<!-- ... -->
|
||
</Container>
|
||
```
|
||
|
||
**修改后：**
|
||
```astro
|
||
<AnimatedElement animation="fadeInUp" delay={200} trigger="load">
|
||
<Container
|
||
variant="glass"
|
||
size="large"
|
||
padding="xl"
|
||
className="text-center mb-12"
|
||
>
|
||
<h1 class="hero-title">焦七七小站</h1>
|
||
<!-- ... -->
|
||
</Container>
|
||
</AnimatedElement>
|
||
```
|
||
|
||
### 3. 统一 NavigationGrid 动画
|
||
|
||
**修改前：**
|
||
```astro
|
||
<NavigationGrid
|
||
title="技术服务"
|
||
columns={3}
|
||
gap="large"
|
||
>
|
||
<!-- 所有卡片同时出现，没有渐进效果 -->
|
||
</NavigationGrid>
|
||
```
|
||
|
||
**修改后：**
|
||
```astro
|
||
<AnimatedElement animation="fadeInUp" delay={400} trigger="scroll">
|
||
<NavigationGrid
|
||
title="技术服务"
|
||
columns={3}
|
||
gap="large"
|
||
>
|
||
<!-- 每个卡片都有独立的动画延迟 -->
|
||
<AnimatedElement animation="fadeInUp" delay={600} trigger="scroll">
|
||
<NavigationCard />
|
||
</AnimatedElement>
|
||
|
||
<AnimatedElement animation="fadeInUp" delay={700} trigger="scroll">
|
||
<NavigationCard />
|
||
</AnimatedElement>
|
||
|
||
<!-- ... 以此类推，每个卡片延迟递增 100ms -->
|
||
</NavigationGrid>
|
||
</AnimatedElement>
|
||
```
|
||
|
||
## ✨ 动画效果层次
|
||
|
||
### 时间轴设计
|
||
```
|
||
页面加载
|
||
├── 0-200ms Hero 区域准备
|
||
├── 200ms Hero 区域开始出现 (fadeInUp)
|
||
├── 400ms 导航区域标题开始出现 (fadeInUp, scroll trigger)
|
||
├── 600ms 第1个服务卡片出现
|
||
├── 700ms 第2个服务卡片出现
|
||
├── 800ms 第3个服务卡片出现
|
||
├── 900ms 第4个服务卡片出现
|
||
├── 1000ms 第5个服务卡片出现
|
||
├── 1100ms 第6个服务卡片出现
|
||
├── 1200ms 第7个服务卡片出现
|
||
└── 1300ms 第8个服务卡片出现
|
||
```
|
||
|
||
### 触发机制
|
||
1. **load 触发** - Hero 区域在页面加载时立即开始动画
|
||
2. **scroll 触发** - NavigationGrid 在滚动到视窗时才开始动画
|
||
3. **渐进式延迟** - 每个服务卡片依次出现，创造流畅的视觉体验
|
||
|
||
## 🎨 视觉效果特点
|
||
|
||
### 统一的动画类型
|
||
- **fadeInUp** - 所有元素都使用相同的从下往上淡入效果
|
||
- **600ms 持续时间** - 默认动画持续时间（来自 AnimatedElement）
|
||
- **ease-out 缓动** - 默认缓动函数
|
||
|
||
### 层次化的出现顺序
|
||
1. **Hero 区域** (200ms) - 最重要的内容最先出现
|
||
2. **导航标题** (400ms) - 为后续内容做铺垫
|
||
3. **服务卡片** (600-1300ms) - 依次展示，避免突兀感
|
||
|
||
## 📐 与其他页面的一致性
|
||
|
||
### 报告页面对比
|
||
```astro
|
||
<!-- 报告页面中的统一用法 -->
|
||
<AnimatedElement animation="fadeInUp" delay={200}>
|
||
<Container variant="glass" size="full" padding="xl">
|
||
<!-- 内容 -->
|
||
</Container>
|
||
</AnimatedElement>
|
||
```
|
||
|
||
### 数据页面对比
|
||
```astro
|
||
<!-- 数据页面中的统一用法 -->
|
||
<AnimatedElement animation="fadeInUp" delay={400} trigger="scroll">
|
||
<ReportSection title="访问趋势分析">
|
||
<!-- 内容 -->
|
||
</ReportSection>
|
||
</AnimatedElement>
|
||
```
|
||
|
||
## 🔄 动画触发逻辑
|
||
|
||
### 触发条件
|
||
- **load** - 页面加载完成时
|
||
- **scroll** - 元素进入视窗时（rootMargin: '0px 0px -50px 0px'）
|
||
|
||
### 性能优化
|
||
- 使用 IntersectionObserver 进行滚动检测
|
||
- 避免重复动画（once 属性）
|
||
- 支持 `prefers-reduced-motion` 媒体查询
|
||
|
||
## 🛠️ 技术细节
|
||
|
||
### AnimatedElement 组件配置
|
||
```astro
|
||
animation="fadeInUp" // 动画类型
|
||
delay={200} // 延迟时间（毫秒）
|
||
trigger="load|scroll" // 触发方式
|
||
duration={600} // 持续时间（默认）
|
||
easing="ease-out" // 缓动函数（默认）
|
||
```
|
||
|
||
### 浏览器兼容性
|
||
- 支持现代浏览器的 CSS 动画
|
||
- 渐进式增强设计
|
||
- 优雅降级到静态显示
|
||
|
||
## 🎯 预期效果
|
||
|
||
通过这次优化，首页现在拥有：
|
||
- ✅ **统一的动画风格** - 与其他页面保持一致
|
||
- ✅ **流畅的视觉体验** - 渐进式出现，不再突兀
|
||
- ✅ **更好的用户体验** - 自然的视觉引导
|
||
- ✅ **专业的交互设计** - 符合现代网站标准
|
||
|
||
用户现在可以享受到平滑、一致的动画体验，每个元素的出现都经过精心编排，创造更加专业和吸引人的首页体验！ |