У меня есть анимация snap svg, которая анимирует кучу кругов и рисует линию между ними, если они находятся в определенной близости друг от друга. Однако я понимаю, что можно многое оптимизировать, но я не совсем уверен, как это сделать. Я чувствую, что было бы полезно
- есть хороший пример обнаружения близости в оснастке
- есть дополнительная информация об оптимизации анимации в snap svg. Это было нелегко найти.
Вот рабочий пример анимации:
http://jsfiddle.net/heaversm/sbj4W/1/
и вот что, как я считаю, можно оптимизировать:
Каждый круг вызывает свою собственную функцию анимации — все круги были добавлены в группу, и я предполагаю, что есть способ применить случайное движение ко всем членам группы, который более эффективен, чем вызов функции для каждого элемента. внутри группы.
for (var i=0; i<this.drawingConfig.circles.amount;i++){
...
this.animateSingle(circleShape);
}
Функция близости неудобна — для каждого круга, для каждого цикла обновления мне приходится перебирать массив всех остальных кругов и выяснять, достаточно ли близки координаты X и Y, чтобы провести линию. Кроме того, это означает, что вы получаете повторяющиеся линии, потому что каждый круг будет рисовать линию к своим соседям, вместо того, чтобы иметь одну общую линию между ними.
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);
}
}
}
Соответственно, функция анимации каждого круга очищает все линии на экране. В идеале все круги должны использовать одну функцию обновления, и в этой функции вы должны очищать линии.
Snap.animate(startX, animX, function (val) {
var lines = Snap.selectAll('line');
lines.remove();
...
}, mainModule.drawingConfig.circles.animTime);
Прямо сейчас я могу сказать, что рендерер не может справиться со всеми различными анимациями / циклами. Будем очень признательны за любую помощь в оптимизации вышеперечисленных вещей (или чего-то еще, что вы видите, что я делаю странно).
