SVG.js动画系列3-沿路径动画

本文转载https://blog.csdn.net/wangchangjiang1984/article/details/109518151
一个小圆球沿路径动画的例子。效果图：

第一步创建一个path和circle

	path = draw.path("M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z").attr({fill:'none', stroke:"lightgrey"}).move(200, 200);
    circle = draw.circle(18, 18).attr({fill:SVG.Color.random()}).center(220, 250);

第二步取path路径上的所有点，让circle沿这些点移动

    const len = path.length();
    for (let i=0; i < len; i++) {
        const point = path.pointAt(i);
        const {x, y} = point;
        circle.animate({
            duration: duration,
            delay: i*duration,
            when: 'now',
            swing: false,
            times: true,
            wait: len*duration
        }).center(x, y);
    }

这就完成了，SVG.js对path的获取位置，还是很方便的。

源码地址：https://gitee.com/ionep/svg.js-example
如果大家对SVG.js感兴趣请移驾(SVG.js)