CSS לעומת אנימציות JavaScript

אפשר להוסיף אנימציה באמצעות CSS או JavaScript. באיזה מהם כדאי להשתמש ולמה?

פול לואיס

סם ת'ורוגוד

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

סיכום

• כדאי להשתמש באנימציות CSS כדי לבצע מעברים פשוטים יותר ב-one-shot, כמו החלפת מצבי רכיבים בממשק המשתמש.
• אפשר להשתמש באנימציות JavaScript כדי להוסיף אפקטים מתקדמים כמו פסילה, עצירה, השהיה, הרצה אחורה או האטה.
• אם תבחרו להנפיש באמצעות JavaScript, השתמשו ב-Web Animations API או באיזו מסגרת מודרנית שאתם מתמצאים בה.

ניתן ליצור את רוב האנימציות הבסיסיות באמצעות CSS או JavaScript, אבל משך המאמץ והזמן משתנים (ראו גם ביצועים של CSS לעומת JavaScript). לכל אחת יש יתרונות וחסרונות, אבל ריכזנו כאן הנחיות מומלצות:

• כדאי להשתמש ב-CSS אם יש לכם רכיבי ממשק משתמש עם מצבים קטנים יותר שעומדים בפני עצמם. מעברים ואנימציות ב-CSS הם אידיאליים להוספת תפריט ניווט מהצד או להצגת הסבר קצר. יכול להיות שבסופו של דבר תשתמשו ב-JavaScript כדי לשלוט במצבים, אבל האנימציות עצמן יופיעו ב-CSS.
• מומלץ להשתמש ב-JavaScript כשנדרשת לכם שליטה רבה על האנימציות. ממשק ה-API של אנימציות באינטרנט הוא גישה המבוססת על תקנים, הזמינה כיום ברוב הדפדפנים המודרניים. כך נוצרים אובייקטים אמיתיים, אידיאליים לאפליקציות מורכבות מוכוונות אובייקטים. JavaScript שימושי גם כשצריך לעצור, להשהות, להאט או להפוך את האנימציות.
• השתמשו ב-requestAnimationFrame ישירות כשרוצים לתזמר סצנה שלמה באופן ידני. זוהי גישה מתקדמת של JavaScript, אבל היא יכולה להיות שימושית אם אתם בונים משחק או מציירים על בד ציור HTML.

לחלופין, אם אתם כבר משתמשים במסגרת JavaScript שכוללת פונקציונליות אנימציה, כמו השיטה .animate() של jQuery או GreenSock's TweenMax, יכול להיות שיהיה לכם נוח יותר להשתמש בה באנימציות.

יצירת אנימציה באמצעות CSS

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

בהמשך מוצג מספר CSS שמעביר רכיב 100px גם בציר ה-X וגם בציר Y. הפעולה מתבצעת באמצעות מעבר של CSS שמוגדר להימשך 500ms. כשמוסיפים את המחלקה move, הערך של transform משתנה והמעבר מתחיל.

.box {
  transform: translate(0, 0);
  transition: transform 500ms;
}

.box.move {
  transform: translate(100px, 100px);
}

רוצים לנסות?

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

אם כמו בקטע הקוד שלמעלה, אתם יוצרים מחלקות CSS נפרדות כדי לנהל את האנימציות, אתם יכולים להשתמש ב-JavaScript כדי להפעיל ולהשבית כל אנימציה:

box.classList.add('move');

כך נוצר איזון נחמד לאפליקציות. ניתן להתמקד בניהול מצבים באמצעות JavaScript ופשוט להגדיר את המחלקות המתאימות ברכיבי היעד, כך שהדפדפן יטפל באנימציות. אם תרדו במסלול הזה, תוכלו להאזין לאירועי transitionend ברכיב, אבל רק אם ניתן לוותר על התמיכה בגרסאות ישנות יותר של Internet Explorer. גרסה 10 הייתה הגרסה הראשונה שתמכה באירועים האלה. כל שאר הדפדפנים תמכו באירוע במשך זמן מה.

קוד ה-JavaScript הנדרש כדי להאזין לסיום המעבר נראה כך:

var box = document.querySelector('.box');
box.addEventListener('transitionend', onTransitionEnd, false);

function onTransitionEnd() {
    // Handle the transition finishing.
}

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

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

.box {
  animation-name: movingBox;

  animation-duration: 1300ms;

  animation-iteration-count: infinite;

  animation-direction: alternate;
}

@keyframes movingBox {
  0% {
    transform: translate(0, 0);
    opacity: 0.3;
  }

  25% {
    opacity: 0.9;
  }

  50% {
    transform: translate(100px, 100px);
    opacity: 0.2;
  }

  100% {
    transform: translate(30px, 30px);
    opacity: 0.8;
  }
}

רוצים לנסות?

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

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

צור אנימציה באמצעות JavaScript וממשק ה-API של אנימציות באינטרנט

בהשוואה, יצירת אנימציות באמצעות JavaScript מורכבת יותר מכתיבה של מעברים או אנימציות ב-CSS, אבל בדרך כלל היא נותנת למפתחים הרבה יותר כוח. אפשר להשתמש ב-Web Animations API כדי ליצור אנימציה של מאפייני CSS ספציפיים או כדי לבנות אובייקטים של אפקטים קומפוזביליים.

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

var target = document.querySelector('.box');
var player = target.animate([
    {transform: 'translate(0)'},
    {transform: 'translate(100px, 100px)'}
], 500);
player.addEventListener('finish', function() {
    target.style.transform = 'translate(100px, 100px)';
});

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

רוצים לנסות?

ה-Web Animations API הוא תקן חדש יחסית מ-W3C. הוא נתמך במקור ברוב הדפדפנים המודרניים. לדפדפנים מודרניים שלא תומכים בהם, יש polyfill שניתן להשתמש בו.

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