SVG.js動畫系列3-沿路徑動畫
阿新 • • 發佈:2020-11-05
本文轉載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)