SVG のダッシュ アニメーションを使用して手描きのテキスト アニメーション効果を作成する方法

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

問題ステートメント:

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

コード サンプル:

<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;
  }
}

答え:

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

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

次のような標準的な線:

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

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

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

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

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

手描きの外観の作成:

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

以上がSVG のダッシュ アニメーションを使用して手描きのテキスト アニメーション効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。