首页改造：从组件动效到页面编排

Viruatios

最初在 4/21/2026

一份可执行、可扩展、可复用的首页改造计划：先以首页完成最小可用方案，再逐步推广到其他页面。

Homepage

GSAP

Astro

Animation Architecture

MVP

Project Planning

CuLoo homepage redesign plan

在过去一段时间里，我已经积累了不少“组件级动画”的实践经验，尤其是在 SVG 角色与状态切换方面。接下来这次首页改造，不是推倒重来，也不是一次性堆特效，而是一项承上启下的工程：

  1. 承接已有的组件动画经验，把可复用的方法沉淀下来。
  2. 开启 GSAP 与页面结构的联动尝试，从“单组件动效”走向“页面级编排”。
  3. 以首页作为最小可用方案（MVP）先跑通闭环，再决定如何迁移到其他页面。

这篇文章就是我接下来执行改造的成文计划。

一、改造背景与目标

背景

当前项目已经具备动画基础能力，但这些能力主要集中在局部组件。首页作为站点入口，承担第一印象、信息分发与品牌表达的三重职责，因此是最合适的试验场。

目标

这次改造的核心目标不是“动画越多越好”，而是“结构更清晰、体验更顺滑、工程更可持续”：

  1. 首页信息层级更明确，首屏表达更聚焦。
  2. 引入一段可控的 Intro 动画，完成视觉开场并自然衔接到常态阅读。
  3. 建立页面级动画编排规范，为后续页面复用打基础。

非目标

为了控制风险，本阶段不追求：

  1. 一次覆盖全站所有页面。
  2. 追求复杂到难维护的炫技时间轴。
  3. 在第一版里引入过多新依赖或额外框架。

二、总体策略：先首页 MVP，再全站复用

这次改造采用“单点突破”的策略。

  1. 第一阶段只改首页：先验证方法有效、性能可控、维护成本可接受。
  2. 第二阶段再抽象能力：把首页验证过的方案整理为可复用模块。
  3. 第三阶段按需迁移：优先迁移到最需要叙事开场的页面，而非平均铺开。

这种做法能避免大范围改动导致的联动风险，也更适合持续迭代。

三、架构原则：从组件动效升级到页面编排

原则 1：分层设计，而不是把动画写成一坨

建议将首页拆成四层：

  1. 结构层：语义化区块（Hero、Intro 文案、内容入口、CTA）。
  2. 样式层：定义首屏初始状态、层级关系、响应式行为。
  3. 编排层：使用 GSAP timeline 串联多段动作与触发时机。
  4. 交互层：处理主题切换、导航跳转、用户中断、降低动效偏好等场景。

原则 2：动画可中断、可恢复、可降级

页面级动画必须像业务逻辑一样可控：

  1. 可中断：用户提前滚动、点击导航时不应出现卡住或错位。
  2. 可恢复：中断后能回到稳定可读状态。
  3. 可降级：尊重 prefers-reduced-motion，提供弱动画版本。

原则 3：参数配置化，避免魔法数字散落

所有关键参数集中管理，例如：

  1. 入场总时长。
  2. 分段时间比例。
  3. 元素位移与透明度阈值。
  4. 不同设备上的降级策略开关。

这样后期调整节奏，不需要全局搜改。

原则 4：尊重 Web Vitals 与用户会话（Session）

页面级动画绝不能以牺牲基础体验为代价：

  1. 避免 CLS（布局偏移）：首屏元素的空间必须由 CSS 骨架提前锁死，GSAP 只负责 transform 和 opacity，绝对不改变元素的物理尺寸（width/height/margin）。
  2. 控制播放频次：完整的 Intro 动画通常只在用户当前会话（Session）的首次访问时播放一次。后续通过内部路由切回首页时，应直接呈现最终状态或仅使用极简的过渡（依赖 sessionStorage 标识）。
  3. Astro 生命周期对齐：必须结合 astro:page-load 和 gsap.context() 构建动画，确保在 View Transitions 路由切换时，旧动画实例被彻底清理，防止内存泄漏。

四、实施路径：按长期规划分阶段推进

阶段 A：布局重构（先稳结构）

先把首页改造成“适合编排动画”的结构，而不是先写 timeline。

  1. 划分稳定区块并补充明确的选择器锚点（如 data-intro="title"）。
  2. 保证移动端和桌面端都具备清晰信息层级。
  3. 为每个将被动画控制的元素预留初始样式状态。

阶段产出：一个不依赖动画也可读、可用、可访问的首页。

阶段 B：最小 Intro 动画（先跑通闭环）

只实现最小可用动画链路：

  1. CSS 预设初始态：对于需要动画的元素，在样式层预设 visibility: hidden 或 opacity: 0，配合 no-js 回退策略避免 FOUC（样式闪烁）。
  2. 首屏顺序入场：核心元素（标题、说明、主视觉、入口按钮）依次展现，时长控制在短区间，避免阻塞阅读。
  3. 频次拦截：读取 sessionStorage.getItem('introPlayed')，若已存在则直接跳过冗长开场。
  4. 清理现场：动画结束后进入稳定状态，通过 GSAP 的 clearProps 彻底清除不必要的内联样式。

阶段产出：具有频次控制、不卡顿、不闪烁的首个可上线 Intro MVP。

阶段 C：联动增强（再做复杂度）

在 MVP 稳定后，逐步加入与其他系统的协同：

  1. 与吉祥物动画联动，但保持职责隔离。
  2. 与主题切换、导航切换行为互不干扰。
  3. 增加滚动触发的轻量补充段，而非无限叠加首屏动画。

阶段产出：具备品牌感与交互一致性的首页动画体验。

阶段 D：模块抽象与复用（最后做推广）

当首页方案稳定后，再抽象出可复用能力：

  1. 时间线工厂函数（按页面注入不同节点）。
  2. 通用状态与生命周期管理（初始化、销毁、重建）。
  3. 文档化迁移流程（复制、改造、验收清单）。

阶段产出：可迁移到其他页面的动画基础设施。

五、工程落地建议

为了长期可维护，建议在工程实现上遵循以下做法：

  1. 首页 Intro 使用独立脚本管理，不与已有组件动画脚本混写。
  2. 保留“防重复初始化”机制，兼容页面切换与二次进入。
  3. 每段 timeline 都有明确命名和注释，便于回溯与调参。
  4. 用统一的 reset 逻辑保证动画结束后页面回到干净基线。
  5. 在代码层预留 debug 开关，便于定位卡顿和联动冲突。

六、验收标准（Definition of Done）

一个“完成度足够高”的首页改造，至少要满足： 基础可用：首页结构在无（或禁用）JS 情况下依然可读、可用（CSS 回退策略生效）。 2. 防滥用：会话控制起效，同一次浏览历史内，反复切换回首页不会被冗长的 Intro 打断。 3. 性能达标：LCP（最大内容渲染）不受脚本加载严重拖累，CLS（累积布局偏移）趋近于 0（不发生骨架崩塌）。 4. 无障碍设计（A11y）：动画期间，隐藏的元素不应被屏幕阅读器预读或被 Tab 键错误聚焦。 5. 偏好尊重：用户操作系统开启“降低动效 (prefers-reduced-motion) ”时，自动降级为极简淡入。 6. 热更新与路由安全：结合 Astro View Transitions 切换路由时，不出现 GSAP 实例未销毁导致的内存泄漏或功能卡死 5. 移动端和桌面端体验一致，不出现明显掉帧与闪烁。

七、风险与应对

风险 1：动画复杂度膨胀

应对：坚持阶段推进，每一阶段都可独立上线，不跨阶段混做。

风险 2：联动场景相互干扰

应对：把“触发时机”和“状态控制”集中管理，不把副作用散落在多个脚本里。

风险 3：后续难以迁移

应对：从 MVP 第一版开始就做参数化与文档化，先想清楚复用边界再扩张。

八、结语

这次首页改造，本质上不是一次“美化工程”，而是一次“动画工程能力升级”。

我会先用首页完成最小可用方案，验证 GSAP 页面级编排的可行性，再将稳定方案迁移到其他页面。这样既能承接已有经验，也能为后续长期演进铺路。

如果第一阶段顺利，下一步我会把“首页 Intro 的代码结构模板 + 调试清单 + 迁移指引”整理出来，作为站点动画体系的第一份工程文档。