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とを使用すると常にパフォーマンスが向上します。この方法では、CPU ではなく GPU を使用してアニメーション化します。xleft

最後の 2 つのアニメーションを両方とも から に変更し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 アニメーションと Javascript の神話を打ち破る

translate による要素の移動が posabs topleft より優れている理由

ジャンクフリー

アニメーション化するときは常に、アニメーション化されたプロパティを変換と不透明度に保つことをお勧めします。これにより、アニメーション化されたプロパティが独自のレイヤーでレンダリングされ、パフォーマンスが大幅に向上し、ジャンクが少なくなります。

于 2015-10-09T14:49:42.573 に答える