svg.js中动画loop未重复完整序列：为何跳过第2、3步？

我在svg.js中编写了上述链式动画并调用loop(true, true)方法，但循环未重复完整的动画序列，跳过了第2步和第3步。请问这是什么原因？该动画是否本应重复完整序列？

代码示例：

rect .animate(1000,"<>",0).dmove(50,0) 
     .animate(1000,"<>",0).dmove(-10,0) 
     .animate(1000,"<>",0).dmove(20,0) 
     .animate(1000,"<>",0).dmove(-60,0).loop(true, true); 

为什么会跳过中间步骤？ #

你遇到的这个问题，核心是SVG.js里loop()方法的默认绑定逻辑：它只会作用在最后一个独立的动画实例上，而非你链式调用的整个动画序列。

当你链式写.animate().dmove().animate().dmove()时，每一个.animate()都会生成一个单独的动画对象，这些动画是按顺序触发的（前一个跑完才会启动下一个）。但你在最后一个.animate()后面加.loop(true, true)，相当于只给最后那步“移动-60px”的动画开了循环，前面三步只会在第一次执行时跑一遍，之后就一直重复最后一步，自然看起来像是跳过了第2、3步。

而你期望“完整重复整个序列”的需求是完全合理的，只是默认的写法没法实现，得调整动画的组织方式。

怎么让整个序列循环？ #

最靠谱的方式是用**时间线（Timeline）**把所有动画步骤打包成一个整体，再给时间线加循环：

// 先创建一个时间线实例
const timeline = SVG.Timeline()

// 把每一步动画都绑定到这个时间线上
rect.animate(1000,"<>",0, timeline).dmove(50,0)
     .animate(1000,"<>",0, timeline).dmove(-10,0)
     .animate(1000,"<>",0, timeline).dmove(20,0)
     .animate(1000,"<>",0, timeline).dmove(-60,0)

// 给整个时间线开启循环，这样所有步骤就会完整重复了
timeline.loop(true, true)

如果你的SVG.js版本支持.sequence()方法，还可以用更简洁的写法，它会自动把多个动画组合成序列：

rect.sequence([
  { duration: 1000, ease: "<>", delay: 0, move: [50, 0] },
  { duration: 1000, ease: "<>", delay: 0, move: [-10, 0] },
  { duration: 1000, ease: "<>", delay: 0, move: [20, 0] },
  { duration: 1000, ease: "<>", delay: 0, move: [-60, 0] }
]).loop(true, true)

这样调整后，整个动画序列就会从头到尾完整循环，不会再跳过中间的步骤啦。

内容的提问来源于stack exchange，提问作者Андреслав Козлов