Question

我正在使用Popmotion的pure JavaScript animation library为我的Web应用程序中的元素制作动画，该元素可以完美地工作，但是，我想知道如何在完成后立即销毁我正在动画的参考元素styler()的实例。和他们在一起。

我是这个图书馆的新手，很不幸，我发现文档难以辨认。

获取以下示例动画provided by Popmotion，它将元素#b .ball沿其x轴从0移动到300：

const element = document.querySelector('#b .ball');
const ball = styler(element); 

tween({ to: 300, duration: 500 })
  .start(v => ball.set('x', v));

效果很好，但是动画完成后销毁ball的正确方法是什么？甚至有必要这样做吗？

对于我来说，我正在使用下面标题为addAnimationTargetToArray()的函数将大约100个实例动态地推入数组，以便可以在任何给定时间对所引用的任何元素进行动画处理，而在整个应用程序运行期间都不会出现延迟：

const animationTargets = [];
// I instantiate each instance using the styler() method and store them into an array for later use. This avoids latency that would otherwise occur if I were to do this just prior to animating instead.
addAnimationTargetToArray(id, class) {
  const element = document.querySelector(class);
  const object = styler(element); 
  animationTargets.push({
    id: id,
    target: object
  })
}

// this function below will animate an element. It first retrieves the targeted instance from the array by its id and then animates the element.
animateObject(id) {
  let animeObject = animationTargets.filter(obj => {
   return obj.id === id
  });
  tween({ to: 300, duration: 500 })
  .start(v => animeObject[0].target.set('x', v));
}

这是没有问题的，但是，我想知道如何在完成动画制作以避免内存泄漏后正确销毁存储在animationTargets[]数组中的这些实例。

我什至需要担心内存泄漏吗？

我的数组可能包含对DOM中最多约100个元素的引用，具体取决于我应用程序中的某些用例。一旦我知道每个元素的所有动画均已完成，就设置animationTargets.length = 0就足够了吗？

如何在Popmotion中正确销毁styler（）实例

0 个答案: