javascript - 如何在Popmotion中正确销毁styler（）实例(How to properly destroy an instance of styler() in Popmotion)

Question

I am using Popmotion's pure javascript animation library to animate elements in my web application which works flawlessly, however, i am left wondering how to properly destroy instances of styler() that reference elements i am animating once i am finished with them.

(我正在使用Popmotion的纯javascript动画库为Web应用程序中的元素设置动画，该程序可以完美地工作，但是，我想知道如何正确销毁引用了动画元素的styler()实例。)

I am new to this library and unfortunately i am finding the documentation hard to discern.

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

Take the following sample animation provided by Popmotion which moves the element #b .ball along it's x axis from 0 to 300:

(采取以下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));

Works great, but what would be the proper way to destroy the ball once the animation has completed?

(效果很好，但是一旦动画完成，销毁ball的正确方法是什么？)

Is it even necessary to do so?

(甚至有必要这样做吗？)

In my case, i am pushing roughly 100 instances dynamically onto an array using the function below titled addAnimationTargetToArray() so that i can animate any one of the elements referenced at any given time without latency throughout the runtime of my application:

(就我而言，我正在使用标题为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));
}

This is working without issue, however, id like to know how to properly destroy these instances which are stored in the animationTargets[] array once i am finished animating to avoid memory leaks.

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

Do i even need to be concerned about memory leaks?

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

My array could contain references to upwards of up to roughly 100 elements in the DOM depending on certain use cases within my application.

(我的数组可能包含对DOM中最多约100个元素的引用，具体取决于应用程序中的某些用例。)

Is it enough to set animationTargets.length = 0 once i know that all of the animations for each of those elements have completed?

(一旦我知道每个元素的所有动画均已完成，将animationTargets.length = 0设置就足够了吗？)

Any help greatly appreciated.

(任何帮助，不胜感激。)

  ask by DevMike translate from so

Answer 1

等待大神答复