优化圆形动画

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

如果有帮助，请告诉我。

Answer 2

尝试使用Velocity.js，它旨在优化动画并减少负载。

选中网站顶部的“性能”以查看示例

http://velocityjs.org/