かすかなキャンバスアニメーション - EaselJS

私は、EaselJSを使用してspire'sバナーに見られるキャンバス要素をエミュレートしようとしています。しかし、私のアニメーションはクロムとファイアフォックスの両方で不安定です。どんな助けもありがとうございます。（初めてEaselJSを使用）かすかなキャンバスアニメーション - EaselJS

マイコード：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>EaselJS</title> 
    <style> 
     body{ 
      margin: 0; 
      padding: 0; 
      overflow: hidden; 
     } 
     #spire-canvas{ 
      background: #333; 
     } 
    </style> 
</head> 
<body> 

    <canvas id="spire-canvas" width="1366" height="768"></canvas> 

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/EaselJS/0.8.0/easeljs.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> 
    <script> 
     $(document).ready(function(){ 


      //INITIALIZATIONS 
      var stage, 
      particles = 10, 
      fps = 30, 
      viewportWidth = window.innerWidth, 
      viewportHeight = window.innerHeight, 
      circles = []; 

      function init(){ 
       stage = new createjs.Stage("spire-canvas"); 
       createjs.Ticker.addEventListener("tick", refresh); 
       createjs.Ticker.setFPS(fps); 
       console.log("init fired"); 
      } 

      function refresh(){ 
       for(var i = 0; i < particles; i++){ 
        var circle = new createjs.Shape(); 
        circle.graphics.beginFill('#' + Math.floor(Math.random() * 16777215).toString(16)) 
        .drawCircle(0, 0, (Math.random() * 10)); 
        circle.x = circle.x + Math.random() * viewportWidth; 
        circle.y = (Math.random() * viewportHeight) + viewportHeight; 
        circle.alpha = 0.1 + Math.random() * 0.2; 
        stage.addChild(circle); 
        circles.push(circle); 
       }; 
       for(var i = 0; i < circles.length; i++){ 
        var item = circles[i]; 
        var yy = item.y + Math.floor(Math.random() * (viewportHeight - 300)) * -1; 

        if(item.y < 300){ 
         TweenLite.to(item, 1, {alpha: '0', ease: Power4.easeOut, onComplete: function(){ 
          stage.removeChild(item); 
         }}); 
        } 

        TweenLite.to(item, 10, {y: yy}); 
       }; 
       stage.update(); 
      } 

      init(); 
     }); 
    </script> 
</body> 
</html>

出典

2016-08-17 Safal Pillai

すべてがパフォーマンスの問題が発生します、あなたのデモで多くの問題があります。それはあなたが正しくトゥイーンを使用していないこと、そしてアイテムをクリーンアップしていないことです。

主な性能上の問題
は、各サークルティックごとのための新しいトゥイーンを作成しているということです。 2番目のループでは、各サークルに対してTweenLite.to(item, 10, {y: yy});と呼び出しています。これにより、各サークルごとに、そのオブジェクトのトゥイーンが1回ずつ作成されます（そして最適な場合は上書きされます）。あなたがサークルを作っている大まかなレートでは、任意の時点で> 1000サークルが存在します。ここでの最善のアプローチは、各円を作成するループ内の全体的な移動トゥイーンを移動することです。したがって、円ごとに1回発生します。
トゥイーンの2番目の問題は、サークルが300px未満かどうかをチェックし、サークルがあればそれをトゥイーン（アルファ）することです。しかし、サークルはフェード中に動いているので、各サークルごとに新しいアルファトゥイーンを作成しています。各サークルにを一度にする必要があります。これを行うには、要素にフェードアウトしているフラグを設定します。これにより、何度も発生することはありません。

circlesアレイからサークルを削除することはありません。これは、あなたの配列が1ダックあたり〜10サークルで成長していることを意味し、毎秒約300サークルです。 10秒後に3000個のサークルなどがあります。シェイプでは、上で概説したトゥイーンの問題を解決した後でさえ、パフォーマンスをかなり早く打ちます。ステージから取り外したときにも、アレイから取り外します。

グラフィックが遅いです。もしあなたが何かスーパーパフォーマンスを求めているなら、画像やキャッシュされた形を使ってください。あなたのデモには、各スプライトにランダムな色がありますが、Spireのデモはありません。色々な色をあらかじめキャッシュすることができ、理想的にはSpriteSheetのオブジェクトプールから描画することができます。

全体として、Tweensのオーバーヘッドが最大の問題です。アニメーションはかなり予測可能なので、これをリファクタリングして、トゥイーンを使用せずにより良いパフォーマンスを得ることができます。

乾杯、ここで

出典

2016-08-17 17:15:07 Lanny

があなたのコードで迅速なサンプルで、トゥイーンは、適切な場所に移動：http://jsfiddle.net/lannymcnie/abLhozah/ - のいくつかのように、私は、しきい値を変更アイテムはフェードアウトしますが、トゥイーンアウトされる初期値に基づいてどれも高くなっていません（停止するだけです）。あなたはそのサンプルから必要なものを得ることができるはずです。 – Lanny

問題はティックの内側にあるforループであることがわかっていました。文書を完全に参照する必要があります。とにかくおかげでラニー。大きな助け。それを答えにしました。 –

かすかなキャンバスアニメーション - EaselJS

答えて

関連する問題