Choppy canvas animation - EaselJS - Отличная библиотека

Я пытаюсь подражать элементу холста, показанному в баннере spire's с использованием EaselJS. Но мои анимации нестабильны как на хроме, так и на firefox. Любая помощь приветствуется. (Использование EaselJS в первый раз)Choppy canvas animation - 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

Есть целый ряд вопросов, с вашим демо, которые все будут вызывать проблемы с производительностью. Главное, что вы делаете, это то, что вы неправильно используете подростки и не чистите предметы.

Основной проблемой производительности является то, что вы создаете новую анимацию для каждого круга каждый тик. Во втором цикле для каждого круга вы вызываете TweenLite.to(item, 10, {y: yy});. Это создаст (и лучше всего отменяет) анимацию для этого объекта каждый раз для каждого круга. По грубой ставке вы создаете круги, в любое время будет> 1000 кругов. Наилучший подход здесь состоит в том, чтобы переместить общую анимацию движения внутри цикла, где вы делаете каждый круг, так что это происходит один раз за круг.
Вторая проблема с tweens заключается в том, что вы проверяете, меньше ли кружка, чем 300 пикселей, и tween out (альфа), если она есть. Однако, поскольку круг все еще движется, когда он исчезает, это означает, что каждый тик вы создаете NEW альфа-анимацию для каждого круга. Вы должны сделать это один раз для каждого круга. Вы можете сделать это, установив флаг элемента, который он затухает, поэтому это происходит не один раз.
Вы никогда не удаляете круги из своего массива circles. Это означает, что ваш массив растет на 10 кругов за такт ~ примерно 300 кругов в секунду. Через 10 секунд у вас есть 3000 кругов и т. Д. С фигурами вы достигнете максимума производительности довольно быстро, даже после решения проблем с tweens, которые я изложил выше. Когда вы удаляете со сцены, также удаляйте из массива.
Графика медленная. Если вы хотите что-то сверхэффективное, используйте изображения или кешированные фигуры. В вашем демо есть случайные цвета для каждого спрайта, но демо Spire этого не делает. Если вы хотите какой-то сорт, вы можете предварительно кэшировать кучу цветов и рисовать из пула объектов изображений, в идеале в SpriteSheet.

В целом, накладные расходы Tweens - самая большая проблема. Вероятно, вы могли бы реорганизовать это, чтобы получить лучшую производительность без использования твинов, поскольку анимации довольно предсказуемы.

Приветствие,

источник

2016-08-17 17:15:07 Lanny

Вот краткий пример с вашим кодом, и подростки перемещаются в нужном месте: http://jsfiddle.net/lannymcnie/abLhozah/ - я изменил порог, так что некоторые из элементы исчезают, но ни один из них не делает его достаточно высоким, исходя из того, что их начальное значение должно быть изменено (они просто останавливаются). Вы должны быть в состоянии получить то, что вам нужно от этого образца. – Lanny

Я знал, что проблема заключалась в том, что для циклов внутри тиков. Необходимо тщательно отнестись к документам. Во всяком случае, благодаря группе Lanny. Большая помощь. Отмечено это как ответ. –

Choppy canvas animation - EaselJS

ответ

Смежные вопросы