0

我有一个 snap svg 动画，它可以为一堆圆圈设置动画，如果它们彼此之间有一定的距离，则会在它们之间画一条线。但是，我意识到我可以做很多优化，但我不确定如何去做。我觉得这将是有用的

  1. 在 snap 中有一个很好的接近检测示例
  2. 有更多关于在 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);

现在，我可以告诉渲染器无法跟上所有各种动画/循环。任何优化上述事情的帮助（或任何其他你可以看到我做的奇怪的事情，将不胜感激。

4

1 回答 1

0

我通过只运行一个动画循环来清理它，每 10 毫秒在一个计时器上运行一次，并通过给它们一个斜率来动画圆的位置，并且每次更新时，沿着该斜率继续它们。你可以在这里看到一个更新的小提琴：

http://jsfiddle.net/heaversm/fJ6fj/

    var mainModule = {
  s: Snap("#svg"),
  drawingConfig: {
    circles: {
      amount: 20,
      sizeMin: 10,
      sizeMax: 20,
      proximity: 100,
      circleGroup: null,
      circleArray: [],
      animTime: 2000
    },
    canvas: {
      width: 800,
      height: 600
    }
  },

  init: function(){
    //this.sizeCanvas();
    this.makeCircles();
  },

  sizeCanvas: function(){
    $('#svg').width(800).height(600);
  },

  makeCircles: function(){
    this.drawingConfig.circles.circleGroup = this.s.g();

    for (var i=0; i<this.drawingConfig.circles.amount;i++){
      var circleX = this.randomNumber(0, this.drawingConfig.canvas.width);
      var circleY = this.randomNumber(0, this.drawingConfig.canvas.height);
      var circleRadius = this.randomNumber(this.drawingConfig.circles.sizeMin,this.drawingConfig.circles.sizeMax);
      var circleFill = '#'+Math.floor(Math.random()*16777215).toString(16);
      var circleShape = this.s.circle(circleX, circleY, circleRadius);
      circleShape.attr({
        fill: circleFill
      });
      this.drawingConfig.circles.circleGroup.add(circleShape);

      var circleIncline = this.setIncline();
      var circleObj = { incline: circleIncline, shape: circleShape };

      this.drawingConfig.circles.circleArray.push(circleObj);

    }

    this.update();


  },

  setIncline: function(){
    return { incX: this.randomNumber(-5,5), incY: this.randomNumber(-5,5) }
  },

  update: function(){

    var lines = Snap.selectAll('line');
    lines.remove();

    for (var i=0; i<this.drawingConfig.circles.amount; i++){
      var circle = this.drawingConfig.circles.circleArray[i];
      var circleX = circle.shape.node.cx.animVal.value;
      var circleY = circle.shape.node.cy.animVal.value;
      this.move(circle,circleX,circleY);

      for (var j=0;j<i;j++){
        if (i != j){
          var circle2 = this.drawingConfig.circles.circleArray[j];
          var circle2X = circle2.shape.node.cx.animVal.value;
          var circle2Y = circle2.shape.node.cy.animVal.value;
          var dist = mainModule.distance(circleX,circleY,circle2X,circle2Y);
          if (dist <= mainModule.drawingConfig.circles.proximity){ //
            var lineWeight = 10/dist;
            var line = mainModule.s.line(circleX, circleY, circle2X, circle2Y).attr({stroke: '#a6a8ab', strokeWidth: '1px'});
          }

          if (dist <= 10) { //collision
            circle.incline = mainModule.setIncline();
            circle2.incline = mainModule.setIncline();
          }

        }
      }

    }

    setTimeout(function(){ mainModule.update(); },10);

  },

  distance: function(circleX,circleY,circle2X,circle2Y){
    var distX = circle2X - circleX;
    var distY = circle2Y - circleY;
    distX = distX*distX;
    distY = distY*distY;
    return Math.sqrt(distX + distY);
  },

  move: function(circle,curX,curY){
    if (curX > this.drawingConfig.canvas.width || curX < 0) {
      circle.incline.incX = -circle.incline.incX;
    }
    if (curY > this.drawingConfig.canvas.height || curY < 0) {
      circle.incline.incY = -circle.incline.incY;
    }
    curX = curX + circle.incline.incX;
    curY = curY + circle.incline.incY;

    if (curX > this.drawingConfig.canvas.width) {
      curX = this.drawingConfig.canvas.width;
      circle.incline = this.setIncline();
    } else if (curX < 0) {
      curX = 0;
      circle.incline = this.setIncline();
    }

    if (curY > this.drawingConfig.canvas.height) {
      curY = this.drawingConfig.canvas.height;
      circle.incline = this.setIncline();
    } else if (curY < 0) {
      curY = 0;
      circle.incline = this.setIncline();
    }

    circle.shape.attr({ cx: curX, cy: curY });

  },

  randomNumber: function(min,max){
    return Math.floor(Math.random()*(max-min+1)+min);
  },

  getBounds: function(shape){
    shapeBox = shape.node.getBoundingClientRect();
  }

}

mainModule.init();
于 2014-06-05T17:07:43.003 回答