SVG 動畫藝術 |每個 UI 開發人員都應該掌握的技術-css教學-PHP中文網

Art of SVG Animation | Techniques Every UI Developer Should Master

SVG（可擴展向量圖形）提供了一種透過高品質、可擴展圖形來增強 Web 和應用程式介面的現代方法。與傳統點陣圖圖形不同，SVG 由向量資料組成，這意味著它們可以縮放到任何尺寸而不會損失品質。這種可擴展性使得 SVG 在希望創建動態、響應式且具有視覺吸引力的設計的 UI 開發人員中非常受歡迎。

在這篇文章中，我們將深入研究 SVG 動畫的世界。無論您是想要探索這個令人興奮的領域的初學者，還是旨在提高技能的經驗豐富的開發人員，本指南都將引導您透過實用的程式碼範例了解十種不同的方法來製作 SVG 動畫。最後，您將準備好在您的專案中實施這些技術，將您的 UI 設計提升到一個新的水平。

為什麼要製作 SVG 動畫？

在我們進入具體方法之前，有必要了解為什麼 SVG 動畫如此有用：

解析度獨立：SVG 在任何螢幕密度下看起來都很清晰，這對於支援不同的裝置解析度至關重要。

小檔案大小：與許多點陣圖格式相比，SVG 通常具有較小的檔案大小，特別是當動畫涉及簡單的幾何形狀和有限的顏色時。

可操作性：SVG 可以透過 CSS 和 JavaScript 進行操作，為動畫的實現和控制方式提供了靈活性。

輔助功能：SVG 中的文字仍然可以選擇和搜索，從而增強可用性和輔助功能。

方法 1：CSS 過渡

開始製作 SVG 動畫最簡單的方法之一是使用 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 中，我們指定齒輪的變換屬性應在兩秒內線性且無限地轉換。當使用者將滑鼠懸停在齒輪上時，它會旋轉 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（同步多媒體整合語言）是一種基於 XML 的語言，可直接在 SVG 檔案中啟用複雜的動畫。

範例：沿著路徑移動

想像一下動畫一個物件沿著預先定義的路徑移動。

<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)

許多 JavaScript 函式庫，例如 GreenSock (GSAP)，都可以促進複雜的 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中文網其他相關文章！