1

SVGを使用して筆記体フォントで単語を描画するレーザーのように見えるものをアニメーション化する方法に関するアイデアを探しています。アニメーションは、私が気にしないSMILまたはJavaScriptで実行できますが、SMILの方が簡単だと思います。

文字をパスとして表現できれば、パスが連続していなくても、固定小数点から単語パスまでの線をアニメーション化する方法を理解できると確信しています。

何か案は？

編集私のデモは非常に基本的でした。基本的に、各文字のアニメーション関数を作成し、それらのタイミングを調整しました。たとえば、文字Xは次のとおりです。

<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
   <rect x="0" y="0" width="100%" height="100%" fill="black"/>

   <path id="word" stroke="red" d="M10 10 L40 40 M40 10 L10 40" />
   <line x1="10" y1="10" x2="25" y2="50" stroke="blue" stroke-width="0.5">
      <animate attributeName="x1" begin="0s" dur="1s" values="10; 40;" />
      <animate attributeName="y1" begin="0s" dur="1s" values="10; 40;" />
      <animate attributeName="x1" begin="1s" dur="1s" values="40; 10;" />
      <animate attributeName="y1" begin="1s" dur="1s" values="10; 40;" />
      <set attributeName="visibility" to="hidden" begin="2s" />
   </line>

</svg>

これは理想的な長期的な解決策ではないことに私たちは皆同意できると確信しています...パスに沿ってLINEの一方の端をアニメーション化するのは比較的簡単だと思いましたが、パスを取得するだけで問題が発生します...

4

3 に答える 3

1

問題のグリフからパスを抽出し、この例に示すように、各パスにダッシュ配列アニメーションを適用します。

于 2012-12-13T10:00:52.363 に答える
0

1つの可能性...SVGフォントは、個々の文字を描画するために使用される一連のSVGコマンドとして保存されていると私は理解しています。SVGでの描画のベクトルベースの性質は、リアルタイムで文字を「追跡」するのに適しているように見えます。SVGフォントを単純なパスに事前変換する変換ユーティリティを作成できる場合があります。

于 2012-12-12T19:47:52.040 に答える
0

大まかに言えば、フォントをキャンバスにレンダリングしてから、ピクセル情報を使用してアニメーションシーケンスを生成するようなことをしたいと思います。単純なアルゴリズムは左から右にトレースするだけでよく、単一のストロークパスを理解するのはかなり難しいでしょうが、それも実行可能です。

どのプラットフォームや時間の制約についても言及していないので、それよりもはるかに近づくのは困難です。

于 2012-12-12T19:37:02.077 に答える