Animejs-更新或处置现有时间表

问题描述

我正在尝试使用animejs创建一个时间轴UI,创建一个fragment FloatNumber : ( Digit+ ('.' Digit*)? ([eE] [+-]? Digit+)? | Digit* '.' Digit+ ([eE] [+-]? Digit+)? ) ; fragment Digit : [0-9] ; 是非常容易和直接的,问题是如何:

  1. 更新时间轴参数。
  2. 更新,替换或移除锚点。
  3. 如果我听不懂以上内容,如何彻底处理旧的时间表以将其替换为新的时间表。

动画时间轴示例:

timeline
const timeline = anime.timeline({
    targets: 'div',loop: true,delay: 500,})
  //anchor 1
  .add({
    translateY: 50,translateX : 250,scale: 1.5,background: '#00ffff',duration: 1000
  })
  //anchor 2
  .add({
    translateY: 100,translateX : 0,scale: 1,background: '#800080',duration: 1000
  })
  //anchor 3
  .add({
    translateY: 0,background: '#ed143d',duration: 1000
  })

<script src="https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js"></script> <div style="width:100px;height:100px;border-radius:100%;background: #ed143d"></div>seekreversepause是我在时间轴上拥有的唯一控件,我可以使用play访问锚点,但是我不知道如何正确地更新或删除它们,甚至可能。

我尝试过的事情:

  • timeline.children一些奇怪的行为。
  • timeline.children.splice(0,1)删除不是功能
  • timeline.remove(timeline.children[0])处理时间轴会引发脚本错误

目前,我每次更新后都会创建一个新的时间轴,但是即使使用timeline.pause();Object.keys(timeline).forEach(key => delete timeline[key])也无法完全处理掉旧的时间轴,我只能做的是暂停它们,这对于内存管理和垃圾处理来说并不理想。集合,以及在后台运行的所有delete timeline旁边。

解决方法

只是一个疯狂的猜测但是:timeline.children.remove(0) ?或时间线.children.splice(1,0)

我正在寻找同样的东西,处理创建的动漫对象