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多个场景。

虽然我很欣赏它会占用大量处理器，但似乎使用的方式比预期的要多，并且会减慢我的机器速度。

这里有什么明显会影响性能吗？

导致高cpu使用率的Javascript动画

0 个答案: