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

时间:2017-05-21 13:16:16

标签: jquery css

我有一个圆形动画,其中深蓝色的圆圈出现在随机位置并展开。当这些扩展的圆圈大约覆盖屏幕的一半时,扩展圆圈的颜色变为浅蓝色。您可以在此处查看动画: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位置的对象数组,但我不确定如何适应该函数。有人可以帮忙吗?

1 个答案:

答案 0 :(得分:1)

你可以这样做,只需填充圆形数组,并为每次迭代采用相同的坐标

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

  });

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