一連の円をアニメーション化するスナップ svg アニメーションがあり、それらが互いに特定の距離内にある場合はそれらの間に線を引きます。ただし、実行できる最適化がたくさんあることはわかっていますが、その方法が正確にはわかりません。重宝しそうな気がする
- スナップでの近接検出の良い例があります
- snap svg でのアニメーションの最適化に関する詳細情報があります。見つけるのは簡単ではありませんでした。
アニメーションの実際の例を次に示します。
http://jsfiddle.net/heaversm/sbj4W/1/
そして、最適化できると私が信じていることは次のとおりです。
各円は独自のアニメーション関数を呼び出します。円はすべてグループに追加されています。グループのすべてのメンバーにランダムなモーションを適用する方法があり、すべての要素に対して関数を呼び出すよりもパフォーマンスが高いと思います。グループ内。
for (var i=0; i<this.drawingConfig.circles.amount;i++){
...
this.animateSingle(circleShape);
}
近接関数は厄介です。円ごと、更新サイクルごとに、他のすべての円の配列をループして、X 座標と Y 座標が線を引くのに十分近いかどうかを確認する必要があります。さらに、2 つの円の間で 1 つの共有回線を使用するのではなく、各円が隣接する円に線を引くため、重複した線が得られることを意味します。
for (var i=0;i<circles.length;i++){
var nextCircle = circles[i].node;
var nextCircleX = nextCircle.cx.baseVal.value;
var distance = Math.abs(nextCircleX-thisCircleX);
var proximity = mainModule.drawingConfig.circles.proximity;
if (distance < proximity){
var nextCircleY = nextCircle.cy.baseVal.value;
var thisCircleY = shape.node.cy.baseVal.value;
var distanceY = Math.abs(nextCircleY - thisCircleY);
if (distanceY < proximity){
var line = mainModule.s.line(thisCircleX, thisCircleY, nextCircleX, nextCircleY).attr({stroke: '#a6a8ab', strokeWidth: '1px'});
mainModule.drawingConfig.circles.circleGroup.add(line);
}
}
}
これに対応して、各円のアニメーション機能により、画面上のすべての線が消去されます。理想的には、すべての円が 1 つの更新関数を共有し、その関数内で線を消去します。
Snap.animate(startX, animX, function (val) {
var lines = Snap.selectAll('line');
lines.remove();
...
}, mainModule.drawingConfig.circles.animTime);
現時点では、レンダラーがさまざまなアニメーションやループのすべてに対応できていないことがわかります。上記のことを最適化するための助けがあれば（または私が奇妙なことをしていることがわかれば、大歓迎です。
