樱花特效配置

约 1456 字大约 5 分钟

2025-01-27

概述

樱花特效配置用于在网站中添加动态的樱花飘落效果，营造浪漫的视觉氛围。

文件位置

src/config/sakuraConfig.ts

基础配置

启用樱花特效

export const sakuraConfig: SakuraConfig = {
  enable: true, // 启用樱花特效
  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, // 层级
};

配置选项详解

基础设置

选项	类型	说明	默认值
`enable`	`boolean`	是否启用樱花特效	`true`
`sakuraNum`	`number`	樱花数量	`21`
`limitTimes`	`number`	越界限制次数，-1为无限	`-1`

尺寸设置

选项	类型	说明	默认值
`size.min`	`number`	樱花最小尺寸倍数	`0.5`
`size.max`	`number`	樱花最大尺寸倍数	`1.1`

透明度设置

选项	类型	说明	默认值
`opacity.min`	`number`	樱花最小不透明度	`0.3`
`opacity.max`	`number`	樱花最大不透明度	`0.9`

速度设置

选项	类型	说明	默认值
`speed.horizontal.min`	`number`	水平移动速度最小值	`-1.7`
`speed.horizontal.max`	`number`	水平移动速度最大值	`-1.2`
`speed.vertical.min`	`number`	垂直移动速度最小值	`1.5`
`speed.vertical.max`	`number`	垂直移动速度最大值	`2.2`
`speed.rotation`	`number`	旋转速度	`0.03`
`speed.fadeSpeed`	`number`	消失速度，不应大于最小不透明度	`0.03`

层级设置

选项	类型	说明	默认值
`zIndex`	`number`	樱花层级	`100`

使用场景

1. 浪漫主题网站

export const sakuraConfig: SakuraConfig = {
  enable: true,
  sakuraNum: 30, // 更多樱花
  limitTimes: -1,
  size: {
    min: 0.8,
    max: 1.5, // 更大的樱花
  },
  opacity: {
    min: 0.4,
    max: 0.95, // 更高的透明度
  },
  speed: {
    horizontal: {
      min: -2.0,
      max: -1.0, // 更慢的飘落
    },
    vertical: {
      min: 1.0,
      max: 1.8,
    },
    rotation: 0.02, // 更慢的旋转
    fadeSpeed: 0.02, // 更慢的消失
  },
  zIndex: 100,
};

2. 简约风格

export const sakuraConfig: SakuraConfig = {
  enable: true,
  sakuraNum: 10, // 少量樱花
  limitTimes: -1,
  size: {
    min: 0.3,
    max: 0.8, // 较小的樱花
  },
  opacity: {
    min: 0.2,
    max: 0.7, // 较低的透明度
  },
  speed: {
    horizontal: {
      min: -1.0,
      max: -0.5,
    },
    vertical: {
      min: 2.0,
      max: 3.0, // 较快的飘落
    },
    rotation: 0.05,
    fadeSpeed: 0.05, // 较快的消失
  },
  zIndex: 100,
};

3. 节日主题

export const sakuraConfig: SakuraConfig = {
  enable: true,
  sakuraNum: 50, // 大量樱花营造节日氛围
  limitTimes: -1,
  size: {
    min: 0.4,
    max: 1.2,
  },
  opacity: {
    min: 0.5,
    max: 1.0, // 完全不透明
  },
  speed: {
    horizontal: {
      min: -2.5,
      max: -1.5,
    },
    vertical: {
      min: 1.2,
      max: 2.5,
    },
    rotation: 0.04,
    fadeSpeed: 0.04,
  },
  zIndex: 100,
};

性能优化

根据设备调整

// 根据设备性能调整樱花数量
const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;

export const sakuraConfig: SakuraConfig = {
  enable: true,
  sakuraNum: isMobile ? 10 : 21, // 移动端减少樱花数量
  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,
};

条件启用

// 只在特定页面启用
export const sakuraConfig: SakuraConfig = {
  enable: process.env.NODE_ENV === 'production', // 只在生产环境启用
  // ... 其他配置
};

自定义样式

CSS 自定义

/* 樱花容器 */
.sakura-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
  overflow: hidden;
}

/* 单个樱花 */
.sakura {
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #ffb3ba 0%, #ff9a9e 100%);
  border-radius: 50% 0 50% 0;
  opacity: 0.8;
  animation: sakura-fall linear infinite;
}

/* 樱花飘落动画 */
@keyframes sakura-fall {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

/* 不同大小的樱花 */
.sakura.small {
  width: 6px;
  height: 6px;
}

.sakura.medium {
  width: 10px;
  height: 10px;
}

.sakura.large {
  width: 14px;
  height: 14px;
}

颜色自定义

/* 粉色樱花 */
.sakura.pink {
  background: radial-gradient(circle, #ffb3ba 0%, #ff9a9e 100%);
}

/* 白色樱花 */
.sakura.white {
  background: radial-gradient(circle, #ffffff 0%, #f0f0f0 100%);
}

/* 渐变樱花 */
.sakura.gradient {
  background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
}

响应式设计

移动端优化

export const sakuraConfig: SakuraConfig = {
  enable: true,
  sakuraNum: 15, // 移动端减少数量
  limitTimes: -1,
  size: {
    min: 0.4,
    max: 0.8, // 移动端使用较小尺寸
  },
  opacity: {
    min: 0.2,
    max: 0.8, // 移动端降低透明度
  },
  speed: {
    horizontal: {
      min: -1.2,
      max: -0.8,
    },
    vertical: {
      min: 1.8,
      max: 2.5, // 移动端加快速度
    },
    rotation: 0.04,
    fadeSpeed: 0.04, // 移动端加快消失速度
  },
  zIndex: 100,
};