jQuery - 从与旧圈子相同的位置开始新圈子扩展

Question

我有一个圆圈动画，深蓝色的圆圈随机出现并展开。当这些扩大的圆圈大约覆盖了一半以上的屏幕时，扩大的圆圈的颜色变为浅蓝色。你可以在这里看到动画:https://rimildeyjsr.github.io/spotify-circle-animation/

过了一会儿，动画变得有点困惑，不同颜色的圆圈随机出现。为了获得流畅的动画，当颜色被交换时，我认为新的圆圈应该出现在与旧圆圈相同的位置。

这是我到目前为止的代码:

CSS:

.initial-div {
    width: 1000px;
    height: 1000px;
    transform: scale(0);
}

.position-div{
    position: absolute;
    border-radius: 50%;
    display: none;
}

.section {
    overflow-y: hidden;
}

.animate {
    -webkit-animation: expand 100s;
}

@-webkit-keyframes expand {
    0%{
        -webkit-transform: scale(0,0);
    }

    100%{
        -webkit-transform: scale(1,1);
    }
}

jQuery:

var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

        var circles = [];
        function makeDiv(color){
            var divsize = 1000;
            $newdiv = $('<div/>').addClass('initial-div').css({
                'background-color': color
            });

            var posx = (Math.random() * ($('.section').width()) - (divsize / 2)).toFixed();
            var posy = (Math.random() * ($('.section').height()) - (divsize / 2)).toFixed();
            var circle = {
                x : posx,
                y : posy
            };
            $newdiv.addClass('position-div').css({
                'left':posx+'px',
                'top':posy+'px'
            }).appendTo("#fullpage").addClass('animate').css({'display':'block'}).one(animationEnd,function(){
                $(this).remove();
            });
        }

        $(document).ready(function(){


                var colorArray = ['#11256c','#24ccdf'];
                var i= 0,flag=0;
                var color = colorArray[i];
                setInterval(function(){
                    flag++;
                    makeDiv(color);
                    if (flag == 10){
                        color = colorArray[i];
                        i++;
                        if (i == 2) {
                            i = 0;
                        }
                        flag=0;
                    }
                },2000);

        });

我想我们需要一个包含旧圆圈 x 和 y 位置的对象数组，但我不确定如何适应该函数。有人可以帮忙吗？

Answer 1

你可以做这样的事情，只需填充 circles 数组并为每次迭代采用相同的坐标

  var circles = [];

  function makeDiv(color, index){

      $newdiv = $('<div/>').addClass('initial-div').css({
          'background-color': color
      });

      // access the coordinates with index so for each iteration they will be the same
      $newdiv.addClass('position-div').css({
          'left':circles[index].x+'px',
          'top':circles[index].y+'px'
      }).appendTo("#fullpage").addClass('animate').css({'display':'block'}).one(animationEnd,function(){
          $(this).remove();
      });
  }

  $(document).ready(function(){

    // populate your circles array with randomm coordinates
    for (var i = 0; i < 11; i++) {
      var divsize = 1000;
      var circle = {
          x : (Math.random() * ($('.section').width()) - (divsize / 2)).toFixed(),
          y : (Math.random() * ($('.section').height()) - (divsize / 2)).toFixed()
      };
      circles.push(circle);
    }

    var colorArray = ['#11256c','#24ccdf'];
    var i= 0,flag=0;
    var color = colorArray[i];
    setInterval(function(){
        // pass the index (flag)
        makeDiv(color, flag);
        flag++;
        if (flag == 10){
            color = colorArray[i];
            i++;
            if (i == 2) {
                i = 0;
            }
            flag=0;
        }
    },2000);

  });

这将是您问题的答案但我不认为这会减少性能问题，您宁愿需要在一些迭代后删除圆圈