hookehuyr

feat(StarryBackground): 优化流星效果并调整默认参数

- 增加流星边界检测和重置逻辑
- 使用线性渐变实现流星拖尾淡出效果
- 调整流星生成位置使其从右侧出现
- 修改默认速度、长度等参数值
......@@ -31,22 +31,22 @@ const props = defineProps({
// 星星移动速度系数 (值越大移动越快)
starSpeed: {
type: Number,
default: 0.15
default: 1
},
// 流星速度 - 水平分量 (负值向左,正值向右)
meteorVx: {
type: Number,
default: -2
default: -5
},
// 流星速度 - 垂直分量 (正值向下)
meteorVy: {
type: Number,
default: 4
default: 5
},
// 流星拖尾长度系数 (值越大尾巴越长)
meteorTrail: {
type: Number,
default: 20
default: 5
}
});
......@@ -101,15 +101,32 @@ const render = () => {
// 流星逻辑
if (i === meteorIndex) {
star.vx = props.meteorVx;
star.vy = props.meteorVy;
context.beginPath();
context.strokeStyle = `rgba(${props.starColor}, ${star.alpha})`;
context.lineWidth = star.r;
context.moveTo(star.x, star.y);
context.lineTo(star.x + star.vx * props.meteorTrail, star.y + star.vy * props.meteorTrail);
context.stroke();
context.closePath();
// 检查流星是否超出边界,如果是则重置
if (star.x < -100 || star.y > height + 100) {
meteorIndex = -1; // 结束当前流星
} else {
star.vx = props.meteorVx;
star.vy = props.meteorVy;
context.beginPath();
// 创建线性渐变来实现淡入淡出和拖尾效果
const meteorHeadX = star.x + star.vx;
const meteorHeadY = star.y + star.vy;
const meteorTailX = star.x + star.vx * props.meteorTrail;
const meteorTailY = star.y + star.vy * props.meteorTrail;
const gradient = context.createLinearGradient(meteorHeadX, meteorHeadY, meteorTailX, meteorTailY);
gradient.addColorStop(0, `rgba(${props.starColor}, 1)`); // 头部最亮
gradient.addColorStop(0.4, `rgba(${props.starColor}, 0.5)`); // 中间半透明
gradient.addColorStop(1, `rgba(${props.starColor}, 0)`); // 尾部完全透明
context.strokeStyle = gradient;
context.lineWidth = 1; // 细一点
context.moveTo(meteorHeadX, meteorHeadY);
context.lineTo(meteorTailX, meteorTailY);
context.stroke();
context.closePath();
}
}
// 星星闪烁与移动逻辑
......@@ -161,7 +178,16 @@ const render = () => {
const triggerMeteor = () => {
const time = Math.round(Math.random() * 3000 + 33);
meteorTimeoutId = setTimeout(() => {
// 随机选择一个星星作为流星的起点,或者随机生成一个位置
// 为了保证流星从右往左出现,我们从右侧区域随机选点
meteorIndex = Math.ceil(Math.random() * stars.length);
// 如果选中了星星,重置它的位置到右上方,以便从右往左飞
if (stars[meteorIndex]) {
stars[meteorIndex].x = width + Math.random() * 200; // 屏幕右侧外
stars[meteorIndex].y = Math.random() * height * 0.5; // 屏幕上半部分
}
triggerMeteor();
}, time);
};
......