דרכים למימוש אנימציות בכל פרויקט שלכם

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

כלים למימוש אנימציות

ישנם 2 כלים שהייתי יכול להמליץ עליהם על מנת לקבל אנימציות דיי בקלות.

Framer motion – ספריית אנימציות build-in עבור Reactjs

כאחד שמאד מתחבר לreact מצאתי את הFramer motion כאחת הספריות השימושיות עבור פרויקטים שלי, ניתן לבנות אנימציות מורכבות תוך מימוש פשוט יחסית . כמו כן Framer motion הוא חלק מבין שירותים של Framer שמציע המון פתרונות עבור מעצבים ומפתחים. כמו כן יש תוסף מגניב שלהם עבור Figma שמאפשר גם למעצב להגדיר אנימציות עבור רכיבים ובקלות נוכל למשוך את האנימציה כרכיב מוכן של Framer motion.

המימוש הבסיסי הוא כך:

במקום לרשום div אבל כל תגית אחרת, תוכלו לעשות element>.motion> ואז להגדיר סט של props

import { motion } from "framer-motion"

export const MyComponent = () => (
  <motion.div
    animate={{
      scale: [1, 2, 2, 1, 1],
      rotate: [0, 0, 270, 270, 0],
      borderRadius: ["20%", "20%", "50%", "50%", "20%"],
    }}
  />
)

כמו כן אפשר לממש אנימציות מורכבות יותר אפשרויות של Drag and Drop וגם אפשרויות נוספות של התנהגויות לאובייקטים 3D עבור React Three Fiber.

GSAP – ספריית אנימציות ב JS שתתאים לכל פרויקט

ספריית אנימציות מבוססת JS . וותיקה מאד ועושה עבודה מעולה. מאפשרת לבנות אנימציות מורכבות ופשוטות בדרך אינטואיטיבית . יש דברים עם GSAP שאני מאד אוהב, לרוב אם אני צריך אנימציות מורכבות מאד אעדיף GSAP לדעתי וכמובן ניתן לשלב בכל בפרויקט מכל סוג שהוא.

gsap.to('#overLapping', {
                    opacity: 1,
                    repeat: 3,
                    yoyo: true,
                    duration: .4,

                    onComplete() {
                        gsap.to('#overLapping', {
                            opacity: 1,
                            duration: .4,

                            onComplete() {
                                // activate a new animation loop
                                initBattle();
                                animateBattle()
                                gsap.to('#overLapping', {
                                    opacity: 0,
                                    duration: .4,
                                })
                              }
                        })
                    },
                });

לקחתי חתיכה של GSAP בפרויקט של משחק, מה שקורה כאן זה בעצם אניצמיה שחוזרת על עצמה כך שנראה מסך שחור מהבהב, ואז בסיום ראשון נקבל מסך שחור מלא, ולאחר 0.4 שניות, בonComplete השני, ירוצו 2 פונקציות שמעלים אלמנטים נוספים למסך ולאחר מכן הרקע השחור יעלם עם opacity 0

הנה עוד דוגמה נחמדה שעשיתי לאחרונה עם GSAP :

סיכום front-end animation

אנימציות אינן בגדר המלצה, זה משהו שחייבים לדעת לממש, כמו כן יש אפשרויות שונות ומגוונות לאנימציות. למשל בangular אנימציות ממומשות בצורה אחרות , לטעמי קצת מורכבת, ועשיתי לא מעט אנימציות עם angular. כמו כן ישנן ספריות רבות שיקלו עליכם מאד, למשל הספריות שציינתי כאן (אם כי framer motion היא רק עבור react) וכמובן שכדי להעמיק את הידע שלכם באנימציות עם css כי ישנם המון אנימציות קטנות שתוכלו לממש בקלות עם CSS כך שזה יהיה הרבה יותר פשוט לפרויקט, ללא ספריות מיותרות או קוד JS שלרוב ידרוש יותר משאבים מאשר CSS. בהצלחה! 🐊💓

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

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