javascript - 带有 textpath 的 Snap.svg 文本未按预期进行动画处理

Question

我在使用 snap.svg 为文本设置动画时遇到问题。我正在围绕圆弧移动文本，从圆弧的左下角到其顶点。我使用标准 Snap.animate 功能及其内置 setter 函数。

当我为随机元素(例如我在下面的示例中包含的圆圈)设置动画时，动画的行为符合预期。当我对纯文本进行动画处理时，它的行为也符合预期。然而，当我向该文本添加文本路径属性时，动画的功能以我不理解的方式不同。

此文本按预期动画显示:

svg.text(0,200,'Regular Text').attr({'text-anchor': 'middle'});

示例(悬停动画):http://codepen.io/anon/pen/pJbmYW

而此文本在未到达其所需目的地(也是弧线顶部)时停止:

var path = 'M0 200 A 200 200, 0, 1, 1, 400 200';
svg.text(0,200,'Arced Text').attr({'text-anchor': 'middle',
                                   'textpath':path});

示例(悬停动画):http://codepen.io/anon/pen/GJqaVp

我想我不明白添加文本路径对文本对象做了什么，因为看起来我应该能够像在添加路径之前一样对它的 x 和 y 坐标进行动画处理/转换。

欢迎任何见解或建议。谢谢。

Answer 1

在这种情况下，我认为为文本路径设置 x,y 动画并没有真正意义(我可能是错的)，因为这对于波动的线意味着什么。

我认为你想要的是为 startOffset 设置动画。例如...

 Snap.animate(0, arc.getTotalLength()/2,
    function(val){

        var point = arc.getPointAtLength(val);
        circ.attr({cx: point.x,
                   cy: point.y});
        arcText.textPath.attr({ startOffset: val})

     },1000,mina.easeinout);

这一点是主要的变化......

arcText.textPath.attr({ startOffset: val})

codepen (将鼠标悬停在上方)