원 애니메이션 최적화

Question

원이 일정 시간 이상 확장되는 원 애니메이션이 있습니다. 여기에서 애니메이션을 볼 수 있습니다 : https://rimildeyjsr.github.io/spotify-circle-animation/

애니메이션이 오래 동안 실행되면 웹 사이트의 속도가 상당히 느려지는 것입니다. 말 그대로 프레임이 떨어지는 것을 볼 수 있으며 스크롤하는 애니메이션 (fullPage.js 사용)은 화면에서 뒤떨어져 있습니다. 이 때문에 너무 많은 도움하지 않는 것 -

• 그것의 애니메이션의 끝에 도달 할 때 페이지에서 원 div의 제거 :

  애니메이션을 최적화하기 위해, 나는 다음을 밖으로 시도 다음 페이지로 스크롤 할 때 픽셀 화로 확대되는 초기 원을 볼 수 있습니다.

• 제한하는 divs의 크기는 - 나는 원의 확장 속도가 느려 100 %에 scale(50.0,50.0)에 scale(100.0,100.0)에서 애니메이션 을 변경 시도했다. 1000px에서 500px으로 초기 크기를 변경하려고 시도했는데 이로 인해 서클 확장 속도가 느려집니다. 이 두 가지 솔루션은 최적화에 아무런 영향을 미치지 않지만 애니메이션은 여전히 ​​웹 사이트 속도를 저하시킵니다.

• 시작 모든 부분 스크롤에 애니메이션을 중지 - 나는 이이 afterLoad 및 onLeave 콜백을 사용하는 것이 가능하다 fullPage.js을 사용하고 있기 때문에. 문제는 애니메이션을 중단하는 방법을 모른다는 것입니다.

여기 내 코드입니다 :

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

해결책을 제안하기 전에 예를 볼 수, 당신의 기대가 무엇인지 알아야합니다

• 각 애니메이션 지금 40 분 이상인 2500 초 동안 지속됩니다. 이것이 당신의 의도입니까, 아니면 2500ms 지속되어야합니까?
• 각 애니메이션은 페이지 맨 위에서 시작하여 페이지 맨 아래의 가장자리가 매우 추악합니다. 이것은 의도적입니까, 아니면 서클이 페이지의 임의 위치에서 시작해야합니까?

또한 디스플레이 : 아무 것도 애니메이션으로 만들 수 없습니다.

귀하가 확인할 수 있도록 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/