javascript: Рафаэль перестает работать нормально, если анимируется jQuery или CSS? - PullRequest
Новая
       15

javascript: Рафаэль перестает работать нормально, если анимируется jQuery или CSS?

1 голос
/ 17 августа 2011

Мой сайт : 

jQuery Animation (`comsat.js`: `showPlayerActionView()`):   

if (container == cs_characterSliderPlayerOne){
    container.show("slide", {direction: "left"}, 500);
} else if (container == cs_characterSliderPlayerTwo){
    container.show("slide", {direction: "right"}, 500);
}

Рафаэль Анимация: 

this.hover(function(event) {
                    cs_playerList[i].animate({
                        fill: HEX_HOVER_COLOR
                    }, 500);
                }, function(event) {
                    cs_playerList[i].animate({
                        fill: DEFAULT_HEX_COLOR
                    }, 500)
                });

Таким образом, каждая анимация, кажется, работает идеально плавно, когда другая отключена, но когда обе включены, они, кажется, борются друг с другом за рендеринг большую часть времени, что приводит к замедлению. Есть ли способ решить это? Или, говоря анимации, им не нужно рендерить со скоростью 200 кадров в секунду (угадайте) и делиться ресурсами, чтобы другие вещи выглядели гладкими?

Такое же замедление происходит, когда я использую любую анимацию перехода CSS3 (не показана на сайте). Может многопоточность поможет? Как можно это сделать в JavaScript?

1 Ответ

1 голос
/ 08 февраля 2012

Raphael 2 был выпущен в октябре 2011 года с некоторыми изменениями в коде анимации: анимации теперь запускаются с использованием нового браузера API «requestAnimationFrame», с более ранней версией для старых браузеров, работающих со скоростью около 60FPS.

jQuery принял requestAnimationFrame в начале серии 1.6, но снова удалил его, когда различные пользователи jQuery сообщили, что их анимационные очереди резервируются и приводят к ужасным задержкам анимации, поскольку окно теряется и восстанавливает фокус.

Анимации должны работать более гладко с Raphael 2, но, возможно, не так гладко, как если бы jQuery также использовал requestAnimationFrame

...