微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决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)

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。