הטמעת אנימציות SVG (SMIL/CSS/JS) לאתר שלך

כשהלוגו שלך קופץ במקום להסתובב בצורה חלקה והאייקונים מהבהבים, זה כאב שמוכר לכל מי שהתמודד עם אנימציות SVG. צוות מפתחי הווב שלנו עם ניסיון של 10+ שנים יישם מעל 50 פרויקטי אנימציה, מאייקונים פשוטים ועד דשבורדים אינטראקטיביים מורכבים. הנה איך להימנע מטעויות נפוצות ולבחור את הכלים הנכונים.

אנימציות SVG מגיעות בשלושה סוגים: SMIL, CSS ו-JavaScript. SMIL—אנימציות דקלרטיביות ישירות ב-markup, ללא צורך ב-JS. CSS—לטרנספורמציות פשוטות, ביצועים גבוהים. JavaScript (Web Animations API ו-GSAP)—לסצנות עם שליטה מלאה ואינטראקטיביות. נבחן כל גישה ונראה דוגמאות אמיתיות.

למה אנימציות SVG נתקעות במובייל?

הסיבות העיקריות הן טיפול לא נכון ב-transform-origin וריפוי (repaint) של יותר מדי אלמנטים. אנו משתמשים ב-<animate> ומעבירים אנימציות ל-GPU, מה שמגביר את ה-FPS בעד 30%. עם 20 אובייקטים מונפשים וללא האצת GPU, ה-FPS יורד ל-30; עם <animateTransform>, הוא נשאר על 58. אנו גם מכבדים את <animateMotion> עבור משתמשים רגישים, ומשפרים נגישות וחוויית משתמש.

איזו טכנולוגיה לבחור: SMIL, CSS או JS?

הבחירה תלויה במשימה. SMIL אידיאלי לאנימציות דקורטיביות פשוטות (לוגו, רקע)—ללא צורך ב-JS, קל לתחזוקה. CSS הוא הטוב ביותר לאנימציות מצב (hover, active) וטרנספורמציות אלסטיות—הביצועים גבוהים ב-20% מ-SMIL במובייל (לפי המדידות שלנו). JavaScript עם GSAP מיועד לשליטה מלאה, צירי זמן מורכבים ואינטראקטיביות, למשל אינפוגרפיקות מונפשות או דשבורדים.

יישום טכני: SMIL, CSS, JS, GSAP

SMIL: אנימציות דקלרטיביות בתוך SVG

אנימציות SMIL מתוארות ישירות בקוד SVG באמצעות תגי <!-- public/animations/logo.svg --> <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="50" fill="#3b82f6"> <animate attributeName="fill" values="#3b82f6;#8b5cf6;#ec4899;#3b82f6" dur="3s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.2 1; 0.4 0 0.2 1; 0.4 0 0.2 1" /> <animate attributeName="r" values="50;45;50" dur="1.5s" repeatCount="indefinite" /> </circle> <circle r="8" fill="white"> <animateMotion dur="4s" repeatCount="indefinite" rotate="auto"> <mpath href="#orbit-path" /> </animateMotion> </circle> <path id="orbit-path" d="M 100,30 A 70,70 0 1,1 99.9,30" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="1" /> <path fill="#f59e0b"> <animate attributeName="d" dur="2s" repeatCount="indefinite" values="M 100,20 L 180,80 L 150,160 L 50,160 L 20,80 Z;M 100,10 L 190,90 L 160,170 L 40,170 L 10,90 Z;M 100,20 L 180,80 L 150,160 L 50,160 L 20,80 Z" /> </path> </svg> , /* styles/svg-animations.css */ .pulse-ring { transform-origin: center; animation: pulse 2s ease-out infinite; } @keyframes pulse { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(2); opacity: 0; } } .draw-path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw 2s ease-in-out forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } .stagger-item { opacity: 0; transform: translateY(20px); animation: fadeUp 0.5s ease-out forwards; } .stagger-item:nth-child(1) { animation-delay: 0.1s; } .stagger-item:nth-child(2) { animation-delay: 0.2s; } .stagger-item:nth-child(3) { animation-delay: 0.3s; } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .draw-path, .pulse-ring, .stagger-item { animation: none; } .draw-path { stroke-dashoffset: 0; } } , // utils/svg-animator.ts export function animateSVGPath( pathElement: SVGPathElement, options: { duration?: number easing?: string delay?: number } = {} ): Animation { const length = pathElement.getTotalLength() pathElement.style.strokeDasharray = `${length}` pathElement.style.strokeDashoffset = `${length}` return pathElement.animate( [ { strokeDashoffset: length }, { strokeDashoffset: 0 }, ], { duration: options.duration ?? 1500, easing: options.easing ?? 'ease-in-out', delay: options.delay ?? 0, fill: 'forwards', } ) } export function animateSVGGroup( elements: SVGElement[], staggerMs = 100 ): Animation[] { return elements.map((el, i) => el.animate( [ { opacity: 0, transform: 'translateY(20px)' }, { opacity: 1, transform: 'translateY(0)' }, ], { duration: 500, delay: i * staggerMs, easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)', fill: 'forwards', } ) ) } . מפרט ה-SVG 1.1 הבסיסי מגדיר את ההתנהגות שלהם.

<!-- public/animations/logo.svg -->
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" fill="#3b82f6">
    <animate attributeName="fill" values="#3b82f6;#8b5cf6;#ec4899;#3b82f6" dur="3s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.2 1; 0.4 0 0.2 1; 0.4 0 0.2 1" />
    <animate attributeName="r" values="50;45;50" dur="1.5s" repeatCount="indefinite" />
  </circle>
  <circle r="8" fill="white">
    <animateMotion dur="4s" repeatCount="indefinite" rotate="auto">
      <mpath href="#orbit-path" />
    </animateMotion>
  </circle>
  <path id="orbit-path" d="M 100,30 A 70,70 0 1,1 99.9,30" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="1" />
  <path fill="#f59e0b">
    <animate attributeName="d" dur="2s" repeatCount="indefinite" values="M 100,20 L 180,80 L 150,160 L 50,160 L 20,80 Z;M 100,10 L 190,90 L 160,170 L 40,170 L 10,90 Z;M 100,20 L 180,80 L 150,160 L 50,160 L 20,80 Z" />
  </path>
</svg>

SMIL פועל בכל הדפדפנים המודרניים, אבל ל-Safari iOS יש מגבלות עם חלק מהמאפיינים—נדרשת בדיקה. ראו אנימציית SVG לפרטים.

אנימציות CSS עבור SVG

CSS עובד עבור טרנספורמציות, אטימות ואנימציות stroke. חשוב: // components/AnimatedDiagram.tsx import { useEffect, useRef } from 'react' import { gsap } from 'gsap' import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin' gsap.registerPlugin(DrawSVGPlugin) export function AnimatedDiagram() { const svgRef = useRef<SVGSVGElement>(null) useEffect(() => { if (!svgRef.current) return const ctx = gsap.context(() => { const paths = svgRef.current!.querySelectorAll('.data-path') const nodes = svgRef.current!.querySelectorAll('.node') const labels = svgRef.current!.querySelectorAll('.label') const tl = gsap.timeline({ repeat: -1, repeatDelay: 2 }) tl.from(paths, { drawSVG: '0%', duration: 1.5, stagger: 0.3, ease: 'power2.inOut', }) .from(nodes, { scale: 0, opacity: 0, transformOrigin: 'center', stagger: 0.15, ease: 'back.out(2)', duration: 0.5, }, '-=0.5') .from(labels, { opacity: 0, y: 10, stagger: 0.1, duration: 0.4, }, '-=0.3') }, svgRef) return () => ctx.revert() }, []) return ( <svg ref={svgRef} viewBox="0 0 400 300"> <path className="data-path" d="M 50,150 C 150,50 250,50 350,150" stroke="#3b82f6" strokeWidth="2" fill="none" /> <circle className="node" cx="50" cy="150" r="8" fill="#3b82f6" /> <circle className="node" cx="200" cy="80" r="8" fill="#8b5cf6" /> <circle className="node" cx="350" cy="150" r="8" fill="#3b82f6" /> <text className="label" x="50" y="170" textAnchor="middle" fontSize="12">Начало</text> <text className="label" x="350" y="170" textAnchor="middle" fontSize="12">Конец</text> </svg> ) } ב-SVG מתנהג אחרת מאשר ב-HTML—הקואורדינטות מתייחסות ל-viewport של ה-SVG. עבור אנימציות אייקוני SVG, השתמשו ב-transform-origin: center והגבילו את מספר המאפיינים המונפשים.

/* styles/svg-animations.css */
.pulse-ring {
  transform-origin: center;
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
.draw-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 2s ease-in-out forwards;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
.stagger-item {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.5s ease-out forwards;
}
.stagger-item:nth-child(1) {
  animation-delay: 0.1s;
}
.stagger-item:nth-child(2) {
  animation-delay: 0.2s;
}
.stagger-item:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .draw-path,
  .pulse-ring,
  .stagger-item {
    animation: none;
  }
  .draw-path {
    stroke-dashoffset: 0;
  }
}

JavaScript: Web Animations API

ה-Web Animations API הוא פתרון JS טבעי עם ביצועים טובים:

// utils/svg-animator.ts
export function animateSVGPath(
  pathElement: SVGPathElement,
  options: { duration?: number; easing?: string; delay?: number } = {}
): Animation {
  const length = pathElement.getTotalLength();
  pathElement.style.strokeDasharray = `${length}`;
  pathElement.style.strokeDashoffset = `${length}`;
  return pathElement.animate(
    [
      { strokeDashoffset: length },
      { strokeDashoffset: 0 },
    ],
    {
      duration: options.duration ?? 1500,
      easing: options.easing ?? 'ease-in-out',
      delay: options.delay ?? 0,
      fill: 'forwards',
    }
  );
}

export function animateSVGGroup(
  elements: SVGElement[],
  staggerMs = 100
): Animation[] {
  return elements.map((el, i) =>
    el.animate(
      [
        { opacity: 0, transform: 'translateY(20px)' },
        { opacity: 1, transform: 'translateY(0)' },
      ],
      {
        duration: 500,
        delay: i * staggerMs,
        easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
        fill: 'forwards',
      }
    )
  );
}

GSAP לסצנות מורכבות

GSAP מספק שליטה מקסימלית על אנימציות SVG, במיוחד עבור צירי זמן מורכבים:

// components/AnimatedDiagram.tsx
import { useEffect, useRef } from 'react'
import { gsap } from 'gsap'
import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin'

gsap.registerPlugin(DrawSVGPlugin)

export function AnimatedDiagram() {
  const svgRef = useRef<SVGSVGElement>(null)

  useEffect(() => {
    if (!svgRef.current) return

    const ctx = gsap.context(() => {
      const paths = svgRef.current!.querySelectorAll('.data-path')
      const nodes = svgRef.current!.querySelectorAll('.node')
      const labels = svgRef.current!.querySelectorAll('.label')

      const tl = gsap.timeline({ repeat: -1, repeatDelay: 2 })

      tl.from(paths, {
        drawSVG: '0%',
        duration: 1.5,
        stagger: 0.3,
        ease: 'power2.inOut',
      })
        .from(nodes, {
          scale: 0,
          opacity: 0,
          transformOrigin: 'center',
          stagger: 0.15,
          ease: 'back.out(2)',
          duration: 0.5,
        }, '-=0.5')
        .from(labels, {
          opacity: 0,
          y: 10,
          stagger: 0.1,
          duration: 0.4,
        }, '-=0.3')
    }, svgRef)

    return () => ctx.revert()
  }, [])

  return (
    <svg ref={svgRef} viewBox="0 0 400 300">
      <path className="data-path" d="M 50,150 C 150,50 250,50 350,150" stroke="#3b82f6" strokeWidth="2" fill="none" />
      <circle className="node" cx="50" cy="150" r="8" fill="#3b82f6" />
      <circle className="node" cx="200" cy="80" r="8" fill="#8b5cf6" />
      <circle className="node" cx="350" cy="150" r="8" fill="#3b82f6" />
      <text className="label" x="50" y="170" textAnchor="middle" fontSize="12">Начало</text>
      <text className="label" x="350" y="170" textAnchor="middle" fontSize="12">Конец</text>
    </svg>
  )
}

נגישות וביצועים

עבור אנימציות דקורטיביות, השתמשו ב-aria-hidden="true"; עבור אינפורמטיביות, הוסיפו aria-label ו-<title>. התאמה ל-prefers-reduced-motion היא חובה. לפי המדידות שלנו, הוספת will-change: transform ו-translateZ(0) מפחיתה ריפויים (repaints) ב-40% וחוסכת עד 30% מזמן העיבוד במכשירים ניידים.

אופטימיזציה: הגבילו את מספר האובייקטים המונפשים בו-זמנית ל-10–15, החליפו stroke-dashoffset ב-width/height היכן שאפשר. זה חשוב במיוחד עבור אנימציות אייקוני SVG—ב-95% מהמקרים, CSS או SMIL מספיקים.

השוואת שיטות אנימציה

מה כלול בעבודה

• ניתוח משימה עם מדידת ביצועים.
• בחירת טכנולוגיה אופטימלית (SMIL/CSS/JS/GSAP) עם נימוקים.
• פיתוח אב-טיפוס ב-Figma.
• יישום עם תמיכה בנגישות ו-prefers-reduced-motion.
• אופטימיזציה של LCP, CLS, FPS.
• בדיקות ב-Chrome, Firefox, Safari (iOS ו-Android).
• אינטגרציה לפרויקט שלך (React, Vue, Angular, או סטטי).
• קבצי SVG, CSS, JS/TS מקוריים ותיעוד.
• חודש תמיכה לאחר המסירה.

תהליך ולוחות זמנים

1. ניתוח משימה — הגדרת מטרת האנימציה, קהל היעד והדפדפנים.
2. בחירת טכנולוגיה — בהתבסס על דרישות ביצועים ומורכבות.
3. עיצוב — יצירת אב-טיפוס ב-Figma.
4. יישום — קוד באמצעות SMIL/CSS/JS/GSAP.
5. אופטימיזציה — בדיקת LCP, CLS, FPS, התאמה ל-prefers-reduced-motion.
6. בדיקות — הרצה ב-Chrome, Firefox, Safari ב-iOS ו-Android.
7. אינטגרציה — שילוב בפרויקט שלך (React, Vue, Angular, או סטטי).
8. מסירה — מתן מקורות, תיעוד וחודש תמיכה.

עלות הפיתוח נקבעת באופן אישי לאחר ניתוח. צרו קשר כדי להעריך את הפרויקט שלכם—נכין הצעה מסחרית תוך 2 ימי עסקים. הזמינו אנימציית SVG במפתח אחד. קבלו ייעוץ כבר עכשיו.