问题描述
我正在尝试使用animejs创建一个时间轴UI,创建一个fragment FloatNumber
: ( Digit+ ('.' Digit*)? ([eE] [+-]? Digit+)?
| Digit* '.' Digit+ ([eE] [+-]? Digit+)?
)
;
fragment Digit
: [0-9]
;
是非常容易和直接的,问题是如何:
- 更新时间轴参数。
- 更新,替换或移除锚点。
- 如果我听不懂以上内容,如何彻底处理旧的时间表以将其替换为新的时间表。
动画时间轴示例:
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>
,seek
,reverse
和pause
是我在时间轴上拥有的唯一控件,我可以使用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)
我正在寻找同样的东西,处理创建的动漫对象