מדריך אנימציות באנגולר – angular animation

כמפתח פרונט אנד שיודע לכתוב אנימציות בCSS וגם בJS, ורוצה לגשת לכתוב אנימציות באנגולר, יופתע וגם לא מעט, כי אנגולר פיתחו מכניזם משלהם (כיעה לפריימוורק). ואני חייב לומר שזה היה דיי מעצבן. מכוון שהייתה לי ציפיה כזו שהידע הקודם שלי יעזור לי, אך אנימציות באנגולר זה קוד מסורבל ולא אינטואיטיבי. אבל יש תקווה, ברגע שתשקיעו קצת זמן ותזרמו עם הגישה של אנגולר, אתם תגלו דיי מהר שהשד לא כזה נורא, ואפילו יותר מזה, השד הזה מתוכם להפליא ויכול לספק אנימציות דינאמיות שישמשו אתכם בכל פרויקט אנגולר שלכם (שמרו את האנימציות שלכם באיזה גיט כי לרוב אנימציות חוזרות על עצמן בפרוייקטים). בשביל להתחיל ברגל ימין את הכניסה שלכם לכתיבת חושב שעברו כמה שלבים של הבנה:

1. המכניזם של אנימציות
2. מבנה הבסיסי של אנימציה – והיכרות עם הפיצ'רים של מודול angular/animations@
3. העברת מידע לאנימציה דינאמית
4. חקר של דוגמאות וכתיבת אנימציות בעצמכם

המכניזם של אנימציות באנגולר

אנגולר אנימציות משתמש במודול שנקרא BrowserAnimationModule המודול הזה מאפשר לנו להפעיל אנימציות על רכיבים בעזרת הגדרה ייחודית כך שאנגולר ידע כי יש לרנדר אפקט עם טריגר ספציפי (שם של הטריגר). על אותו האלמנט, וכן להבין איזה סטייט יופעל בהתאם ללייף-סייקל. בנושא הלייף-סייקל, בהתאם לטריגר סטייט, למשל enter, ברגע שהרכיב יעלה האנימציה תתחיל לעבוד, בשלב של oninit (מייד לאחר oninit) ובסטייט של leave מייד לאחר ondestroy. כמו כן לא תמיד סטייט יהיה קשור לעזיבה\הופעה של הרכיב, וגם יכול להיות עבור ROUTES וכל רק על "רכיבים". בהמשך נסקור את כל אלו.

מבנה בסיסי של אנימציה

לפני שאציג מבנה בסיסי של אנימציה בואו נעבור על הפיצ'רים השונים שמביא לנו המודול @angular/animations. יש לא מעט פיצ'רים, בטח לא אכסה את כולם אך כן את החשובים:

• trigger – מקבל שם לטריגר האנימציה ומערך של מצבים וטרנזישנים כדי להגדיר את האנימציה.
• state – מקבל שם עבור הסטייט וסטיילז שיש להחיל באופן מותנה במצב שצוין.
• style – איזה סטייל יופעל.
• transition – מפרט ומגדיר את המעבר וכיוונה בין המצבים השונים.
• animate – מדגיר את מאפייני האנימציה בCSS ואת משך הזמן.
• query – מגדיר על אילו אלמנטים וכמה מהם תופעל האנימציה.
• group – מאפשר להפעיל כמה אנימציות ביחד
• sequence – מאפשר להפעיל כמה אנימציות אחת אחרי השניה
• stagger – מאפשר להגדיר דיליי ומערך של אנימציות.
• keyframes – נוכל להגדיר מערך שמכיל כמה אנימציות גם בanimate בדומה לסעיפים האחרים שמוגדרים בquery.

בדוגמה שאציג, שתהיה בסיסית מאד, נראה כי מוגדר סטייט אחד לאנימציה, ו2 טרנזישנים , מה קורה שהרכיב יוצא ומה קורה שהרכיב עולה, אפשר לראות כי הסטייט מוגדר ל opacity 1 וטרנזישן של כניסה מתחיל מ0 ובקצב שהוגדר (time – נתוןו שאפשר לקבל מבחוץ וכך לייצר דינאמיות לאנימצה שלכם) יעלה הרכיב על למצב סטייט.

להלן אנימציה שעושה fade in out באנגולר:

import {
  animate,
  state,
  style,
  transition,
  trigger,
} from '@angular/animations';

export const fadeInOut = trigger('fadeInOut', [
  state(
    'in',
    style({
      opacity: 1,
    })
  ),
  transition('void => *', [style({ opacity: 0 }), animate('{{ time }}')]),
  transition('* => void', [animate('{{ time }}'), style({ opacity: 0 })]),
]);

העברת מידע לאנימציה דינאמית

כרגע ראינו שאפשר להגדיר משתנים בתוך האנימציה שלנו , בדוגמה ראינו כי משתנה time יכול להגיד מבחוץ, להלן הקוד מבחוץ לצורך הבנה מלאה של איך זה עובד:

<app-popup
      [@fadeInOut]="{
        value: toggle,
        params: { time: '1s ease-out' }
      }"
    ></popup>

אפשר לראות כי הוגדרה אנימציה לרכיב בשם של הטריגר, וטריגר מקבל אובייקט, אם value – שמוגדר כאן כ boolean וכך שולט במצבים השונים (במקרה שלנו יש סטייט אחד, בהתאם לvalue האנימציה יודעת להפעיל את הטרנזישן המתאים) , ובתוך params נוכל להגדיר משתנים ככל שנבחר ובכך לבנות אנימציות גנריות יותר.

כמו כן אפשר להעביר מידע לאנימציה כך שנגדיר אותה כפונקציה, ולהחזיר טריגר, למשל ניתן להגדיר אנימציה באופן הבא:

import {
  animate,
  state,
  style,
  transition,
  trigger,
} from '@angular/animations';

export const fadeInOut = (numFlips: number) => trigger('fadeInOut', [
  state(
    'in',
    style({
      opacity: 1,
    })
  ),
  transition('void => *', [style({ opacity: 0 }), animate('{{ time }}')]),
  transition('* => void', [animate('{{ time }}'), style({ opacity: 0 })]),
]);

חקר של דוגמאות וכתיבת אנימציות בעצמכם

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

בשביל לחקור את דוגמאות של קוד הכנתי פה מגוון של אנימציות פשוטות, תוכלו לחקור אותם וגם להעתיק אותם לפרויקטים שלכם ולהשתמש בהם – ספריית אנימציות באנגולר – קודקודיין

פוסטים קשורים:

מדריך אנימציות באנגולר מדריך אנימציות באנגולר – מתקדם SVG Animation – טריק נחמד ויעיל לאנימציה ב-SVG דרכים למימוש אנימציות בכל פרויקט שלכם