0

こんにちは、cssdeck.com のチュートリアルに従って、HTML5 Canvas コードで Particles を作成しました。

正しく起こっていることは良いことです。URL: blauky.com/particle_test.html

マウスを粒子の上に置くと、それらは分散して飛び去り始めます。しかし、弾性のように、少し飛んだ後、これらの粒子を元に戻そうとしています。このビデオのようなエフェクトを作成するには: http://www.youtube.com/watch?v=gSk4AWvnG8Y&feature=youtu.be

前もってありがとう、ジーシャン

4

1 に答える 1

0

パーティクルを開始位置に戻すための大まかなコード スニペットを次に示します。

各粒子の初期位置を保存します。

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;
}

「組み立てが必要です！」: 繰り返しますが、これらは大まかな切り取りです。正確なニーズに合わせて調整してください。

于 2013-07-08T13:56:20.810 に答える