Анимация Javascript, вызывающая высокий уровень использования cpu

Question

Я использую библиотеку ScrollMagic и платформу анимации GreenSock для создания анимации прокрутки одной страницы.

Ниже приведен пример кода для анимации:

// Initiate Scroll Magic 
var controller = new ScrollMagic.Controller(); 

// This pins the main container for the duration of the animation 
new ScrollMagic.Scene({ 
     triggerElement: "#main", triggerHook: 'onLeave', duration: 59000 
    }) 
    .setPin("#main", {pushFollowers: true}) 
    .addTo(controller); 

//Create scenes at specific points using the offset of the pinned conainter... 
new ScrollMagic.Scene({triggerElement: "#main", duration: 500, offset:1000}) 
    .setTween("#diseaseInitiation", 0.5, { opacity: 1}) 
    .addTo(controller); 

new ScrollMagic.Scene({triggerElement: "#main", duration: 500, offset:1000}) 
    .setTween("#initialKeratinocytes", 0.5, { opacity: 1}) 
    .addTo(controller); 

new ScrollMagic.Scene({triggerElement: "#main", duration: 500, offset:2000}) 
    .setTween("#initialKeratinocytes", 0.5, { top:100}) 
    .addTo(controller); 

new ScrollMagic.Scene({triggerElement: "#main", duration: 500, offset:2000}) 
    .setTween("#diseaseInitiation", 0.5, {top: -100}) 
    .addTo(controller); 

Реальная анимация намного сложнее и около 100+ сцен.

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

Есть ли что-то очевидное здесь, что повлияет на производительность?

Answer 1

Причина, по которой вы наблюдаете высокую загрузку процессора, связана с анимацией свойства CSS top. При анимации всегда лучше использовать y вместо top и x вместо left. Таким образом, вы используете анимацию с использованием графического процессора, а не процессора.

Изменить оба ваших последних двух анимаций из top в y

new ScrollMagic.Scene({triggerElement: "#main", duration: 500, offset:2000}) 
.setTween("#initialKeratinocytes", 0.5, { y:100 }) 
.addTo(controller); 

new ScrollMagic.Scene({triggerElement: "#main", duration: 500, offset:2000}) 
.setTween("#diseaseInitiation", 0.5, { y: -100 }) 
.addTo(controller); 

Вот некоторые статьи, объясняющие, почему его лучше анимировать с помощью преобразования в сравнении положения с top, right, bottom или left

Myth busting CSS animations vs Javascript

Why moving elements with translate is better than posabs topleft

Jank Free

Это всегда лучшая практика при анимации, чтобы сохранить ваши анимированные свойства трансформируют и непрозрачность таким образом они оказывают на их собственном слое и обеспечивают гораздо более высокую производительность, и меньше Jank.