אפקטים נוזליים/בלוב: יישום SVG, CSS, WebGL

יישום אפקטים של נוזל/בלוב: SVG, CSS, WebGL

בפרויקט לפלטפורמת פינטק, הלקוח רצה רקע מונפש עם טיפות חיות. הגרסה הראשונה באמצעות CSS blur+contrast הובילה ל-LCP של 4.2 שניות ו-reflow מתמיד ב-iOS. כתבנו אותה מחדש ב-WebGL—LCP ירד ל-1.8 שניות, FPS עלה מ-25 ל-60. מצב זה אופייני: אפקטים טרנדיים יכולים בקלות להרוס ביצועים. במשך חמש שנים יישמנו יותר מ-50 פתרונות מונפשים עם אופטימיזציה ל-Core Web Vitals. בואו נפרק שלוש גישות עבודה: SVG morphing, CSS blur+contrast, ו-WebGL metaballs. נראה כיצד להימנע ממלכודות.

בעיות ופתרונות אופייניים

אנימציה מבוססת JavaScript גורמת ל-reflow, repaint אינטנסיבי, והידרדרות במכשירים ניידים עם FPS נמוך. מסוכן במיוחד הוא הטריק של CSS blur+contrast—הוא מאלץ את הדפדפן לבצע compositing של כל פריים, מה שהורג FPS באייפונים ישנים. השוואה: פתרונות WebGL מראים FPS גבוה פי שלושה בנייד בהשוואה למקבילות CSS באותה מורכבות ויזואלית. בחירת השיטה הנכונה היא המפתח להצלחה.

כיצד אנו פותרים בעיות אלו

אנו משתמשים ב-WebGL עבור morphings מורכבים ב-60 FPS אפילו במכשירים בינוניים. עבור רקעים פשוטים, SVG עם GSAP MorphSVG. דוגמה: בפרויקט פלטפורמת פינטק, החלפנו בלוב CSS ב-WebGL—LCP ירד מ-3.2 שניות ל-1.8 שניות, חיסכון במשאבי שרת עד 40% בשל הפחתת עומס CPU.

בלוב SVG עם נתיב מונפש

גרסה בסיסית: צורת SVG עם אנימציה של נקודות בקרה באמצעות JS. פשוט יותר להשתמש ב-GSAP MorphSVGPlugin:

import gsap from 'gsap'
import MorphSVGPlugin from 'gsap/MorphSVGPlugin'
gsap.registerPlugin(MorphSVGPlugin)

// Морфинг между путями
gsap.to('#blob-path', {
  morphSVG: '#blob-path-b',
  duration: 3,
  ease: 'sine.inOut',
  repeat: -1,
  yoyo: true,
})

בלוב CSS באמצעות filter: blur + contrast

טריק זול אך יעיל. מספר עיגולים עם blur, עטופים בקונטיינר עם import gsap from 'gsap' import MorphSVGPlugin from 'gsap/MorphSVGPlugin' gsap.registerPlugin(MorphSVGPlugin) // Морфинг между путями gsap.to('#blob-path', { morphSVG: '#blob-path-b', duration: 3, ease: 'sine.inOut', repeat: -1, yoyo: true, }) . בגבולות ה-blur של עיגולים חופפים, מופיע אפקט מיזוג נוזלי. שיטה זו קלה ליישום אך דורשת זהירות עם contrast(20) ומספר האלמנטים.

<div class="blob-container">
  <div class="blob blob--1"></div>
  <div class="blob blob--2"></div>
  <div class="blob blob--3"></div>
  <div class="blob blob--cursor"></div>
</div>

.blob-container {
  position: fixed;
  inset: 0;
  filter: blur(40px) contrast(20); /* contrast() — ключ эффекта */
}
.blob {
  position: absolute;
  border-radius: 50%;
  background: #7000ff;
}
.blob--1 {
  width: 300px;
  height: 300px;
  top: 20%;
  left: 30%;
  animation: blob-float-1 8s ease-in-out infinite alternate;
}
@keyframes blob-float-1 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(80px, -60px) scale(1.1);
  }
  100% {
    transform: translate(-40px, 40px) scale(0.9);
  }
}

ה-blob-cursor עוקב אחרי העכבר באמצעות JS עם אינטרפולציה חלקה.

נוזל WebGL באמצעות shader

שליטה מלאה בצורה, צבע, התנהגות—דרך GLSL. Shader המבוסס על פונקציית מרחק חתומה (SDF):

// Fragment shader — liquid metaballs
uniform float uTime;
uniform vec2 uMouse;
uniform vec2 uResolution;

float circle(vec2 p, vec2 center, float r) {
    return length(p - center) - r;
}

float smoothUnion(float d1, float d2, float k) {
    float h = clamp(0.5 + 0.5 * (d2 - d1) / k, 0.0, 1.0);
    return mix(d2, d1, h) - k * h * (1.0 - h);
}

void main() {
    vec2 uv = (gl_FragCoord.xy - uResolution * 0.5) / min(uResolution.x, uResolution.y);
    vec2 mouse = (uMouse - uResolution * 0.5) / min(uResolution.x, uResolution.y);

    vec2 p1 = vec2(sin(uTime * 0.7) * 0.3, cos(uTime * 0.5) * 0.2);
    vec2 p2 = vec2(cos(uTime * 0.4) * 0.25, sin(uTime * 0.8) * 0.25);
    vec2 p3 = mouse * 0.5;

    float d1 = circle(uv, p1, 0.18);
    float d2 = circle(uv, p2, 0.14);
    float d3 = circle(uv, p3, 0.12);

    float merged = smoothUnion(smoothUnion(d1, d2, 0.08), d3, 0.06);

    vec3 colorInner = vec3(0.4, 0.0, 1.0);
    vec3 colorRim = vec3(0.0, 0.8, 1.0);

    float fill = smoothstep(0.005, -0.005, merged);
    float rim = smoothstep(0.02, 0.0, merged) - smoothstep(0.0, -0.02, merged);

    vec3 color = mix(vec3(0.0), colorInner, fill);
    color += colorRim * rim * 0.8;

    gl_FragColor = vec4(color, fill + rim * 0.5);
}

מדוע WebGL עדיף לאנימציות מורכבות?

WebGL מבצע את כל החישובים על ה-GPU, ומקל על ה-CPU. זה חשוב במיוחד לאנימציות עם אלמנטים אינטראקטיביים רבים. בפרויקטים שלנו, פתרונות WebGL מראים TTFB נמוך פי שניים בהשוואה למקבילות CSS באותה מורכבות ויזואלית. WebGL נתמך על ידי כל הדפדפנים המודרניים, עם fallback לדפדפנים ישנים יותר.

איזו שיטה לבחור לפרויקט שלך?

תהליך העבודה

1. אנליטיקה — לימוד דרישות עיצוב, Core Web Vitals, דפדפנים נתמכים.
2. עיצוב — בחירת שיטה: SVG/CSS/WebGL, יצירת אב טיפוס ביצועים.
3. יישום — כתיבת קוד, בדיקה על מכשירים אמיתיים.
4. בדיקות — בדיקת FPS, LCP, CLS בנייד ובשולחן העבודה.
5. פריסה — אינטגרציה לפרויקט, הגדרת fallback לדפדפנים ישנים.

ציר זמן: מיום אחד (בלוב CSS) עד 7 ימים (WebGL metaballs). העלות מחושבת בנפרד לכל משימה. קבלו ייעוץ לפרויקט שלכם—נכין הצעה תוך התחשבות במדדים שלכם.

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

רשימת בדיקה: טעויות אופייניות ופתרונות

אנו מבטיחים שכל אפקט עובר ביקורת Core Web Vitals. נבחן את הפרויקט שלכם—צרו קשר במייל או במסנג'רים. המומחים המוסמכים שלנו עם ניסיון של 5+ שנים יכינו פתרון שלא יפגע בביצועים.