3

我想从左到右为下面的草书设置动画。在此处输入图像描述

可以在 slaveryfootprint.org 网站上找到我想要实现的示例。在下面的链接中选择一个电子产品，然后观看电缆动画； http://slaveryfootprint.org/survey/#gadgets

我不熟悉 SVG 和像 Raphaël js 这样的 SVG 库，所以我不知道从哪里开始。我用谷歌搜索，但没有找到教程。

编辑：找到下面的第一个标签，从 illustrator 中保存，描绘了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>
4

3 回答 3

4

如果你有路径，你几乎可以做任何事情。另一种选择是将路径交给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 似乎可以很好地处理它们。

这是我网站上的模型。

于 2012-09-17T21:40:06.530 回答
3

如果您将草书文本作为一个笔画，您可以轻松地使用 stroke-dashoffset + stroke-dasharray 属性对其进行动画处理。这种技术的一个例子可以在这里看到。

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

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

于 2012-09-08T15:47:00.447 回答
0

一个好的起点：如何在 HTML 5 中使用可缩放矢量图形 (SVG)

于 2012-09-08T13:26:57.780 回答