4

私はSVGファイルについてほとんど何も知りませんが、ルートを示す線を引くためにSVGファイルを使用する必要があります（私はそれをオプションにするためのキャンバスについて十分に知りません）。

私はいくつかの例を見つけて、私が求めているものを達成することができましたが、線は右から左に移動する必要があることがわかりました。

Illustratorからパスをエクスポートしましたが、逆にする方法がわかりません。アニメーションを逆にする方法はありますか？

これがファイルです：http：//jdfv.nl/route.svg

4

3 に答える 3

11

これが1つの方法です：http： //jsfiddle.net/VTp4D/

SVGファイルの関連部分：

<path id="busTrack2" ...>
  <animate id="dashAnim2" attributeName="stroke-dashoffset" from="0" 
   to="0" dur="10s" begin="0" fill="freeze" keySplines="0 0.5 0.5 1" 
   calcMode="spline"/>
</path>

Javascriptコード：

var busTrack = document.getElementById('busTrack2');
var busTrackAnim = document.getElementById('dashAnim2');
var trackLength = busTrack.getTotalLength().toString();
busTrack.setAttribute('stroke-dasharray',trackLength+','+trackLength);
// forward: 
// busTrackAnim.setAttribute('values',trackLength+';0');
// backward:
busTrackAnim.setAttribute('values','-'+trackLength+';0');
于 2012-07-11T14:17:26.847 に答える
9

パスの方向を逆にするには、パス ファイルを illustrator で編集する必要があります。SVG パスには方向があります。パス マークアップは、開始場所と移動先を記述します。(非常に冗長ですが、非常に強力です。)

Illustrator で直接選択ツールを使用してパスを選択し、ペン ツールを選択して、アニメーション化されたパスの終点 (バスが「停止」する場所) にしたい場所を 1 回クリックします。画面上ではまったく同じに見えますが、方向が逆になります。ファイルを再保存してスワップアウトします。次に、アニメーション化されたストロークダッシュオフセットが逆になります。

于 2012-07-11T01:25:37.653 に答える
1

一連の操作の後に「ペン」がどこにあるかを把握する方法が必要な場合を除いて、それは間違いなく可能です。これは、描画が終了した場所を把握して、そのステップを逆方向にトレースする必要があるためです。SVGを逆方向にアニメーション化するには、次のことが必要です。

  1. SVGを絶対的な動きで区切られたコンポーネント曲線に分解し、それらの端点を把握します。最低限、単一の端点を持つ単一の連続線があります。最終的な位置を計算するには、カーブを前方に再生する必要があります。

  2. コマンドを逆方向に再生します。ほとんどの場合、これは些細なことです。（+ x、+ y）になる行は、（-x、-y）をたどる必要があります。端点（x1、y1）と制御点（x2、y2）を持つ曲線は、端点（y1、x1）と制御点（y2、x2）を持つ曲線として再トレースする必要があります。すべてのコマンドにはその反対があります。

それができたら、各コンポーネントを逆方向に再生するだけです。難しいのは、各コンポーネントの最終的な位置を把握することです。基本的に、描画せずに各コンポーネントを前方に再生する必要があります。これを理解するのに役立つオープンソースのグラフィックライブラリがたくさんあります。ベジェ曲線の終点を理解するためのコードを書いていることに気付いた場合は、十分に精査していません。

于 2012-07-11T02:34:53.500 に答える