שימוש ב anime.js ליצירת אנימציות JavaScript

הספרייה Anime.js היא מנוע Javascript קל משקל ליצירת אנימציות. הוא תומך בכל הדפדפנים המודרנים ומאפשר ליצור אנימציות על כל תכונת CSS, על SVG ועל ערכים של JavaScript. אותן אנימציות יכולות להוסיף אינטראקטיביות ועניין לאתר ובדרך זו לשפר את חווית המשתמש.

במדריך בסיסי זה אסביר על הספרייה Anime.js ונראה כיצד להשתמש בזו בכדי ליצור אנימציות שונות.

כיצד להשתמש ב anime.js

Anime.js מספקת API פשוט לביצוע אנימציות על אלמנטים. בתור התחלה עליכם ליצור אובייקט של Anime:

const animeObject = anime({
  /* animation properties */
});

ולאחר מכן להגדיר את תכונות האנימציה. האנטומיה של תכונות האנימציה נראית כך:

{
/* Animation Targets: div, .box, #img, etc... */
/* Animatable Properties: height, opacity, color, translateX, etc ... */
/* Property Parameters: duration, delay, easing, etc... */
/* Animation Properties: loop, direction, autoplay, etc... */
}

לדוגמה, כל מה שאתם צריכים על מנת לבצע אנימציה על div כלשהו בעל המזהה box הוא הקוד הבא:

anime({
  targets: '#box',
  translateX: -200,
});

ניתן פשוט לעשות זאת בצעד אחד בצורה הבאה:

const animeObject = anime({
    /* animation properties */
    targets: '#box',
    translateX: -200,
});

התוצאה של קוד זה תוביל לאנימציה הבאה:

בואו ניתן מבט על אפשרויות האובייקט של Anime.js בהקשר לדוגמה זו:

Targets – קביעת האלמנטים עליהם האנימציה תפעל

אנו משתמשים ב targets על מנת לומר ל Anime על אילו אלמנטים בעמוד יש לבצע את האנימציה. targets הוא תכונה של האובייקט בדיוק כשאר התכונות עליהן ניתן מבט בסעיף הבא.

ניתן לטרגט אלמנטים בצורה מאד פשוטה, הנה מספר אפשרויות ודוגמאות:

• box# – מתייחס לאלמנט עם מזהה (ID) בשם box.
• box. – מתייחס לכל האלמנטים עם הקלאס box.
• ('document.getElementById('box – מתייחס לכל האלמנטים ב DOM עם המזהה box.

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

מספר נקודות על פרמטרים ותכונות של Anime.js

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

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

אני מניח שזה קצת לא ברור אז נתייחס לדוגמה קונקרטית – אם נבקש לבצע translateX: 200 על אלמנט שנמצא (במצבו הנוכחי) 30px מימין יחסית לקונטיינר כלשהו, אז האלמנט יזוז 200px ממיקומו הנוכחי ימינה.

באתרים המיושרים לימין (RTL), יש להשתמש ב translateX: -200 בכדי שיזוז שמאלה.

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

translateX: [50, 200]

באפשרותכם כמובן גם להשתמש ביחידות מידה שונות:

translateX: '1rem',
translateX: '2em',
translateX: '50%',
etc...

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

translateX: (elm, index, t) => index * 2

הנה דוגמה לשימוש בפונקציות:

תכונות האנימציה – Animation Properties

ישנם לא מעט תכונות שניתן לקבוע עבור אנימציות ולא נעבור על כולם. אך בואו נראה מספר תכונות שימושיות:

• loop: true – מבצע את האנימציה בלולאה. ניתן להוסיף מספר במרום הפרמטר true לקביעת מספר החזרות שיתבצעו.
• direction: alternate – מבצע את הפעולה ההפוכה לאחר סיום הפעולה ומחזיר את האלמנט/ים למצבם המקורי.
• duration – משך הזמן בו תתבצע האנימציה.
• delay – השהייה לפני תחילת האנימציה.
• backgroundColor – צבע הרקע של האלמנט בסיום האנימציה.
• borderRadius – רדיוס האלמנט בסיום האנימציה.
• opacity – שקיפות האלמנט בסיום האנימציה.
• easing – יחס השינוי לאורך זמן האנימציה.

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

<div id="cssProperties">
    <div class="el"></div>
</div>

var cssProperties = anime({
    targets: '#cssProperties .el',
    opacity: .7,
    loop: true,
    left: '0',
    duration: 2000,
    backgroundColor: '#ffe01b',
    borderRadius: ['0em', '2em'],
    easing: 'easeInOutQuad'
});

להמשך הדוגמאות אחסוך מכם את קוד ה HTML. אתם מוזמנים לתת מבט בדוקומנטציה של Anime.js בכדי לקבל דוגמאות מלאות.

var colors = anime({
    targets: '#colors .el',
    left: '0',
    loop: true,
    backgroundColor: [
        {value: '#4268b1'}, // Or #FFFFFF
        {value: 'rgb(255, 0, 0)'},
        {value: 'hsl(100, 60%, 60%)'}
    ],
    easing: 'linear',
    direction: 'alternate',
    duration: 2000
});

var CSStransforms = anime({
    targets: '#CSStransforms .el',
    loop: true,
    left: '0',
    duration: 2000,
    scale: 2,
    rotate: '1turn'
});

var specificPropertyParameters = anime({
    targets: '#specificPropertyParameters .el',
    loop: true,
    translateX: {
        value: -250,
        duration: 800
    },
    rotate: {
        value: 360,
        duration: 1800,
        easing: 'easeInOutSine'
    },
    scale: {
        value: 2,
        duration: 1600,
        delay: 800,
        easing: 'easeInOutQuart'
    },
    delay: 250 // All properties except 'scale' inherit 250ms delay
});

var functionBasedDuration = anime({
  targets: '#functionBasedDuration .el',
  translateX: 250,
  direction: 'alternate',
  loop: true,
  duration: function(el, i, l) {
    return 1000 + (i * 1000);
  }
});

var elasticity = anime.timeline();
elasticity.add({
  targets: '#elasticity .elasticity-0', translateX: 250, offset: 0,
  duration: 3000,
  elasticity: 0,
})
.add({
  targets: '#elasticity .elasticity-100', translateX: 250, offset: 0,
  duration: 3000,
  elasticity: 100,
})
.add({
  targets: '#elasticity .elasticity-200', translateX: 250, offset: 0,
  duration: 3000,
  elasticity: 200,
})
.add({
  targets: '#elasticity .elasticity-300', translateX: 250, offset: 0,
  duration: 3000,
  elasticity: 300,
})
.add({
  targets: '#elasticity .elasticity-400', translateX: 250, offset: 0,
  duration: 3000,
  elasticity: 400,
})
.add({
  targets: '#elasticity .elasticity-500', translateX: 250, offset: 0,
  duration: 3000,
  elasticity: 500,
})
.add({
  targets: '#elasticity .elasticity-600', translateX: 250, offset: 0,
  duration: 3000,
  elasticity: 600,
})
.add({
  targets: '#elasticity .elasticity-700', translateX: 250, offset: 0,
  duration: 3000,
  elasticity: 700,
})
.add({
  targets: '#elasticity .elasticity-800', translateX: 250, offset: 0,
  duration: 3000,
  elasticity: 800,
})
.add({
  targets: '#elasticity .elasticity-900', translateX: 250, offset: 0,
  duration: 3000,
  elasticity: 900,
})
.add({
  targets: '#elasticity .elasticity-1000', translateX: 250, offset: 0,
  duration: 3000,
  elasticity: 1000,
});

var morphing = anime({
  targets: '#morphing .polymorph',
  points: [
    { value: '70 41 118.574 59.369 111.145 132.631 60.855 84.631 20.426 60.369' },
    { value: '70 6 119.574 60.369 100.145 117.631 39.855 117.631 55.426 68.369' },
    { value: '70 57 136.574 54.369 89.145 100.631 28.855 132.631 38.426 64.369' },
    { value: '70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369' }
  ],
  easing: 'easeOutQuad',
  duration: 2000,
  loop: true
});

אני מאמין שדוגמאות אלו מספקות בכדי לגרום לכם להבין את היכולות של Anime.js.

לסיכום

במדריך ראינו כמה פשוט ליצור אנימציות חלקות ומגניבות באמצעות מספר שורות Javascript ובעזרת Anime.js. ישנם המון פיטצ׳רים נוספים אותם לא הזכרנו בפוסט זה כמו timelines, keyframes וכדומה.

כמובן שישנם גם מתודות לשימוש כגון stop, play, restart וכדומה איתם יצרנו את כפתורי השליטה באנימציה מעל דוגמה בפוסט.

יצא לכם להשתמש בספרייה זו? עשיתם איתה משהו מגניב? שתפו אותנו בתגובות כי נשמח לראות לאן לקחתם את זה בעצמכם… 🙂