מדריך 18 · Phase 4 · Motion Graphics

UI/UX Animation —
הנפשת ממשקים, הנישה החמה.

כל מעצב UI מודרני יודע שאפליקציה ללא תנועה מרגישה דדית. כפתור שלא מגיב, מסך שמתחלף בלי מעבר, איקון שלא חי — כל אלה איתותים שהמוצר זול. UI Animation זו הנישה שצמחה בעשור האחרון, ויותר ויותר חברות מחפשות מומחים. במדריך הזה — איך לעשות את זה נכון באפטר, למסור ל-developer, ולפעמים לייצא ל-Lottie.

זמן קריאהכ-19 דקות רמהבינוני דרישות קדם03, 14 תוצרbutton click animation

פרק 01 · למה זה חם

הנישה שצמחה בעשור

UI Animation לא היה קיים בתור תפקיד נפרד לפני 2013. היום זה התפקיד שכל סטארט-אפ מחפש. מה השתנה?

iOS 7 (2013) הציג את האנימציות העדינות שהפכו את הצופה למאמין שהאפליקציה "חיה". מאז, Apple, Google, ו-Microsoft השקיעו בכלים (Material Design Motion, Apple HIG Animation) שהפכו UI Animation לחלק מהותי של product design. Lottie (2017) פתחה את האפשרות לכל אפליקציה לכלול אנימציות מורכבות בקוד.

מה אומרים החוקרים

תפיסת מהירות — אפליקציה עם microinteractions טובים מורגשת מהירה ב-30%, גם כשמהירות ההורדה זהה.
אמינות — אנימציה עדינה = "המוצר עובד". בלי אנימציה = "האם זה תקול?".
הוראת שימוש — תנועה מנחה את העין ל-CTA. התשובה: אין צורך בטקסט הוראה.
רגש — אפליקציה שמגיבה ב-bounce קטן בלחיצה = טוב. בלי תגובה = רובוטי.

איפה האנימציה

5 המקומות העיקריים: (1) Splash / loading screens, (2) Button states (hover, press, success), (3) Page transitions, (4) Scroll behavior, (5) Notifications & toasts. Microinteractions אלה הם 80% של עבודת UI Animation.

פרק 02 · Anatomy

פירוק של microinteraction

כל microinteraction בנוי מ-4 שלבים. הבנה של 4 השלבים = יכולת לתכנן כל אנימציה ב-UI.

שלב	מה קורה	זמן
1. Trigger	המשתמש עושה משהו (קליק, hover, scroll)	0ms
2. Rules	המערכת מחשבת מה לעשות	0-50ms
3. Feedback	האנימציה שלכם — ויזואלית, צלילית, פיסית	200-400ms
4. Loops/Modes	השינוי הקבוע (אם יש)	קבוע

דוגמה — like button של Twitter/X

Trigger: קליק על אייקון הלב.
Rules: המערכת מאמתת לוגין, מסמנת בבסיס נתונים.
Feedback: הלב גדל, הופך לאדום, מסתובב, חלקיקים מתפוצצים, חוזר לגודל רגיל. 400ms של חגיגה.
Loop: הלב נשאר אדום (state עדכון).

מסע הלקוח

במקום לשאול "איך אני מנפיש את הכפתור הזה" — שאלו "מה הזרימה של ה-action הזה". האנימציה צריכה לתמוך בזרימה, לא להיות אסתטיקה לעצמה.

פרק 03 · Easing for UI

Curves שונות מאנימציה רגילה

Easing ל-UI הוא לא אותו Easy Ease של אנימציה גרפית. ל-UI יש curves ייחודיים — Material Standard, Apple Spring, Sharp Curves.

3 ה-curves של UI מודרני

Standard / Material — Cubic-bezier(0.4, 0.0, 0.2, 1). מהיר מההתחלה, מאט בסוף. רוב המעברים ב-UI.
Decelerate / Enter — Cubic-bezier(0.0, 0.0, 0.2, 1). מהיר ומאט באטיות. כניסה של אלמנט למסך.
Accelerate / Exit — Cubic-bezier(0.4, 0.0, 1, 1). מאט בהתחלה ומהיר בסוף. יציאה של אלמנט.

איך מגדירים באפטר

סמנו keyframe.
קליק ימני → Keyframe Velocity.
הגדירו את ערכי Influence ו-Speed לפי ה-curve הרצוי.

עוד יותר טוב — Graph Editor. שם רואים את ה-curve ויזואלית ויכולים לעצב אותו ידנית. (פרק 04 במדריך 03 — Keyframes).

Apple Spring — הסוד של iOS

iOS משתמש ב-spring physics, לא בעקומות bezier. התוצאה: bounce קל בכל אנימציה. באפטר אפשר לדמות עם expression:

// Spring effect — bouncy ending
n = 0;
if (numKeys > 0) {
  n = nearestKey(time).index;
  if (key(n).time > time) n--;
}
if (n == 0) value;
else {
  t = time - key(n).time;
  amp = .05; freq = 2.0; decay = 8.0;
  value + velocityAtTime(key(n).time - .001) *
    (amp * Math.sin(freq * t * Math.PI * 2)
    / Math.exp(decay * t));
}

משך מומלץ ב-UI

Microinteractions: 200-400ms. מעברים בין מסכים: 250-500ms. Loading animations (זמן ארוך): 1-2s loop. אנימציה ארוכה מ-500ms ב-UI מרגישה איטית.

פרק 04 · Figma → After Effects

הזרימה המקצועית

מעצבי UI עובדים ב-Figma. אנימטורים עובדים באפטר. הקסם הוא להעביר את העיצוב מ-Figma לאפטר בצורה שמשמרת layers ו-vectors.

שלוש שיטות

1. AEUX Plugin (חינם, עדיף)

התקנת Plugin ב-Figma — חיפוש "AEUX" ב-Figma Community.
בחירת frames ב-Figma → Run AEUX → "Send to AE".
באפטר — נפתח Comp עם כל השכבות, צבעים, ו-text מנוצלים.
השכבות שמירה — אפשר להנפיש כל אחד בנפרד.

2. Export PNG / SVG (פשוט אבל מוגבל)

ב-Figma → Export → PNG / SVG.
ייבוא לאפטר.
אם SVG — Layer → Create Shapes from Vector Layer (הופך למוטיון-vector).
חסרון: אין שכבות מקוריות. צריך לייצא כל אלמנט בנפרד.

3. Direct copy-paste (Figma 2024+)

ב-Figma — סמנו אלמנט, Ctrl+C.
באפטר — Ctrl+V. עובר כ-Shape Layer.
Limitation: רק וקטור פשוט. לא תמונות.

המתודה המקצועית

AEUX זה הכלי שמעצבי UI מקצועיים משתמשים בו. הוא משמר את כל מבנה ה-frames וה-groups של Figma. מי שעובד עם תקציב — לא מנסה אחרת.

פרק 05 · Lottie Export

אנימציה לאפליקציה אמיתית

אנימציה באפטר היא MP4 או GIF. אבל ב-iOS / Android / Web, MP4 כבד וגדול. Lottie פתר את זה — פורמט JSON שעולה כסוקריפט במכשיר.

איך עובד

אפטר מייצא את האנימציה לפורמט JSON.
הקובץ מכיל את כל ה-vectors, ה-keyframes, וה-easing.
ב-iOS / Android / Web — ספריית Lottie קוראת את ה-JSON ומציגה את האנימציה במקור.
גודל קובץ: 5-50KB (במקום MB ל-MP4).
איכות: וקטורית — רזולוציה אינסופית.

איך מייצאים

התקנת Plugin "Bodymovin" באפטר (חינם — מ-aescripts.com).
Window → Extensions → Bodymovin.
בחרו את הקומפוזיציה לייצא.
Settings → Export Mode = Standard / Demo.
Render. נוצר קובץ JSON.

מגבלות חשובות

וקטור בלבד — Shape Layers, Text. לא Footage / 3D / Effects כבדים.
Effects מוגבלים — רק Drop Shadow ו-Gradient עוברים. אחרים: לא.
Expressions מוגבלים — חלק מ-expressions לא עוברים. בדקו לפני סיום.

אסטרטגיית עבודה

אם המטרה היא Lottie — תכננו את האנימציה מהתחלה במגבלות שלו. השתמשו רק ב-Shape Layers (לא בבתמונות), Easy Ease בלבד (לא expressions מורכבים), צבעים סטטיים. תכנון מראש = הצלחה ביצוא.

פרק 06 · התרגיל

Button Click Animation מקצועית

בונים אנימציה של כפתור עם 3 states (rest, hover, success). 8 שלבים — אנימציה ברמה של app מודרני.

THE EXERCISE · BUTTON STATES

הכנה

Comp 800×600 (mockup). רקע אפור #f5f5f5. Solid Layer במרכז 200×60px בכחול #4db8ff עם פינות מעוגלות (Mask Path → Round Corners).

טקסט

"Sign Up" Heebo Bold 24px לבן, מירכוז על הכפתור.

Hover state (ב-1s)

Scale: keyframe 100% ב-0:00, 105% ב-0:01:00. השכבה גדלה קצת — מסמן hover.

Click — Press

Scale: ב-0:01:10, 95% (כפתור "נלחץ"). ב-0:01:15, חזרה ל-100% (springy). F9 על שלושת ה-keyframes.

Loading state

ב-0:01:20, הטקסט נעלם (Opacity 100→0%, 5 frames). שכבה חדשה: Spinner — Shape Layer Ellipse עם stroke, Trim Paths animation. נראה ספינר טוען.

Success state (ב-3s)

הכפתור משתנה לירוק. Fill color expression: linear(time, 3, 3.5, [0.30, 0.72, 1, 1], [0.49, 0.85, 0.34, 1]). שני שלוש frames.

Checkmark

Shape Layer חדש — V קטן בלבן. Trim Paths animation מ-0%→100% ב-0.3 שניות. מופיע אחרי שהכפתור הירוק.

בדיקה ב-RAM Preview

מקבילים: 5 שניות שמראים את כל הזרימה — rest → hover → click → loading → success. כל microinteraction עם easing נכון. נראה כמו app אמיתי.

להעביר ל-Developer

אחרי שהאנימציה מוכנה, ייצוא ל-Lottie JSON (Bodymovin). ה-developer יקבל קובץ של 10KB שיציג את כל האנימציה במכשיר עם FPS מושלם, בכל רזולוציה, בלי לפלוט CPU.

סיכום

מה עכשיו יודעים

UI Animation זו נישה צומחת. 4 השלבים של microinteraction (Trigger → Rules → Feedback → Loops) הם הבסיס. Easing ייחודי ל-UI (Material Standard, Apple Spring) מפריד בין מקצועי לחובבני. AEUX מ-Figma ו-Lottie ל-export הם הכלים שמחברים את עבודת האנימציה לעולם הפיתוח.

עם השלמת מדריך 18 — סיימתם את כל מסלול Motion Graphics (14, 15, 16, 17, 18). ארגז הכלים שלכם מלא: Shape Layers, Logo Reveals, Transitions, Backgrounds, ו-UI Animation. אתם יכולים לבנות כל סוג של גרפיקה במוטיון.

פרודאקציה לאפליקציה

בונים סדרת אנימציות UI לאפליקציה? הסקריפטים שלנו ב-ae.bdnhost.net מאפשרים batch export ל-Lottie של כמה Comps בלחיצה. לסטודיו פיתוח שמספק 20-50 microinteractions לפרויקט — הבדל של שעות.