樱花飘落特效配置

约 1861 字大约 6 分钟

2025-11-20

樱花飘落特效配置位于 src/config.ts 文件中的 sakuraConfig 对象，控制博客页面的樱花飘落效果。

src/config.ts
export const sakuraConfig: SakuraConfig = {
	enable: false, // 默认关闭樱花特效
	sakuraNum: 21, // 樱花数量
	limitTimes: -1, // 樱花越界限制次数，-1为无限循环
	size: {
		min: 0.5, // 樱花最小尺寸倍数
		max: 1.1, // 樱花最大尺寸倍数
	},
	opacity: {
		min: 0.3, // 樱花最小不透明度
		max: 0.9, // 樱花最大不透明度
	},
	speed: {
		horizontal: {
			min: -1.7, // 水平移动速度最小值
			max: -1.2, // 水平移动速度最大值
		},
		vertical: {
			min: 1.5, // 垂直移动速度最小值
			max: 2.2, // 垂直移动速度最大值
		},
		rotation: 0.03, // 旋转速度
		fadeSpeed: 0.03, // 消失速度，不应大于最小不透明度
	},
	zIndex: 100, // 层级，确保樱花在合适的层级显示
};

我们来详细解析 src/config.ts 文件中的 sakuraConfig 对象，并为你提供一份配置教程。

这个配置项用于在你的博客页面上添加一个美观的樱花飘落动态效果，通常作为背景装饰，能为网站增添一份浪漫或日式的氛围。

樱花飘落特效 (Sakura) 配置教程

sakuraConfig 对象提供了对樱花飘落特效的全面控制，从是否启用、数量多少到飘落的速度和样式，都可以自定义。

核心配置项详解

1. 启用特效 (`enable`)

enable: false,

作用: 控制整个樱花飘落特效的开关。
配置:
- true: 启用樱花特效，页面上会开始飘落樱花。
- false: (默认) 禁用樱花特效，页面上不会显示任何樱花。

2. 樱花数量 (`sakuraNum`)

sakuraNum: 21,

作用: 设置同时在屏幕上显示的樱花数量。
配置:
- 一个正整数。数值越大，屏幕上的樱花越多，视觉效果越密集，但可能会对页面性能产生一定影响，尤其是在配置较低的设备上。
- 建议: 从一个较小的值（如 10-20）开始尝试，根据你的视觉偏好和页面性能来调整。

3. 越界限制次数 (`limitTimes`)

limitTimes: -1,

作用: 控制樱花在屏幕上消失后是否重新生成。这决定了特效是无限循环还是只播放一段时间。
配置:
- -1: (默认) 无限循环。樱花从屏幕顶部飘落，当它们完全离开屏幕底部后，会在屏幕顶部重新生成，继续飘落。
- 一个非负整数 N: 樱花只会飘落 N 次。当樱花第 N 次从屏幕底部消失后，它们将不再重新生成，特效会自然结束。

4. 樱花尺寸 (`size`)

size: {
    min: 0.5,  // 樱花最小尺寸倍数
    max: 1.1,  // 樱花最大尺寸倍数
},

作用: 控制樱花的大小。通过设置一个范围，使得每个樱花的大小都有所不同，增加视觉的随机性和自然感。
配置:
- min: 樱花的最小尺寸（以一个基础大小为倍数）。
- max: 樱花的最大尺寸（以一个基础大小为倍数）。
- 每个新生成的樱花都会随机获得一个介于 min 和 max 之间的尺寸。例如，如果基础大小是 10px，min 是 0.5，max 是 1.1，那么樱花的实际大小会在 5px 到 11px 之间。

5. 樱花透明度 (`opacity`)

opacity: {
    min: 0.3,  // 樱花最小不透明度
    max: 0.9,  // 樱花最大不透明度
},

作用: 控制樱花的透明程度。同样，设置一个范围可以让效果更自然。
配置:
- min: 樱花的最小不透明度。值的范围是 0 (完全透明) 到 1 (完全不透明)。
- max: 樱花的最大不透明度。
- 每个樱花都会随机获得一个介于 min 和 max 之间的不透明度值。例如，0.3 表示 30% 的不透明度，看起来比较淡；0.9 表示 90% 的不透明度，看起来比较实。

6. 飘落速度与动画 (`speed`)

speed: {
    horizontal: {
        min: -1.7,  // 水平移动速度最小值
        max: -1.2,  // 水平移动速度最大值
    },
    vertical: {
        min: 1.5,   // 垂直移动速度最小值
        max: 2.2,   // 垂直移动速度最大值
    },
    rotation: 0.03,    // 旋转速度
    fadeSpeed: 0.03,   // 消失速度
},

作用: 这是最核心的动画配置，控制樱花如何飘落、旋转和消失。
配置:
- horizontal: 控制樱花的水平（左右）移动速度。
  - 值为负数表示向左移动，值为正数表示向右移动。
  - 设置一个从 -1.7 到 -1.2 的范围，意味着樱花会以一个随机的、向左的速度飘落，营造出风吹过的效果。
- vertical: 控制樱花的垂直（上下）移动速度。
  - 值为正数表示向下移动（符合自然下落）。
  - 设置一个范围，使得樱花下落的速度有快有慢。
- rotation: 控制樱花在飘落过程中的旋转速度。
  - 值为正数表示顺时针旋转，值为负数表示逆时针旋转。
  - 数值越大，旋转得越快。0.03 是一个比较缓慢、自然的旋转速度。
- fadeSpeed: 控制樱花在生命周期结束时（通常是即将离开屏幕底部时）的淡出速度。
  - 这个值决定了樱花的不透明度每秒减少多少。
  - 重要: 此值不应大于 opacity.min，否则樱花可能会在完全消失前就变成完全透明，效果会显得突兀。

7. 层级 (`zIndex`)

zIndex: 100,

作用: 控制樱花特效在页面元素堆叠顺序中的层级。
配置:
- zIndex 的值越大，元素在垂直于屏幕的堆叠顺序中就越靠上。
- 设置一个较高的值（如 100）可以确保樱花会显示在页面的大部分内容之上，但又不会覆盖掉导航栏、侧边栏等重要的交互元素（假设这些元素的 zIndex 更高）。
- 如果发现樱花被其他内容遮挡，可以适当提高此值；如果樱花遮挡了需要点击的按钮等，可以适当降低此值。

快速配置与效果调整建议

启用并预览:
- 将 enable 设置为 true。
- 保存文件并启动博客，初步预览效果。
调整数量:
- 如果觉得樱花太多或太少，修改 sakuraNum 的值。
调整飘落效果:
- 想让樱花飘得更慢/更快: 减小/增大 speed.vertical.min 和 speed.vertical.max 的值。
- 想让樱花向左飘得更明显: 让 speed.horizontal.min 和 speed.horizontal.max 的值更负（例如 -2.5 到 -1.8）。
- 想让樱花向右飘: 将 speed.horizontal 的值设置为正数（例如 1.2 到 1.7）。
- 不想要旋转效果: 将 speed.rotation 设置为 0。
调整视觉样式:
- 想要更透明、更梦幻的樱花: 减小 opacity.min 和 opacity.max 的值。
- 想要更大的樱花: 增大 size.min 和 size.max 的值。
性能考虑:
- 如果在低端设备上预览时发现页面卡顿，可以尝试减小 sakuraNum 的值，或者降低 speed.rotation 和 speed.fadeSpeed 等动画相关的数值。

通过以上配置和调整，你可以轻松地在你的博客页面上实现一个美丽的樱花飘落特效，为访客带来愉悦的视觉体验。根据你的喜好和网站风格，灵活调整各项参数，打造独一无二的动态背景效果吧！

版权所有

版权归属：LyraVoid Team

许可证：署名 4.0 国际 (CC-BY-4.0)

部署

整体布局

Markdown

组织

高级

资源嵌入