磁力吸附效果

效果说明

本案例实现了一个磁力吸附的粒子效果。当鼠标靠近时，粒子会被吸引并跟随鼠标移动，离开后会缓慢返回原位，模拟磁场效果。

核心实现

1. 磁力计算

磁力效果的核心是基于距离的力的计算:

update() {
    // 1. 计算与鼠标的距离
    const dx = mouse.x - this.x;
    const dy = mouse.y - this.y;
    const distance = Math.sqrt(dx * dx + dy * dy);
    
    // 2. 计算力的方向(单位向量)
    const forceDirectionX = dx / distance;
    const forceDirectionY = dy / distance;
    
    // 3. 计算力的大小(距离越近力越大)
    const maxDistance = mouse.radius;
    const force = (maxDistance - distance) / maxDistance;
}

2. 粒子移动逻辑

根据距离实现不同的移动行为:

// 5. 根据距离判断行为
if (distance < mouse.radius) {
    // 在影响范围内 - 向鼠标移动
    this.x += directionX;
    this.y += directionY;
} else {
    // 在影响范围外 - 缓慢返回原位
    if (this.x !== this.baseX) {
        const dx = this.x - this.baseX;
        this.x -= dx / 10;  // 每次返回1/10的距离
    }
}

3. 密度影响

通过密度参数调整粒子的响应程度:

class Particle {
    reset() {
        // 粒子属性
        this.density = Math.random() * 30 + 1;    // 密度(影响移动速度)
    }
    
    update() {
        // 4. 计算实际移动方向和距离
        const directionX = forceDirectionX * force * this.density;
        const directionY = forceDirectionY * force * this.density;
    }
}

Demo