Question

我想要从左到右为下面的草书文字设置动画。 enter image description here

想要实现这一目标的一个例子可以在slaveryfootprint.org网站上找到。在下面的链接中选择一个电子项目，并观看电缆的动画; http://slaveryfootprint.org/survey/#gadgets

我不熟悉像Raphaëljs这样的SVG和SVG库，所以我不知道从哪里开始。我已经google了，但没有找到教程。

编辑：找到下面的第一个标签，保存自插图画家，描绘d第一个字符：

<g>
<path fill="none" stroke="#8C3939" stroke-linecap="round" d="M216.615,297.73c9.509,10.697,24.563-12.282,18.444-15.658
    c-6.074-3.351-10.125,5.753-10.125,5.753s-4.297,8.542,2.08,13.137c8.42,6.673,15.817-3.188,15.947-3.43"/>
</g>

Answer 1

如果你有路径，你几乎可以做任何事情。另一种方法是将路径传递给javascript中的增量路径扩展器。这是我通常使用的代码（我已将其作为其他答案的一部分发布，并且它并非完全独特，但这个版本是我的）：

function drawpath( canvas, pathstr, duration, attr, callback )
{
    var guide_path;
    if ( typeof( pathstr ) == "string" )
        guide_path = canvas.path( pathstr ).attr( { stroke: "none", fill: "none" } );
    else
        guide_path = pathstr;
    var path = canvas.path( guide_path.getSubpath( 0, 1 ) ).attr( attr );
    var total_length = guide_path.getTotalLength( guide_path );
    var last_point = guide_path.getPointAtLength( 0 );
    var start_time = new Date().getTime();
    var interval_length = 50;
    var result = path;        

    var interval_id = setInterval( function()
    {
        var elapsed_time = new Date().getTime() - start_time;
        var this_length = elapsed_time / duration * total_length;
        var subpathstr = guide_path.getSubpath( 0, this_length );            
        attr.path = subpathstr;

        path.animate( attr, interval_length );
        if ( elapsed_time >= duration )
        {
             clearInterval( interval_id );
             if ( callback != undefined ) callback();
             guide_path.remove();
        }                                       
    }, interval_length );  
    return result;
}

然后，您将文本路径输入此功能。理想情况下，我一次只能做一个字母 - 复杂的路径似乎在Firefox中陷入困境，尽管Chrome似乎很好地处理它们。

这是我网站上的mock-up。

Answer 2

如果将草书文本设为一个笔划，则可以使用stroke-dashoffset + stroke-dasharray属性轻松为其设置动画。可以看到这种技术的一个例子here。

解决方案是为路径设置一个dasharray，其中一个破折号与路径的长度相同，一个破折号也与路径的长度相同（这个长度很容易在运行时通过调用找到路径元素上的getTotalLength()方法）。然后，您可以通过设置stroke-dashoffset属性的动画来推动虚线。

该技术应该可以应用于raphaël和其他svg框架。请注意，example显示具有预定值的svg动画。

Answer 3

一个很好的起点：How to work with Scalable Vector Graphics (SVG) in HTML 5

如何使用SVG绘制路径？

3 个答案: