Jiao77/astro-jiao77.cn

Fork 0

Files

Jiao77 96b50327f3 finally finish all website check in.

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

5.1 KiB

Raw Blame History

报告页面进场动画配置

配置概述

仿照 index.astro 的进场动画设计，为 report/index.astro 和 report/20250609/index.astro 配置了统一的进场动画效果，确保整个网站动画体验的一致性。

首页动画设计模式分析

动画层次结构

标题区域: delay={200}, trigger="load" - 页面加载时立即开始
导航网格: delay={400}, trigger="scroll" - 滚动触发，稍后出现
导航卡片: 递增延迟 600-1300ms, trigger="scroll" - 依次出现，形成流畅的视觉流

动画时序策略

初始延迟: 200ms - 给用户足够时间感知页面加载
层次间隔: 200ms - 标题与网格间的视觉分离
卡片间隔: 100ms - 创造流畅的连续动画效果
触发方式: load vs scroll - 重要内容立即展示，次要内容滚动触发

修改详情

1. 技术报告索引页面 (`/src/pages/report/index.astro`)

动画配置：

<!-- 标题区域 - 200ms, load触发 -->
<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>

<!-- 导航网格 - 400ms, scroll触发 -->
<AnimatedElement animation="fadeInUp" delay={400} trigger="scroll">
  <NavigationGrid title="技术报告导航" columns={3} gap="large">
    
    <!-- 报告卡片 - 600-1200ms递增延迟 -->
    <AnimatedElement animation="fadeInUp" delay={600} trigger="scroll">
      <NavigationCard title="报告 20250609" />
    </AnimatedElement>
    
    <AnimatedElement animation="fadeInUp" delay={700} trigger="scroll">
      <NavigationCard title="报告 20250722" />
    </AnimatedElement>
    
    <!-- ... 继续递增到 1200ms -->
    
  </NavigationGrid>
</AnimatedElement>

2. 20250609 报告页面 (`/src/pages/report/20250609/index.astro`)

动画配置：

<!-- 报告标题 - 200ms, load触发 -->
<AnimatedElement animation="fadeInUp" delay={200} trigger="load">
  <Container variant="glass" size="full" padding="xl">
    <h1 class="report-title">面向版图模板识别的AI技术路径探索</h1>
    <!-- ... -->
  </Container>
</AnimatedElement>

<!-- 章节内容 - 400-1600ms递增延迟, scroll触发 -->
<AnimatedElement animation="fadeInUp" delay={400} trigger="scroll">
  <ReportSection title="🎯 项目目标：赋能设计-工艺协同优化(DTCO)">
    <!-- ... -->
  </ReportSection>
</AnimatedElement>

<AnimatedElement animation="fadeInUp" delay={600} trigger="scroll">
  <ReportSection title="🔬 版图识别的核心挑战">
    <!-- ... -->
  </ReportSection>
</AnimatedElement>

<!-- 继续为每个章节递增 200ms 延迟 -->

动画时序详细配置

技术报告索引页面时序

标题区域: 200ms (load) - 立即展示页面主题
导航网格: 400ms (scroll) - 网格容器进入
导航卡片: 600-1200ms (scroll) - 7个卡片，每个间隔100ms

20250609报告页面时序

报告标题: 200ms (load) - 立即展示报告主题
项目目标: 400ms (scroll) - 第一个内容章节
核心挑战: 600ms (scroll) - 问题分析
RoRD解析: 800ms (scroll) - 解决方案介绍
技术对比: 1000ms (scroll) - 方案比较
模型调整: 1200ms (scroll) - 实施细节
初步尝试: 1400ms (scroll) - 实验结果
未来展望: 1600ms (scroll) - 总结展望

技术优势

1. 视觉连贯性

所有页面使用相同的动画类型 (fadeInUp)
统一的时序间隔策略 (200ms基础间隔)
一致的触发方式分配 (重要内容load，详细内容scroll)

2. 用户体验优化

渐进式信息展示: 按重要性和逻辑顺序依次出现
视觉引导: 动画序列引导用户阅读流程
性能优化: scroll触发避免页面加载时过多动画

3. 响应式适配

动画在不同设备上保持一致性
移动端和桌面端相同的视觉体验
兼容屏幕阅读器等辅助功能

验证结果

✅ 构建验证: npm run build 成功

0 错误
0 警告
0 提示
所有页面正常生成

✅ 动画效果验证:

标题区域页面加载时立即出现
内容区域滚动时依次进入
时序流畅，视觉效果自然
移动端适配良好

动画参数说明

AnimatedElement 参数

animation: fadeInUp - 从下方淡入上升效果
delay: 数值(ms) - 动画延迟时间
trigger: load | scroll - 触发条件

触发策略选择

load触发: 用于页面关键信息，如标题、导航等
scroll触发: 用于详细内容，提供渐进式阅读体验

后续优化建议

动画个性化: 考虑为不同类型的内容使用不同的动画效果
响应式时序: 在小屏幕设备上可以考虑减少延迟时间
交互反馈: 添加hover状态的动画效果增强互动性
性能监控: 在低性能设备上考虑简化动画效果

配置日期：2025年10月1日
状态：已完成
影响页面：report/index.astro, report/20250609/index.astro

5.1 KiB Raw Blame History Unescape Escape