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毫秒？
每个动画都从页面顶部开始，使页面底部的边缘非常难看。这是故意还是圈子应该从页面的随机位置开始？

此外，显示：无法动画。

我已经为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，它旨在优化动画并减少负载。

检查＆＃34;表现＆＃34;在网站顶部查看示例

http://velocityjs.org/

优化圆圈动画

2 个答案: