javascript - gsap tweenlite/tweenmax 垃圾收集、引用和性能

Question

我试图了解使用 TweenLite/TweenMax 的最佳方式是什么。

用相同的变量引用我所有的补间是否有用？

使用相对公共(public)方法杀死补间后，我是否必须将引用设置为 null 以改善垃圾收集处理？

下面有一个评论很好的例子:

$(document).ready(function () {
    var elementOne = $('#elementOne');
    var elementTwo = $('#elementTwo');
    var myTween;

    // is it useful to overwrite the variable?
    myTween = TweenMax.to(elementOne, 1, {
        opacity: 0
    });
    myTween = TweenMax.to(elementTwo, 1, {
        left: 0,
        onComplete: destroy
    });

    function destroy () {
        // suggested on tweenmax docs
        // the console.log still returns me the object
        myTween.kill();
        console.log(myTween);

        // is it required for garbage collecting?
        // now the console.log returns me null
        myTween = null;
        console.log(myTween);

        // and then...jQuery GC friendly remove
        elementOne.remove();
        elementTwo.remove();
    }
});

Answer 1

除了您通常对任何 JS 对象执行的操作之外，您无需执行任何特殊操作即可为 gc 提供补间(或时间线)。换句话说，如果您在自己的代码中维护对实例的引用，它会一直存在(否则您的代码可能会中断)。但是你做不是 需要专门 kill() 一个补间。 GSAP 已经付出了很多努力，以确保事情得到优化并且不会让人头疼。引擎将在必要时自动释放已完成的补间以进行垃圾收集。但是，例如，如果您维护一个引用并重新启动它，补间仍然可以工作。

仅仅因为您在补间实例上调用 kill()，这不会强制浏览器运行其垃圾收集例程。它也不会使您的变量为空。这就是 JavaScript 的工作原理(这是一件好事)。它与 TweenLite/Max 无关。

另请记住，您不需要将任何补间实例存储在变量中。唯一有用的是您以后需要控制补间(或将其插入时间轴或类似的东西)。通常只调用 TweenMax.to(...) 而不将结果存储在变量中就可以了。

这能把事情弄清楚吗？