🎨 Intro 动画生成器使用与配置指南

面向开发者的可视化动画配置、参数定制与代码一键集成手册

Intro 动画生成器使用与配置指南

本项目内置了专为开发者设计的 可视化主题与动画配置工具箱（Visual Generator Suite）。开发者可以通过直观的控制面板调整开场艺术字、自定义物理弹跳轨迹及主题配色，并一键导出标准组件代码。

💡 开发环境提示：该工具集仅在本地开发模式（npm run dev）下生效。在执行 npm run build 生产构建时，系统将自动拦截该路由，绝不打包至生产环境代码中。

🚀 快速开始

启动本地开发服务器：

npm run dev

在浏览器中访问工具箱页面：

工具箱主页：http://localhost:4321/generator
Intro 动画定制工具：http://localhost:4321/generator/intro

localhost 可能需要根据实际情况更改为您的域名或者IP。 4321 可能需要根据实际情况更改为您的端口。

🛠️ 控制面板功能说明

1. 开场文本设置 (Input Text)

输入你希望呈现的开场品牌字或标语（建议 3-10 个字符，如 Quasar）。
文本变更时，预览舞台将自动重构字符节点，并重新绑定弹跳锚点。

2. 落点字符选择 (Character Anchors)

动画引擎依赖三个关键字符节点控制物理抛物线轨迹：

第 1 落点字符 (Point 1)：小点从顶部初始降落并触发第一次挤压弹跳的字符。
第 2 落点字符 (Point 2)：小点跨越中间字符进行抛物线跃迁后的第二个落脚字符。
终点字符 (Stem)：小点最后跃回的最终挂载字符（通常为字母 i 的竖杠或某个核心字母）。

3. 色彩模式切换 (Color Modes)

跟随全局主题色 (SITE_CONFIG)（默认）：小点颜色自动绑定为全局配置 src/config.ts 中的 themeColor 变量，保持站点视觉一致性。
指定独立颜色：开启独立配色后，可借助调色盘或 Hex 输入框自定义颜色。导出的组件代码将自动附带退路机制。

📦 代码集成与替换步骤

当你在生成器中调试出满意的动画效果后，请按以下步骤将代码集成到项目中：

第一步：复制代码

点击控制面板中的 “复制代码” 按钮（系统已内置剪贴板与兼容性降级处理，支持 HTTP 及 IP 访问下的直接复制）。

第二步：覆盖组件文件

打开项目根目录下的艺术字组件文件，将复制的代码全选覆盖到文件前端部分。

目标文件路径：src/components/intro/IntroWord.astro

一个标准导出的 IntroWord.astro 示例如下：

---
// src/components/intro/IntroWord.astro
import { SITE_CONFIG } from '../../config';

const themeColor = SITE_CONFIG.themeColor || '#015EFB';
---

<div class="fixed-canvas">
  <div class="word" id="intro-word">
    <span class="char">Q</span>
    <span class="char" id="i-stem">u</span>
    <span class="char" id="letter-n1">a</span>
    <span class="char">s</span>
    <span class="char">a</span>
    <span class="char" id="letter-n2">r</span>
    <div id="blue-dot"></div>
  </div>
</div>

第三步：校验开场效果

返回主页刷新页面，即可实时体验自定义的开场弹跳与全屏吞噬动效。

❓ 常见问题 FAQ

Q: 为什么线上部署后访问 /generator 提示 404？
A: 这是正常机制。generator 路由设置了 import.meta.env.PROD 构建防护，防止开发调试工具被打包泄漏到生产环境。
Q: 如果修改了文本长度，动画轨迹错位怎么办？
A: 重新进入 /generator/intro，重新指定“第 1 落点”、“第 2 落点”与“终点字符”的对应字母位置，播放预览确认无误后再一键导出复制即可。