CSS3 を使用した SVG パス ストロークのアニメーション化入門チュートリアル

CSS3 を使用した SVG パス ストロークのアニメーション化入門チュートリアル

JavaScript に依存せず、純粋な CSS を使用してsvgストローク描画アニメーション効果と効果デモンストレーションアニメーションを実装します。

基本:

SVG には比較的重要な属性ブランチstrokeがあり、中国語のソフトウェアでは「ストローク」と呼ばれます。脳卒中に関連する特性には次のものがあります。

1. strokeストロークの色を示します。色を表す名前は、stroke-color ではなく、単にstroke です。その値は正式には「paint」と呼ばれ、オプションの値の型にはnonecurrentColor<color>が含まれます。

なし
<色>
現在の色

2. stroke-widthストロークの太さを示します。

3.stroke stroke-linecapストロークの終点の表現を示します。使用可能な値は、 buttroundsquareinherit 。図は以下のとおりです。

4.stroke stroke-linejoinストロークコーナーの表現を示します。可能な値: miterroundbevelinherit 。図は以下のとおりです。

5.stroke stroke-miterlimitストロークの交差(鋭角)の表現を示し、デフォルトのサイズは4です。ベベルからベベルまでの角度損失のようなものです。値が大きいほど損失は小さくなります。

stroke-dasharray破線ストロークを示します。オプションの値は、 none<dasharray>inherit

なし
<ダシャレイ>
継承する

7.stroke stroke-dashoffset破線の開始オフセットを示します。オプションの値は、 <percentage><length>inherit 。それぞれ、パーセンテージ値、長さ値、継承を表します。

8.stroke stroke-opacityストロークの透明度を示します。デフォルトは 1 です。

このチュートリアルに関連するアニメーション効果はstroke-dasharraystroke-dashoffsetです。

ストロークダシャアレイとストロークダッシュオフセット

便宜上、また干渉を減らすために、次のように直線で栗を揚げてみましょう。

以下のスライダーをクリック(または値入力)して、次の操作を体験してください。

ストローク-ダッシュ配列:

ストローク-ダッシュオフセット:

HTML コードは次のとおりです。

<svg id="svgForStroke" 幅="400" 高さ="200" xmlns="http://www.w3.org/2000/svg">
 <g>
  <line fill="none"stroke="#000000"stroke-width="5"stroke-dasharray="null"stroke-linejoin="null"stroke-linecap="round" x1="0"y1="90"x2="400"y2="90"/>
 </g>
</svg>

スライダーを動かすと(またはテキストボックスに入力すると)、setAttribute メソッドを通じて <line> ノード要素のstroke-dasharray 値とstroke-dashoffset 値が設定され、上記の効果が得られます。

特別なケース

ここで考えてみましょう。stroke stroke-dasharraystroke-dashoffset値が両方とも非常に大きく、ストロークされたパスの合計の長さを超えた場合はどうなるでしょうか。

中国語で説明すると、ソーセージの長さは12cmで、15cm間隔で点線を引くことになります。 dashoffsetがないと、ソーセージの前方15cmがチリソースで覆われてしまいます。実際はわずか12センチなので、私たちが目にしているのはチリソースに覆われたハムソーセージ全体です。

ここでdashoffsetも 15 cm になり、点線が 15 cm 後方にオフセットされます。その結果、チリソースはハムの外側に広がり、ハムの上にチリソースが付かなくなります。上記の直線 SVG を使用すると、直線が見えなくなります。

dashoffset値を徐々に減らしていくと、ハムの根元にチリソースが塗られているかのように、ハムの上のチリソースが少しずつ現れてくることがわかります。

両方のスライダーを右にスライドし、次にスライダーをゆっくりと左にスライドします (type=range をサポートするブラウザを使用してください)。ゆっくりと直線が表示されます。これが SVG パス アニメーションの原理です。

CSS3 animationサポート

インライン SVG の強みは、従来の高さや幅の配置、境界線や背景色などを処理しながら、CSS 属性で制御できる HTML 要素でもあるという点にあります。SVG 自体のいくつかの特殊な属性も、CSS3 animationでも CSS でサポートできます。

したがって、上で説明した SVG ストローク アニメーション効果は、JavaScript を使用せずに CSS3 animationを使用して簡単に実装できます。これは、最初にデモ ページを実装した方法です。

CSS コードは次のとおりです。

パス {
  ストロークダッシュ配列: 1000;
  ストロークダッシュオフセット: 1000;
  アニメーション: ダッシュ 5 秒 直線 無限;
}

@keyframes ダッシュ {
  に {
    ストロークダッシュオフセット: 0;
  }
}

1000 には特別な意味はありません。各パスの長さよりも大きいことを確認するのに十分な大きさです。1500 も使用できますが、違いはストロークの速度が少し速くなることです。

CSS3 アニメーション プロパティに詳しい人なら、上記のコードの意味を一目で理解できるはずです。5 秒のアニメーションでは、stroke-dashoffset が 1000 から 0 に変化します。ストローク アニメーションが形成されます。

上記の CSS コードはほぼ普遍的です。

SVG パスがどんなに複雑であっても、そのストロークをアニメーション化できます。私の独自のテストによると、IE10+ ではアニメーション効果はありません。これは、CSS が SVG のストロークに関連する属性をサポートしていないためではなく、アニメーションがストロークに関連する属性のアニメーションをサポートしていないためです。

上記のエフェクトの用途は何でしょうか? 次のようなシナリオを思いつきました。デモンストレーション中にいくつかの重要なポイントを段階的に表示する、写真にホバー ストローク エフェクトを適用する、Web サイトのヒント項目に矢印ガイダンス エフェクトを適用するなど、いずれも非常に便利です。

パスの長さ

パス、または線の正確な長さを知りたい場合。次のコードのような JavaScript を使用する必要がある場合があります。

var パス = document.querySelector('パス');
var 長さ = path.getTotalLength();

参考文献

ポリゴンフィーチャーデザイン: 楽しみと利益のための SVG アニメーション

SVG でベクターをアニメーション化する

SVG ラインアニメーションの仕組み

SVG でのアニメーション線画

W3 – ストロークのプロパティ

チュートリアルの転送元:

https://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-%e5%8a%a8%e7%94%bb-%e8%b7%af%e5%be%84/

要約する

上記は、CSS3 を使用して SVG パス ストローク アニメーション効果を実現する方法の入門チュートリアルです。お役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  HTM と HTML の違いは何ですか? HTM と HTML の違いは何ですか?

>>:  Dockerはクロスプラットフォーム機能を実現するためにnet5プログラムを導入

推薦する

JavaScript で知らない Object.entries の使い方

目次序文1. 共通オブジェクトを反復処理するには for...of を使用します2. 通常のオブジェ...

ブラウザをJavaScriptで対話させる方法

目次1. 最も単純な例2. 音声の速度とピッチをカスタマイズする3. 音量の調整方法4. よく使われ...

MySQL 4 データをインポートする方法

1. mysqlコマンドをインポートするmysql コマンドのインポート構文は次のとおりです。 my...

よく使われる Docker コマンドと例の概要と分析

目次1. コンテナライフサイクル管理(1)ドッカー実行(2)スタート/ストップ/リスタート(3)ドッ...

HTML減量 HTMLタグを合理化してWebページを作成する

HTML4 についてHTML (XHTML ではありません)、MIME タイプは text/html...

IMG での UserMap の使用例

usemap は <img> タグの属性であり、使用するイメージ マップの名前を指定する...

Ubuntu 18でターミナルを美しいコマンドラインプロンプトに変更する方法

VMware と Ubuntu を再インストールしましたが、コマンドラインプロンプトが単調すぎて美し...

MySQL のスケジュールされた完全なデータベースバックアップ

目次1. MySQLデータのバックアップ1.1、データをバックアップするためのmysqldumpコマ...

MySQL コマンドライン操作中のエンコードの問題の詳細な説明

1. MySQLデータベースのエンコーディングを確認する mysql -u ユーザー名 -p パスワ...

Ubuntu で VIM を C++ 開発エディタとして設定する

1. 設定ファイルをユーザー環境にコピーし、新しい.vimフォルダを作成し、バンドルサブフォルダを作...

MySQL 5.7.13 ソースコードのコンパイル、インストール、および構成方法のグラフィックチュートリアル

インストール環境: CentOS7 64ビットMINI版公式ソースコードのコンパイルおよびインストー...

CSS スタイルの優先順位とカスケード順序に関する議論

一般的に: [重要なフラグ1つ] > [特別なフラグ4つ] > 宣言順!importan...

Reactプロジェクトで画像を導入するいくつかの方法

imgタグは画像を導入しますreactは実際にはjsリーダー関数を介してページをレンダリングするため...

アルバムと写真をアルバムに保存するためのWeChatアプレット

私は現在、Xiao Nian Gao に似たビデオおよびツール アプリを開発しています。ユーザーが作...