jquery - 优化圆形动画

Question

我有一个圆圈动画，圆圈在一段时间内不断扩大。你可以在这里看到动画:https://rimildeyjsr.github.io/spotify-circle-animation/

长时间运行的动画显着降低了网站速度 - 您可以从字面上看到帧下降和滚动动画(使用 fullPage.js)在整个屏幕上滞后。

为了优化动画，我尝试了以下方法:

• 当它到达动画结束时从页面中删除圆 div - 这似乎没有太大帮助，因为在滚动到下一页时我仍然可以看到初始圆圈在扩大像素化。

• 限制 divs 的大小 - 我试过更改动画从 scale(100.0,100.0) 到 scale(50.0,50.0) 100%，这会减慢圈子的扩大。我试过改变初始大小1000px 到500px，这也减慢了圆圈的扩大。这两种解决方案都对优化没有影响，动画仍然会降低网站速度。

• 滚动到每个部分时开始和停止动画 - 因为我我正在使用 fullPage.js 这可以使用 afterLoad 和onLeave 回调。唯一的问题是我不知道如何停止动画。

这是我的代码:

CSS:

html,body{
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
    background-color: #24ccdf;
}

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

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

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

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

    100%{
        -webkit-transform: scale(100.0,100.0);
        display: none;
    }
}

jQuery:

var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

        function makeDiv(color){
            var divsize = 1000;
            //$('body').css({'background-color':bgColor});
            $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();

            $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(){
            $('#fullpage').fullpage({
                anchors: ['home','about','projects','blog','contact'],
                fixedElements: '#toggle,#overlay',
                afterLoad : function(anchorLink,index) {
                    if(index == 1 || anchorLink == 'home'){
                        circleAnimation();
                    }
                     else if(index == 2 || anchorLink == 'about'){
                        $('#section2 h1').addClass('come-in').one(animationEnd,function(){
                            $('#section2 h3').addClass('come-in').one(animationEnd,function(){
                                $('#section2 p').addClass('come-in');
                            });
                        });
                    }
                }
            });

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

        });

真诚地感谢任何帮助、提示或指点。提前致谢!

Answer 1

在提出解决方案之前，我需要知道您的期望是什么:

• 现在每个动画持续 2500 秒，即 40 多分钟。这是您的意图还是应该持续 2500 毫秒？
• 每个动画都从页面顶部开始，使页面底部的边缘非常难看。这是故意的还是圆圈应该从页面的随机位置开始？

此外，display:none 不能动画。

我做了一个FIDDLE供您检查。所做的更改:

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

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

如果有帮助，请告诉我。