1. 程式人生 > 實用技巧 >SVG.js動畫系列3-沿路徑動畫

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)