SVG を使用して Web ページ上の手書きテキストをアニメーション化する方法?

問題ステートメント:

SVGとして保存したテキストをアニメーション化しようとしていますが、ストロークをアニメートすることしかできませんが、これは望ましい効果ではありません。あなたは、手描きの外観を作成する、指定された例と同様のアニメーションを?qū)g裝したいと考えています。これまでの內(nèi)容は次のとおりです:

コード サンプル:

<div>

.test {
  width: 300px;
}

.l1 {
  animation: dash 15s 1;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation-fill-mode: forwards;
}

.l2 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 20s linear forwards;
  animation-delay: 1s;
}

.l3 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 25s linear forwards;
  animation-delay: 2.5s;
}

.l4 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 25s linear forwards;
  animation-delay: 4.5s;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

答え:

アニメーション達(dá)成しようとしているのは、標(biāo)準(zhǔn)のダッシュ アニメーション技術(shù)を使用していますが、アニメーション化されたストロークを次のようなアウトラインでクリップします。

ダッシュ アニメーション テクニック:

次のような標(biāo)準(zhǔn)的な線:

<path d="M 10,75 L 290,75" stroke="red" stroke-width="50"/>

は、値を制御することによってアニメーション化されます。キーフレーム內(nèi)のストローク-ダシャアレイとストローク-ダシャオフセットのanime.

.path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 15s 1;
  animation-fill-mode: forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

この例では、ストローク-dasharray プロパティはパスに沿ったダッシュとギャップの長(zhǎng)さを定義し、ストローク-dashoffset はパス內(nèi)のダッシュのオフセットを定義します。アニメーションが 0% から 100% に進(jìn)むにつれて、ストローク ダッシュ オフセット値が減少し、パスに沿ってダッシュが徐々に表示されます。

手描きの外観の作成:

アニメーション化されたストロークをアウトラインでクリップするには、アニメーション化されたストロークの幅と色に一致するストロークで追加の SVG パスが使用されます。このアウトライン パスは、アニメーション化されたストロークが占める領(lǐng)域全體をカバーする必要があります。アウトラインのストローク-ラインジョインプロパティをマイターに定義することで、角の立ったスタイルが作成され、手描きのような印象を與えます。

以上がSVG のダッシュ アニメーションを使用して手描きのテキスト アニメーション効果を作成する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。