Kinetic.js работает медленно в Firefox

У меня большие проблемы с получением плавной анимации с помощью Kinetic.js в Firefox. Он отлично выглядит в Chrome и Safari и даже выглядит более-менее нормально в IE9, но Firefox тормозит. Я попытался использовать как встроенный Kinetic.Animate, так и requestAnimationFrame, и оба они выглядели одинаково. Любые идеи?

<div id="container"></div>

<script>
$(function() {
    var stage = new Kinetic.Stage({
      container: 'container',
      width: 1000,
      height: 1000
    });

    var layer = new Kinetic.Layer();

    var blackRect = new Kinetic.Rect({
      x: 700,
      y: 650,
      width: 300,
      height: 620,
      fill: "black",
      offset: [150, 620]
    });

    var colorRect = new Kinetic.Rect({
      x: 300,
      y: 650,
      width: 300,
      height: 620,
      fill: "blue",
      offset: [150, 620]
    });

    layer.add(blackRect);
    layer.add(colorRect);
    stage.add(layer);

    function oscillate(node, time) {
      var period = 5400;
      var phase = 1200;
      var amplitude = 1.2;
      var shift = amplitude * Math.cos(phase + time * 2 * Math.PI / period);
      node.setPosition(node.getX() + shift, node.getY());
    }

    function rotate(node, time) {
      var period = 5400;
      var amplitude = 0.08;
      node.setRotation((amplitude * Math.sin(time * 2 * Math.PI / period) ));
    }

    function render(time) {

      layer.draw();
    }


    var anim = new Kinetic.Animation(function (frame) {
      oscillate(blackRect, frame.time);
      oscillate(colorRect, frame.time);

      rotate(blackRect, frame.time);
      rotate(colorRect, frame.time);
    }, layer);

    anim.start();
});
</script>

Изменить: вот приведенный выше пример: http://jsfiddle.net/cantino/yr8Zr/


javascript animation kineticjs
person Andrew    schedule 30.10.2013    source источник
comment
не могли бы вы предоставить ссылку на живую реализацию, чтобы понять, что вы имеете в виду, или, что еще лучше, скрипт, где мы также можем редактировать и тестировать   -  person Ani    schedule 30.10.2013
comment
Конечно, Ани, вот ссылка на приведенный выше код на jsfiddle. Вы должны попробовать это в Chrome и FF. jsfiddle.net/cantino/yr8Zr   -  person Andrew    schedule 31.10.2013

Ответы (2)


arrow_upward
1
arrow_downward

Да, FF в настоящее время производит менее плавную анимацию.

Вы можете получить более плавную, но медленную анимацию:

  • Использование frame.timeDiff для регулирования количества кадров в секунду,
  • И уменьшить амплитуду.

Если более плавный, но медленный способ ломает ваш дизайн, вы можете использовать пользовательский Kinetic.Shape, чтобы стать «ближе к металлу».

С Kinetic.Shape вы получаете контекст холста для рисования вместо того, чтобы полагаться на более простой (но менее производительный) Kinetic.Rect.

person markE    schedule 30.10.2013
comment
Спасибо маркЭ! Насколько существенна разница в производительности между Kinetic.Shape и Kinetic.Rect? - person Andrew; 31.10.2013
comment
Это быстрее (потому что меньше накладных расходов, чем полностью управляемые объекты, такие как rect). - person markE; 31.10.2013
comment
Я должен был упомянуть об этом раньше, но если вам не нужны события в ваших прямоугольниках, вы можете перестать прослушивать события в них. Это также имеет большое значение в производительности. (В прямом определении добавьте listen:false). - person markE; 31.10.2013

arrow_upward
1
arrow_downward

Я знаю, что на этот вопрос уже давно был дан ответ, но недавно я столкнулся с этой проблемой, и приведенные здесь ответы дали лишь незначительный прирост производительности. Итак, я изучил ядро ​​KineticJS и нашел исправление, которое подняло мой FPS с 10 до почти 60. Иногда FPS падал до 2.

Исправление предназначено для тех, кто может столкнуться с этой проблемой в будущем и искать ответ.

stage._mousemove = Kinetic.Util._throttle( stage._mousemove, 60);
someKineticLayer._getIntersection = function() {return {};};

//keep in mind that tampering with _getIntersection will disable mouse interaction for that layer and may have other effects.
person Rainer Plumer    schedule 07.02.2015