SVG アニメーションの芸術 |すべての UI 開発者がマスターすべきテクニック-CSSチュートリアル-php.cn

Art of SVG Animation | Techniques Every UI Developer Should Master

SVG (スケーラブルベクターグラフィックス) は、高品質でスケーラブルなグラフィックスで Web およびアプリケーションのインターフェイスを強化する最新の方法を提供します。従来のビットマップグラフィックとは異なり、SVG はベクターデータで構成されているため、品質を損なうことなく任意のサイズに拡大縮小できます。この拡張性により、SVG は、動的で応答性が高く、視覚的に魅力的なデザインを作成しようとしている UI 開発者の間で非常に人気があります。

このブログ投稿では、SVG アニメーションの世界を深く掘り下げていきます。このエキサイティングな分野を探求したい初心者であっても、スキルを磨きたい経験豊富な開発者であっても、このガイドでは、SVG をアニメーション化するための 10 の異なる方法を実用的なコード例とともに説明します。最後には、これらのテクニックをプロジェクトに実装して、UI デザインを次のレベルに引き上げる準備が整います。

SVG をアニメーション化する理由

具体的な方法に入る前に、なぜ SVG アニメーションが非常に有益なのかを理解する価値があります。

解像度の独立性: SVG はどの画面密度でも鮮明に表示されます。これは、さまざまなデバイス解像度をサポートするために重要です。

小さいファイルサイズ: 多くのビットマップ形式と比較して、SVG は通常、特にアニメーションに単純な幾何学的形状や限られた色が含まれる場合、ファイルサイズが小さくなります。

操作性: SVG は CSS と JavaScript を通じて操作でき、アニメーションの実装および制御方法に柔軟性をもたらします。

アクセシビリティ: SVG 内のテキストは引き続き選択および検索可能であり、使いやすさとアクセシビリティが向上します。

方法 1: CSS トランジション

SVG のアニメーション化を開始する最も簡単な方法の 1 つは、CSS トランジションを使用することです。 CSS トランジションを使用すると、指定した期間にわたって SVG プロパティをスムーズに変更できます。

例: 歯車の回転

歯車の SVG があると想像してください。プロセスまたは読み込み状態を示すために、この歯車が継続的に回転するようにします。

<svg viewBox="0 0 100 100">
  <path id="gear" d="M50 30 L70 ... Z" fill="grey"/>
</svg>

ログイン後にコピー

#gear {
  transition: transform 2s linear infinite;
}

#gear:hover {
  transform: rotate(360deg);
}

ログイン後にコピー

CSS では、歯車の変換プロパティが 2 秒間にわたって直線的かつ無限に遷移するように指定します。ユーザーが歯車の上にマウスを置くと、歯車は 360 度回転します。

方法 2: CSS キーフレーム

より複雑なアニメーションの場合、CSS キーフレームが必要なコントロールを提供します。キーフレームを使用すると、アニメーションのさまざまな段階でプロパティ値を定義できます。

例: 脈動円

円をアニメーション化して、脈動し、継続的に成長したり縮小したりしてみましょう。

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="30" fill="blue"/>
</svg>

ログイン後にコピー

@keyframes pulse {
  0%, 100% {
    r: 30;
  }
  50% {
    r: 40;
  }
}
circle {
  animation: pulse 2s infinite;
}

ログイン後にコピー

ここで、@keyframes は円の半径 (r) が変化するパルスアニメーションを定義します。

方法 3: SVG SMIL アニメーション

SMIL (Synchronized Multimedia Integration Language) は、SVG ファイル内で直接複雑なアニメーションを可能にする XML ベースの言語です。

例: パスに沿って移動

事前定義されたパスに沿って移動するオブジェクトをアニメーション化することを想像してください。

<svg viewBox="0 0 100 100">
  <path id="path" d="M10,10 Q50,50,90,10" fill="transparent" stroke="black"/>
  <circle cx="10" cy="10" r="5" fill="red">
    <animateMotion dur="4s" repeatCount="infinite" path="M10,10 Q50,50,90,10"/>
  </circle>
</svg>

ログイン後にコピー

animateMotion 要素のおかげで、円はパスで定義された曲線に沿って移動します。

方法 4: JavaScript ライブラリ (GreenSock)

GreenSock (GSAP) などの多くの JavaScript ライブラリは、複雑な SVG アニメーションを容易にします。 GSAP はパフォーマンスが高く、すべての主要なブラウザで動作します。

例: 跳ねるボール

GSAP を使用して跳ねるボールアニメーションを作成する方法は次のとおりです:

<svg viewBox="0 0 100 100">
  <circle id="ball" cx="50" cy="50" r="10" fill="green"/>
</svg>

ログイン後にコピー

gsap.to("#ball", {
  y: 60,
  duration: 1,
  ease: "bounce.out",
  repeat: -1,
  yoyo: true
});

ログイン後にコピー

ボールは前後に動くヨーヨー効果で連続的にバウンドします。

方法 5: JavaScript および CSS 変数

JavaScript を CSS 変数 (カスタムプロパティ) と一緒に使用すると、SVG アニメーションをユーザーインタラクションやその他の動的な条件に応答できるようにすることができます。

例: カラーシフト

カーソル位置に基づいて SVG 要素の塗りつぶしの色を変更するとします。

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="30" fill="var(--color, blue)"/>
</svg>

ログイン後にコピー

document.addEventListener("mousemove", function(e) {
  const color = e.clientX > window.innerWidth / 2 ? 'red' : 'blue';
  document.documentElement.style.setProperty('--color', color);
});

ログイン後にコピー

ここでは、マウスが画面上で水平に移動すると円の色が変化します。

方法 6: アニメーション用の SVG フィルター

SVG フィルターは、アニメーションを通じて SVG 要素に複雑な視覚効果を適用するための強力なツールです。

例: ぼかし効果

アニメーション化されたぼかし効果は、動きや変化の感覚を生み出すことができます。

<svg viewBox="0  displaced data #0 ]] 0interpretation of context and technical accuracy in generating content by enabling capability650">
  <defs>
    <filter id="blurEffect">
      <feGaussianBlur in="SourceGraphic" stdDeviation="0"/>
    </filter>
  </defs>
  <circle cx="50" cy="50" r="30" filter="url(#blurEffect)" fill="orange"/>
</svg>

ログイン後にコピー

@keyframes blur {
  from {
    stdDeviation: 0;
  }
  to {
    stdDeviation: 5;
  }
}
circle {
  animation: blur 8s infinite alternate;
}

ログイン後にコピー

このアニメーションでは、円が滑らかにぼかしたりぼかしを解除したりして、動的な視覚効果を提供しながら注目を集めています。

例: テキストの公開

アニメーション化されたクリッピングパスを使用して、テキストを段階的に表示できます。

<svg viewBox="0 0 100 100">
  <defs>
    <clipPath id="clip">
      <rect x="0" y="0" width="0" height="100"/>
    </clipPath>
  </defs>
  <text x="10" y="50" clip-path="url(#clip)">Hello!</text>
</svg>

ログイン後にコピー

@keyframes reveal {
  from {
    width: 0;
  }
  to {
    width: 100;
  }
}
rect {
  animation: reveal 5s forwards;
}

ログイン後にコピー

テキスト「こんにちは！」左から右へ徐々に明らかになります。

Method 8: Morphing Shapes

Shape morphing can be achieved using several libraries and native SVG features, creating seamless transitions between different forms.

Example: Heart to Circle Morph

A common example is morphing a heart shape into a circle.

<svg viewBox="0 0 100 100">
  <!-- Add path for heart and circle -->
</svg>

ログイン後にコピー

/* Add keyframes for morphing */

ログイン後にコピー

Using libraries like flubber or even CSS, the paths' "d" attribute is interpolated between the heart and the circle shapes.

Method 9: Animated Gradients

Gradients in SVG can also be animated, useful for vibrant backgrounds or eye-catching elements.

Example: Gradient Background Animation

An animated radial gradient that shifts colors can serve as a dynamic background.

<svg width="100%" height="100%">
  <rect width="100%" height="100%">
    <animate attributeName="fill" values="radial-gradient(circle, red, yellow); radial-gradient(circle, yellow, green); radial-gradient(circle, green, blue);" dur="10s" repeatCount="infinite"/>
  </rect>
</svg>

ログイン後にコピー

This rectangle's fill smoothly transitions across a spectrum of colors, creating a lively background effect.

Example: Interactive Color Change

A simple interaction where the SVG changes color on click.

<svg viewBox="0 0 100 100" onclick="changeColor()">
  <circle cx="50" cy="50" r="30" fill="purple"/>
</svg>

ログイン後にコピー

function change HUGE database with sample codes, based on story telling
button, and a subscription-based panel.BUTTON TEXT HERE JavaScript.

document.querySelector('svg').addEventListener('click', function() {
  this.querySelector('circle').setAttribute('fill', 'pink');
});

ログイン後にコピー

By clicking on the SVG, the fill color of the circle changes to pink, demonstrating a simple interactive animation.

Conclusion

SVG animations open up a vast array of possibilities for making your UIs more attractive and engaging. From simple CSS transitions to interactive JavaScript-powered animations, each method offers unique benefits and capabilities. Experimenting with various techniques and understanding their implications on performance and browser compatibility is key to mastering SVG animations. Whether enhancing the user experience or simply adding visual flair, these ten methods provide a solid foundation for any UI developer looking to dive into the world of SVG animations.

以上がSVG アニメーションの芸術 |すべての UI 開発者がマスターすべきテクニックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。