Bokuyaba Firefly 开屏动画适配

在上一篇文章《我心里危险的东西》官网开屏动画复刻中详细解析了官网动画的实现细节。

本文做了 Firefly 博客的适配，重构为支持全局及单页配置的 Astro 独立组件 OpSplashScreen.astro。

流萤开屏动画效果演示#

下图为修改之后的 Firefly 开屏动画效果（或许未来也可以弄个像 Bokuyaba 那样的图片字？不过不知道怎么设计）：

一、如何在当前博客框架中嵌入开屏动画#

在 Firefly 博客中，开屏组件采用了集中式全局挂载 + 独立配置文件 + 单页 Frontmatter 覆写 的设计架构。

1. 页面框架挂载点 (`src/layouts/Layout.astro`)#

开屏组件作为顶级 Overlay 挂载在主布局入口中。只需在 src/layouts/Layout.astro 中插入如下判定：

1
---
2
import OpSplashScreen from "@components/features/OpSplashScreen.astro";
3
import { opConfig } from "@/config";
4
import { isHomePage } from "@/utils/layout-utils";
5

6
const isHomePageCheck = isHomePage(Astro.url.pathname);
7
---
8

9
<!doctype html>
10
<html lang={siteLang}>
11
  <body>
12
    <!-- 仅在首页且全局开启时渲染开屏组件 -->
13
    {isHomePageCheck && opConfig.enable && <OpSplashScreen />}
14

15
    <div id="app">
16
      <slot />
17
    </div>
18
  </body>
19
</html>

2. 全局与文章预设配置 (`src/config/opConfig.ts`)#

开屏的主备文案、Logo 模式以及 Session 频率控制均在配置文件中统一集中管理：

1
import type { OpConfig, OpSplashConfig } from "@/types/opConfig";
2

3
/**
4
 * 流萤 (Firefly) 开屏动画主配置
5
 */
6
export const opConfig: OpConfig = {
7
  enable: true,               // 是否启用开屏动画
8
  onlyOncePerSession: true,   // 同一次浏览器 Session 中是否仅首次进入时显示
9
  textTop: "たびごころの",     // 上句大字标题（青绿整句渐变）
10
  textBottom: "赴くままに",   // 下句大字标题（暖金整句渐变）
11
  typewriterLine1: "Welcome, Traveler.", // 中间打字机第一行
12
  typewriterLine2: "Nice to meet you.",  // 中间打字机第二行
13
  promptGuideText: "TAP ANYWHERE TO ENTER", // 底部引导提示
14
};
15

16
/**
17
 * 文章特定开屏预设 (可在 Markdown 的 opSplashPreset 中指定)
18
 */
19
export const opSplashPresets: Record<string, OpSplashConfig> = {
20
  chinajoy2026: {
21
    enable: true,
22
    onlyOncePerSession: true,
23
    textTop: "巡り逢えた世界",
24
    textBottom: "君に届くように",
25
    typewriterLine1: "Welcome, Traveler.",
26
    typewriterLine2: "Nice to meet you in CJ 2026.",
27
    promptGuideText: "TAP ANYWHERE TO ENTER",
28
  },
29
};

如果要为特定文章指定不同的开屏文案，只需在 Markdown 的 Frontmatter 中添加：

1
---
2
title: "ChinaJoy 2026 观展记录"
3
category: "Firefly"
4
opSplashPreset: "chinajoy2026"
5
---

二、组件复用与重构 (`OpSplashScreen.astro`)#

OpSplashScreen.astro 相比于原版纯 CSS 9 图层拆分，做了大量适应博客场景的模块化改造：

1. Canvas 2D 萤火虫动态粒子底层#

为契合 Firefly 主题，底层新增了 Canvas 2D 萤火虫粒子效果（这个萤火虫粒子后续稍微改一改，或许能独立出来用于网页背景特效？当前博客特效里只有樱花）。

1
class FireflyParticle {
2
  x = 0; y = 0; size = 0; speedX = 0; speedY = 0; opacity = 0; pulseSpeed = 0; colorType = "cyan";
3
  constructor() { this.reset(); }
4
  reset() {
5
    this.x = Math.random() * width;
6
    this.y = Math.random() * height;
7
    this.size = Math.random() * 2.2 + 1.2;
8
    this.speedX = (Math.random() - 0.5) * 0.35;
9
    this.speedY = (Math.random() - 0.5) * 0.35 - 0.18;
10
    this.opacity = Math.random() * 0.65 + 0.2;
11
    this.pulseSpeed = Math.random() * 0.018 + 0.007;
12
    this.colorType = Math.random() > 0.35 ? "cyan" : "amber";
13
  }
14
  draw() {
15
    ctx.beginPath();
16
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
17
    ctx.fillStyle = this.colorType === "cyan"
18
      ? `rgba(76, 195, 198, ${this.opacity})`
19
      : `rgba(246, 182, 91, ${this.opacity})`;
20
    ctx.shadowBlur = this.size * 4.5;
21
    ctx.fill();
22
  }
23
}

2. 单字切片与整句连续渐变#

为了让自定义的文字标题（如“たびごころの”）在逐字渐进浮现的同时，保持整句文字从左到右连贯一致的线性渐变，这里把字符串分割为单独字符 <span class="char-slice">，并根据字符索引计算背景图偏移位置：

1
function initTextSlices() {
2
  const topContainer = document.getElementById("js-title-top");
3
  const topText = topContainer.getAttribute("data-text") || "たびごころの";
4
  const topChars = Array.from(topText);
5
  const topCount = topChars.length;
6

7
  topContainer.innerHTML = topChars.map((char, index) => {
8
    const delay = (CONFIG.startDelayTop + index * CONFIG.staggerTop).toFixed(2);
9

10
    // 根据当前字符索引百分比计算背景图偏移位置
11
    const bgPos = topCount > 1 ? (index / (topCount - 1)) * 100 : 0;
12

13
    return `<span class="char-slice" style="
14
      transition-delay: ${delay}s;
15
      background-size: ${topCount * 100}% 100%;
16
      background-position: ${bgPos.toFixed(1)}% 0;
17
    ">${char}</span>`;
18
  }).join("");
19
}

配套 CSS 采用 -webkit-background-clip: text：

1
:global(.op-splash-container .char-slice) {
2
  display: inline-block;
3
  opacity: 0 !important;
4
  filter: blur(8px) !important;
5
  transform: translateY(-8px) scale(1.08) !important;
6
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1),
7
              opacity 1s cubic-bezier(0.5, 1, 0.89, 1),
8
              filter 1s cubic-bezier(0.5, 1, 0.89, 1);
9
  -webkit-background-clip: text;
10
  background-clip: text;
11
  -webkit-text-fill-color: transparent;
12
}

3. Swup / View Transitions 生命周期解绑#

在 Astro SPA 模式下，页面无刷新跳转时如果不清理定时器与 Canvas 帧循环，会导致内存泄漏或重叠渲染。通过监听 astro:before-swap 事件可实现优雅注销：

1
document.addEventListener("astro:before-swap", () => {
2
  clearAllTimeouts();
3
  stopParticles(); // cancelAnimationFrame
4
  document.body.style.overflow = "";
5
  container.remove();
6
}, { once: true });

三、 Firefly 颜色参考#

参考链接：萌娘百科 - 流萤

1
background: linear-gradient(
2
  left,
3
  #425574, #508494, #65866c, #3c969c, #71acaf, #4cc3c6, #7dc8a4,
4
  #9fd08a, #dfe482, #eee89d, #e8e390, #f6b65b, #e77a22, #d35303
5
);

1
 ████  #425574  (Cold Steel Blue)
2
 ████  #508494  (Deep Cyan Muted)
3
 ████  #65866c  (Sage Green)
4
 ████  #3c969c  (Peacock Teal)
5
 ████  #71acaf  (Soft Mint)
6
 ████  #4cc3c6  (Firefly Primary Cyan)
7
 ████  #7dc8a4  (Spring Mint Green)
8
 ████  #9fd08a  (Soft Lime Green)
9
 ████  #dfe482  (Warm Lemon)
10
 ████  #eee89d  (Pale Gold)
11
 ████  #e8e390  (Sunny Yellow)
12
 ████  #f6b65b  (Firefly Primary Amber)
13
 ████  #e77a22  (Deep Orange)
14
 ████  #d35303  (Vivid Rust Orange)
15

16
                            
17

通过以上解耦与封装，Firefly 主题成功实现了动画效果的模块化复用与自由扩展！

音乐

音乐

流萤开屏动画效果演示#

一、如何在当前博客框架中嵌入开屏动画#

1. 页面框架挂载点 (`src/layouts/Layout.astro`)#

2. 全局与文章预设配置 (`src/config/opConfig.ts`)#

二、组件复用与重构 (`OpSplashScreen.astro`)#

1. Canvas 2D 萤火虫动态粒子底层#

2. 单字切片与整句连续渐变#

3. Swup / View Transitions 生命周期解绑#

三、 Firefly 颜色参考#

支持与分享

评论区

音乐

音乐

Bokuyaba Firefly 开屏动画适配

流萤开屏动画效果演示#

一、 如何在当前博客框架中嵌入开屏动画#

1. 页面框架挂载点 (src/layouts/Layout.astro)#

2. 全局与文章预设配置 (src/config/opConfig.ts)#

二、 组件复用与重构 (OpSplashScreen.astro)#

1. Canvas 2D 萤火虫动态粒子底层#

2. 单字切片与整句连续渐变#

3. Swup / View Transitions 生命周期解绑#

三、 Firefly 颜色参考#

支持与分享

评论区

一、如何在当前博客框架中嵌入开屏动画#

1. 页面框架挂载点 (`src/layouts/Layout.astro`)#

2. 全局与文章预设配置 (`src/config/opConfig.ts`)#

二、组件复用与重构 (`OpSplashScreen.astro`)#