Jiao77/astro-jiao77.cn

Fork 0

Files

Jiao77 96b50327f3 finally finish all website check in.

2025-10-01 09:51:06 +08:00

4.7 KiB

Raw Blame History

首页动画统一优化说明

🎯 优化目标

将首页的容器动画从 Container 组件的自定义 revealDistance 属性改为统一的 AnimatedElement 组件，确保整个网站的动画效果一致性和流畅性。

🔧 修改内容

1. 导入 AnimatedElement 组件

// 添加 AnimatedElement 导入
import AnimatedElement from '../components/AnimatedElement.astro';

2. 替换 Hero 区域动画

修改前：

<Container
  variant="glass"
  size="large" 
  padding="xl"
  className="text-center mb-12"
  revealDistance="48px"  // ← 自定义 reveal 属性
>
  <h1 class="hero-title">焦七七小站</h1>
  <!-- ... -->
</Container>

修改后：

<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 动画

修改前：

<NavigationGrid 
  title="技术服务"
  columns={3}
  gap="large"
>
  <!-- 所有卡片同时出现，没有渐进效果 -->
</NavigationGrid>

修改后：

<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个服务卡片出现

触发机制

load 触发 - Hero 区域在页面加载时立即开始动画
scroll 触发 - NavigationGrid 在滚动到视窗时才开始动画
渐进式延迟 - 每个服务卡片依次出现，创造流畅的视觉体验

🎨 视觉效果特点

统一的动画类型

fadeInUp - 所有元素都使用相同的从下往上淡入效果
600ms 持续时间 - 默认动画持续时间（来自 AnimatedElement）
ease-out 缓动 - 默认缓动函数

层次化的出现顺序

Hero 区域 (200ms) - 最重要的内容最先出现
导航标题 (400ms) - 为后续内容做铺垫
服务卡片 (600-1300ms) - 依次展示，避免突兀感

📐 与其他页面的一致性

报告页面对比

<!-- 报告页面中的统一用法 -->
<AnimatedElement animation="fadeInUp" delay={200}>
  <Container variant="glass" size="full" padding="xl">
    <!-- 内容 -->
  </Container>
</AnimatedElement>

数据页面对比

<!-- 数据页面中的统一用法 -->
<AnimatedElement animation="fadeInUp" delay={400} trigger="scroll">
  <ReportSection title="访问趋势分析">
    <!-- 内容 -->  
  </ReportSection>
</AnimatedElement>

🔄 动画触发逻辑

触发条件

load - 页面加载完成时
scroll - 元素进入视窗时（rootMargin: '0px 0px -50px 0px'）

性能优化

使用 IntersectionObserver 进行滚动检测
避免重复动画（once 属性）
支持 prefers-reduced-motion 媒体查询

🛠️ 技术细节

AnimatedElement 组件配置

animation="fadeInUp"     // 动画类型
delay={200}             // 延迟时间（毫秒）
trigger="load|scroll"   // 触发方式
duration={600}          // 持续时间（默认）
easing="ease-out"       // 缓动函数（默认）

浏览器兼容性

支持现代浏览器的 CSS 动画
渐进式增强设计
优雅降级到静态显示

🎯 预期效果

通过这次优化，首页现在拥有：

✅ 统一的动画风格 - 与其他页面保持一致
✅ 流畅的视觉体验 - 渐进式出现，不再突兀
✅ 更好的用户体验 - 自然的视觉引导
✅ 专业的交互设计 - 符合现代网站标准

用户现在可以享受到平滑、一致的动画体验，每个元素的出现都经过精心编排，创造更加专业和吸引人的首页体验！

4.7 KiB Raw Blame History Unescape Escape