用 Canvas 写一个樱花飘落特效

#canvas#特效
用 Canvas 写一个樱花飘落特效

目标

  • 全屏飘落的花瓣，不遮挡任何交互（pointer-events: none）
  • 移动端自动减少数量，低端设备也不掉帧
  • 尊重系统的「减弱动效」设置

核心实现

每片花瓣是一份状态数据，逐帧更新位置、摆动与旋转：

petal.y += petal.speed;
petal.x += Math.sin(petal.swayPhase) * petal.sway;
petal.rotation += petal.spin;

渲染时用横轴缩放模拟花瓣翻面时「变窄」的视觉：

ctx.scale(0.25 + 0.75 * Math.abs(Math.sin(petal.flipPhase)), 1);

性能与降级

花瓣数量按屏宽自适应（10 ~ 28 片），由 requestAnimationFrame 驱动， 页面切到后台时自动暂停；开启 prefers-reduced-motion 的用户不会看到动画。

全部逻辑在 src/scripts/sakura.js，画布挂在 BaseLayout 的 #sakura-canvas 上。