1

我正在使用 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 多个场景。

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

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

4

1 回答 1

2

您看到高 CPU 使用率的原因是动画topCSS 属性。y在制作动画时，使用代替top和x代替总是更好的性能left。这样您就可以使用 GPU 而不是 CPU 来制作动画。

将最后两个动画都从更改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

神话破坏 CSS 动画 vs Javascript

为什么用 translate 移动元素比 posabs topleft 更好

免费

在制作动画时，最好的做法是让您的动画属性保持为变换和不透明度，以便它们在自己的图层上渲染并提供更好的性能，并减少卡顿。

于 2015-10-09T14:49:42.573 回答