SVG.JS使用animate循环动画设置

最近有需要进行svg的绘制，接触到了这个svg绘制插件svg.js
基础绘制参考官网说明：https://svgjs.com/docs/3.0/shape-elements/#svg-rect
以及svg基础绘制说明：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Basic_Shapes

当然官网也有很多功能说的不太详细，比如：
看到一个动画示例，很是感兴趣，但没找到更多信息了

查了些资料：
这里其实是根据我们所绘制的path路径，自动形成过渡动画，
duration()方法内可执行回调，沿路径插点动画，

// use path to replicate movement
const path = draw.path("M200 100 H 250 H 100 L120 0 H 80");
const length = path.length();

rect.animate(5000, '<>').during(function(pos, morph, eased){
    var p = path.pointAt(eased * length)
    rect.center(p.x, p.y)
})
.loop(true, true)  //第一个参数是否循环播放，第二个参数是接上反序播放