javascript - 在 HTML5 Canvas 中置换和恢复粒子

Question

嗨，我按照 cssdeck.com 上的教程在 HTML5 Canvas 代码中创建了一个粒子

正在发生的事情是好的。网址：blauky.com/particle_test.html

当您将鼠标悬停在粒子上时，它们会分散并开始飞走。但我正试图在它们飞走一点后将它们带回来，就像弹性一样。要创建类似于此视频中的效果：http ://www.youtube.com/watch?v=gSk4AWvnG8Y&feature=youtu.be

提前致谢，泽山

Answer 1

以下是一些粗略的代码片段，可将您的粒子拉回起始位置

保存每个粒子的初始位置：

this.initialX;
this.initialY;

// and in setPos
this.initialX=x;
this.initialY=y;

设置允许粒子从初始位置移动的最大移动距离：

// let the particle get 100px from initial before starting its return
this.maxTravel=100;

运动时，检查粒子是否与 initialXY 有指定距离。

var dx = p.x-p.initialX;
var dy = p.y-p.initialY;

if( dx*dx+dy*dy > this.maxTravel*this.maxTravel )

如果是这样，在每个新动画帧期间开始将部分带回 initialXY：

这是将粒子带回初始位置的代码片段：

// In particle definition: track % progress in returing to initial
this.returnToInitialPercentage=100;


// In update: bring particle 1% closer to initialXY
p.returnToInitialPercentage-=1;
if(p.returnToInitialPercentage>0){
    returnParticleToInitial(p,returnToInitialPercentage)
}

// 
function returnParticleToInitial(p,percent) {
    var dx = p.x-p.initialX;
    var dy = p.y-p.initialY;
    percent/=100;
    p.x = p.initialX + dx*percent;
    p.y = p.initialY + dy*percent;
}

“需要一些组装！” ：同样，这些都是粗略的剪辑，请调整它们以适合您的确切需求。