konva.js：是否可以为路径/形状进行动画？

Question

看我的例子：https://jsfiddle.net/ksumarine/x7f9yLb7/4/

我有一个 .Stage，它有一个偏移量，将 0, 0 放在画布的底部中心。这有一个 .Layer，它从 x,y 坐标数组中绘制对象路径的 .Shape。

let routes = [{x: #, y: #}, {x: #, y: #}, ......] // example routes

let testStage = new Konva.Stage({
    container: con,
    x: 0,
    y: 0,
    width: 300,
    height: 300,
    offsetX: ((300 / 2) * -1),
    offsetY: (300 * -1)
});

let testLayer = new Konva.Layer();

let testShape = new Konva.Shape({
    sceneFunc: function(context) {
        context.beginPath();
        for (var i = 0; i < routes.length - 1; i++) {
            context.moveTo(routes[i].x, routes[i].y);
            context.lineTo(routes[i + 1].x, routes[i + 1].y);
        }
        context.strokeStyle = '#000';
        context.lineWidth = 1.5;
        context.stroke();
   }
});

testLayer.add(testShape);
testStage.add(testLayer);

///////////这里是按钮点击事件

animateButton.addEventListener('click', e => {
    let i = 0;
    let _ctx = testLayer.getContext()._context;
    let draw = () => {
        setTimeout(() => {
            if (routes.length) {
              _ctx.clearRect(0, 0, 300, 300);
              _ctx.beginPath();

              _ctx.moveTo(routes[0].x, (routes[0].y * -1));
              for (let p = 1, plen = i; p < plen; p++) {
                  _ctx.lineTo(routes[p].x, (routes[p].y * -1));
              }
             _ctx.strokeStyle = '#000';
             _ctx.lineWidth = 1.5;
             _ctx.stroke();
             (i === routes.length - 1) ? i = 0: i++;
           }
           requestAnimationFrame(draw);
         }, 1000 / 59.940);
    }
    draw();
 });

此时一切正常，路径按预期绘制。我想使用 Konva.Animation 来展示对象是如何移动的，但我无法弄清楚或找到任何帮助的示例。

我在按钮 eventListener 中添加了普通的 Canvas JS 作为所需效果的示例，但使用 testLayer 上下文进行绘制，将 0,0 放回左上角...不是我想要的。

有人能指出我使用 Konva.Animation 完成此任务的正确方向吗？

Answer 1

对于遇到这个问题的人，11 月 18 日再次提出这个问题，这次有两个答案。见他们here