hookehuyr

feat(StarryBackground): 为星星添加闪烁效果并减少默认数量

为星星背景添加动态闪烁效果,通过正弦波函数叠加变化透明度。同时将默认星星数量从800减少到500以优化性能
......@@ -28,7 +28,7 @@ const props = defineProps({
// 星星数量
starCount: {
type: Number,
default: isWxMobile ? 800 : 800
default: isWxMobile ? 500 : 500
},
// 星星颜色 (RGBA 前缀,例如 '255,255,255')
starColor: {
......@@ -169,8 +169,14 @@ const render = () => {
// 绘制星星
context.beginPath();
// 叠加闪烁效果:使用正弦波在基础 alpha 上叠加快速变化
// Date.now() 产生时间变化,i 作为相位偏移,* 0.005 控制闪烁频率
const twinkle = Math.abs(Math.sin(Date.now() * 0.006 + i));
const finalAlpha = Math.min(1, Math.max(0, star.alpha * (0.5 + 0.5 * twinkle)));
const bg = context.createRadialGradient(star.x, star.y, 0, star.x, star.y, star.r);
bg.addColorStop(0, `rgba(${props.starColor}, ${star.alpha})`);
bg.addColorStop(0, `rgba(${props.starColor}, ${finalAlpha})`);
bg.addColorStop(1, `rgba(${props.starColor}, 0)`);
context.fillStyle = bg;
context.arc(star.x, star.y, star.r, 0, Math.PI * 2, true);
......