Border-ImageでSVGをアニメーション化する方法

CSSのborder-image属性とアニメーションSVGを使用して動的な境界効果を作成します

この記事では、CSSとアニメーションSVGのborder-image属性を組み合わせて、国境を囲む動的なSVGアニメーション効果を作成する方法を紹介します。この効果を再現できるだけでなく、ニーズに応じてカスタマイズできる、再構成可能な9グリッドのアニメーションSVGを手作りする方法を学びます。

最終的な効果は次のとおりです。

このアニメーションは、実際には、「The Skull」と呼ばれる旗を張るパズルの一部であり、Arduinoとそのマイクロコントローラーの内部構造を探索しています。このようなアニメーションの境界線を作成する方法を検索しましたが、有用な例を見つけることができませんでした。私が見つけたコンテンツのほとんどは「アリの行進」効果に関連していますが、残念ながらstroke-dasharrayトリックは頭蓋骨では機能しません。

したがって、学習と共有の精神で、私はここであなたと私の経験を共有します！

backgroundまたはborder-imageを使用する必要がありますか？

最初は、 border-image属性の存在さえ知りませんでした。私の最初の試みで、私は::beforeそのbackground-position属性をアニメーション化する前に使用しようとしました。結果は次のとおりです。

ご覧のとおり、この方法は機能しますが、境界全体を完了するには、少なくとも8つの異なる要素（または擬似要素）が必要です。これはHTMLコードを混同し、理想的ではありません。

私はイスラエルCSS開発者Facebookグループに質問を投稿しましたが、誰もが私にborder-imageの属性を指摘しました。それはそれが呼ばれるものに正確に適合します：要素の境界として画像（またはCSS勾配）を使用します。

border-imageを使用するには、9グリッドの方法で使用される画像を提供する必要があります（画像上のチックトーグリッドのオーバーレイを想像してください）。これらの9つのエリアはそれぞれ、境界の異なる部分を表しています。上、右、左、下、四隅、および中央（中央部は無視されます）。

たとえば、静的頭蓋骨のみが必要な場合は、SVGパターンを使用して頭蓋骨を9回繰り返すことができます。まず、頭蓋骨の経路を使用して24×24パターンを定義し、次にこのパターンを72×72の長方形の塗りつぶしとして使用します。

<svg height="72" version="1.1" width="72" xmlns="http://www.w3.org/2000/svg"><defs><pattern height="24" patternunits="userSpaceOnUse" width="24"><path d="..." fill="red"></path></pattern></defs><rect fill="url(#skull-fill)" height="72" width="72"></rect></svg>

次に、境界線を定義し、ターゲット要素のborder-imageを設定します。

 .skulls {
  国境：24px固体透明。
  border-image：url（ "https://skullctf.com/images/skull-9.svg"）24ラウンド;
}

このようにして、頭蓋骨で構成される境界線を取得します。

SVGアニメーションを追加します

これで、これらの頭蓋骨にアニメーションを追加できます！ほとんどの場合、正常に機能します。

アイデアは、国境画像の各エリアに異なるアニメーションを作成することです。たとえば、左上隅には、1つの頭蓋骨が右から左に移動し、もう1つの頭蓋骨は同時に上から下に移動します。

transform属性をアニメーション化して、運動効果を達成します。 SVGも使用します<use></use>各頭蓋骨の繰り返し長い繰り返しを避けるための要素<path></path>意味：

<svg height="96" version="1.1" width="96" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  @KeyFrames Left {to {transform：translate（-32px、0）}}}
  @KeyFrames Down {to {transform：translate（0、32px）}}
 <defs><path d="..." fill="red"></path></defs><use href="#skull" style="animation: down .4s infinite linear" x="0" y="0"></use><use href="#skull" style="animation: left .4s infinite linear" x="32" y="0"></use></svg>

SVGアニメーションの構文は、SmilなどのSVG固有の構文のようなものではなく、CSSアニメーションを使用するため、おなじみのように見えるかもしれません。とてもクールですよね？

最終的な効果は次のとおりです。

グリッドを追加すると、このアニメーションが上部と左のエッジの一部もカバーしていることがわかります。

残りの3つのエッジを追加した後、それはより印象的に見え、したがって、ボーダーイメージの8つの領域を完全にカバーしています。

<svg height="96" version="1.1" width="96" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  @KeyFrames Left {to {transform：translate（-32px、0）}}}
  @KeyFrames Down {to {transform：translate（0、32px）}}
  @KeyFrames Right {to {transform：translate（32px、0）}}}
  @KeyFrames Up {to {transform：translate（0、-32px）}}
 <defs><path d="..." fill="red"></path></defs><use href="#skull" style="animation: down .4s infinite linear" x="0" y="0"></use><use href="#skull" style="animation: left .4s infinite linear" x="32" y="0"></use><use href="#skull" style="animation: left .4s infinite linear" x="64" y="0"></use><use href="#skull" style="animation: up .4s infinite linear" x="64" y="32"></use><use href="#skull" style="animation: down .4s infinite linear" x="0" y="32"></use><use href="#skull" style="animation: right .4s infinite linear" x="0" y="64"></use><use href="#skull" style="animation: right .4s infinite linear" x="32" y="64"></use><use href="#skull" style="animation: up .4s infinite linear" x="64" y="64"></use></svg>

これにより、完全なループが提供されます。

すべてをまとめると、作成したアニメーションSVGをborder-imageとして使用して、目的の結果を得ることができます。

私はこれを一日中プレイすることができます...

最初に動作させたとき、アニメーションのプロパティを調整し始めました。これは、GIFの代わりにSVGを使用することの利点の1つです。アニメーションの性質を変更することは、SVGソースファイルのCSSプロパティを変更するのと同じくらい簡単です。より小さなファイルサイズ（特に勾配を扱う場合）、フルカラーサポート、クリアスケーリングは言うまでもなく、すぐに結果を見ることができます。

まず、アニメーションのタイミング関数をeaseに変更すると、それがどのように見えるかを確認しようとします。

また、赤と緑の間の頭蓋骨をフェードさせることもできます。

ハイスコ​​アテーブルの周りを移動するときに、頭蓋骨の変化方向を作成することもできます。

JavaScriptタブにアクセスして、SVGソースコードを調整して自分で試すことができます。

部屋の象（Ahem、Firefox）

私が最初に仕事をしたとき、私はとても幸せでした。ただし、注意すべきことがいくつかあります。まず、最も重要な点は、何らかの理由で、Firefoxは境界の端にアニメーションをレンダリングせず、コーナーのアニメーションのみをレンダリングしないことです。

興味深いことに、SVGを同じアニメーションでGIFに変更すると、完全に機能します。ただし、Chrome Stopのエッジアニメーション！ ？

とにかく、これはブラウザのエラーのようです。なぜなら、Firefoxはborder-image-repeatプロパティをstretchとエッジをアニメーション化するためですが、結果は少し奇妙です（ページのトピックに適合するかもしれませんが）：

border-image-repeat値をspaceに変更することも機能しているようですが、要素の幅が頭蓋骨サイズ（この場合は32ピクセル）の整数倍でない場合のみです。つまり、アニメーションにいくつかのギャップがあります。

また、コンテナサイズがパッチサイズの倍数（この場合は32ピクセル）ではない場合、頭蓋骨に小さな黒い線のような視覚的な問題があることがわかりました。これは、いくつかの浮動小数点の丸みの問題と関係があると思います。また、ズームインすると壊れる傾向があります。

完璧ではありませんが、絶対に終了しました！最終バージョンを見たい場合は、「The Skull」のハイスコアページにアクセスできます。うまくいけば、あなたはすぐにあなたの名前を見るでしょう！

以上がBorder-ImageでSVGをアニメーション化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。