Joint js - анимационный круг по дорожке в svg

Question

Я новичок в Joint JS, а также с ограниченными навыками JavaScript. Что я пытаюсь сделать, так это то, что, когда я нажимаю кнопку Animate, кружок анимации должен следовать по пути от начала до конца. Он следует по пути, но не по линии.

c = V('circle', {
              r: 8,
              fill: 'red'
            });
        var cylinderView = graph.getCell(reserved_path[player[i]]).findView(paper);
        var cylinderPath = cylinderView.vel.findOne('path');
        var cyclic = graph.getCell(jQuery("#"+player[i]).attr('model-id')).findView(paper);
        var cylinderScalable = cyclic.vel.findOne('.scalable');

        var cylinderScalableCTM = cylinderPath.node.getCTM().inverse();

        c.animateAlongPath({
          dur: '5s',
          repeatCount: '1'
        }, cylinderPath.node);

        c.scale(2, 2);

        cylinderScalable.append(c);

Что я понял, так это то, что линия cylinScalable.append (c) создает эту проблему, и она может быть решена, если я смогу добавить детали непосредственно в SVG, но я не знаю, как это сделать

Вот мой полный код: https://jsfiddle.net/9espjppv/

Спасибо за вашу помощь заранее.

Answer 1

Посмотрите на этот документ, он может помочь вам

  var c = V('circle', { r: 8, fill: 'red' });
c.animateAlongPath({ dur: '4s', repeatCount: 'indefinite' }, paper.findViewByModel(myLink).$('.connection')[0]);
V(paper.svg).append(c);