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プログラムを導入

推薦する

Vue は Tencent Map を統合して API を実装します (デモ付き)

目次執筆の背景プロジェクトの説明事前準備注記執筆の背景以前のプロジェクトではTencent Maps...

Ubuntu 19 以下に Android Studio をインストールするチュートリアル

過去の経験から言うと、タスクを完了した後にメモを取るのは良い習慣です。インストール環境はUbuntu...

JS の compose 関数と pipe 関数の使い方の詳細な説明

目次作成機能配列プロトタイプの削減Array.prototype.reduceRightパイプ関数作...

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

展開環境: ここでは docker コンテナ、Linux システム、VmWare 仮想マシンが使用さ...

Linux のハードリンクとソフトリンクの区別

Linux には、2 種類のファイル接続があります。1 つは Windows のショートカットに似て...

MySQLの日付と時刻関数の使用の概要

この記事はMySQL 8.0に基づいていますこの記事では、日付と時刻の操作のための MySQL 関数...

モバイルでのHTML5経由のファイルアップロード

ほとんどの場合、PC でファイルをアップロードするにはプラグインが使用され、フラッシュが導入されても...

Docker クロスホストネットワークの実装 (手動)

1. Macvlan の紹介Macvlan が登場する前は、イーサネット カードに複数の IP ア...

CSS の新機能には、コントロールページの再描画と再配置の問題が含まれています

新しい CSS プロパティ contain を紹介する前に、読者はページの再描画と再配置が何であるか...

クラウドネイティブテクノロジー Kubernetes (K8S) の紹介

目次01 Kubernetes とは何ですか? 02 KubernetesとCompost+Swar...

MySQL 5.7.10 インストール ドキュメント チュートリアル

1. 依存パッケージをインストールする yum -y インストール gcc-c++ ncurses-...

MySQLオンラインDDL gh-ostの使用の概要

背景: DBA として、大規模なテーブルの DDL 変更のほとんどは、Percona の pt-on...

Centos7でファイルをバックアップするときは、バックアップファイルにバックアップの日付を追加します

Linux は、システム内のデバイス、インターフェース、ファイル、スタートアップ、アプリケーション ...

MySQL の concat 関数についての簡単な説明。MySQL でフィールドの前または後に文字列を追加する方法

MySQL で concat 関数を使用する方法: CONCAT(文字列1、文字列2、…)戻り値は、...