3

下の筆記体のテキストを左から右にアニメーション化したいと考えています。ここに画像の説明を入力

私が達成しようとしている欲求の例は、slaveryfootprint.org サイトで見つけることができます。以下のリンクで電子アイテムを選択し、ケーブルのアニメーションを見てください。 http://slaveryfootprint.org/survey/#gadgets

私は SVG と Raphaël js のような SVG ライブラリに慣れていないので、どこから始めればよいかわかりません。私はグーグルで検索しましたが、チュートリアルは見つかりませんでした。

編集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

パスがあれば、ほとんど何でもできます。もう 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;
}

次に、テキストのパスをこの関数にフィードします。理想的には、一度に 1 文字ずつ実行します。複雑なパスは Firefox では行き詰まるようですが、Chrome では問題なく処理されるようです。

これが私のサイトのモックアップです。

于 2012-09-17T21:40:06.530 に答える
0

良い出発点: HTML 5 でスケーラブル ベクター グラフィックス (SVG) を操作する方法

于 2012-09-08T13:26:57.780 に答える