サークルアニメーションを最適化する

Question

サークルがしばらくの間拡大しているサークルアニメーションがあります。 https://rimildeyjsr.github.io/spotify-circle-animation/

アニメーションが長時間実行されると、文字通りフレームのドロップが表示され、スクロールするアニメーション（fullPage.jsを使用）が画面全体で遅れることがあります。アニメーションを最適化するために

、私は次のことを試してみています

• それはそのアニメーションの終わりに到達したときのページから、円のdivを削除する - これはあまりにも多くを助けていないようですので、次のページにスクロールすると、ピクセル化で拡大している最初の円がまだ見えます。

• 制限divsのサイズ - Iは、円の 膨張を遅らせる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/