SVG で手書きテキストをアニメーション化する方法: Dasharray、Dashoffset、マスキング?

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

目的

このガイドでは、SVG テキストをアニメーション化する方法について詳しく説明します。手書きの魅力的な効果。次のような模範的なアニメーションからインスピレーションを得たテクニックを探っていきます。ここ:

• https://codepen.io/se7ensky/pen/waoMyx
• https://codepen.io/munkholm/pen/EaZJQE

実装

この魅力的な手書き効果を実現するには、テキストのストロークだけをアニメーション化するという標準的なアプローチからは逸脱します。代わりに、前述の優れたアニメーションからインスピレーションを得ます。

テクニック 1:

• パスのストローク ダッシュ配列プロパティとストローク ダッシュオフセット プロパティをアニメーション化します。
• 希望の手描きのアウトラインを使用してアニメーション化されたストロークをクリップします形状。

JavaScript コード:

const path = document.querySelector('.text');

path.style.animation = 'dash 15s 1 forwards';
path.style.strokeDasharray = '300';
path.style.strokeDashoffset = '300';

CSS:

.text {
  -webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
  animation-delay: 1s;
}

テクニック2:

• 手描きの形状の輪郭を使用してマスクを作成します。
• パスに沿ってマスクの位置をアニメーション化します。

JavaScriptコード:

const mask = document.querySelector('.mask');

mask.style.animation = 'mask-move 15s 1 forwards';

CSS:

.mask {
  mask: url(#mask);
  -webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
  animation-delay: 1s;
}

SVG マスク:

<defs>
  <mask>

追加注:

• 特定のニーズに合わせてアニメーションのタイミングとパスをカスタマイズします。
• 独自の手描き効果を実現するために、さまざまな描画スタイルを試してください。
• 高解像度の SVG を使用して、テキストの複雑な詳細を保存するか、形状。

ライブデモ:

CodePen でインタラクティブな例を表示:

以上がSVG で手書きテキストをアニメーション化する方法: Dasharray、Dashoffset、マスキング?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。