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

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

לפני שמתחילים,חשוב לציין!

במאמר אני כותב את ההסבר על האנימציה  בלי prefix.
על מנת שזה יעבוד בכל הדפדפנים התומכים יש לכתוב את כל צורות ה prefix. לדוגמא:

דוגמא 1:

דוגמא 2:

 

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

אז בואו נתחיל!

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

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

seezers-psdreview

 

לינק להורדת התמונה של הפריימים של מספריים

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

HTML Syntax

CSS Syntax

חשבתי לעצמי, איזה יופי סיימתי עם החלק הראשון. רק שאז הופתעתי מהתוצאה שהתקבלה!  אומנם היתה אנימציה בין 2 התמונות, אבל בהדרגתיות, כלומר התמונות התחלפו, אבל באנימציה, ואני רק רוצה להחליף ביניהם באיזשהוא שלב באמצא.
התחלתי לחקור את הנושא, גם שכבר ראיתי דוגמא שעובדת באינטרנט, לקח לי קצת זמן להבין מה אני בעצם רואה, שזה בעצם הסוד של אנימציות בframes, ולא סתם להעביר אלמנט ממקום למקום.
הפיתרון לבעיה, די פשוט, במקום לתת לאנימציה שלי 2 נקודות בציר האנימציה, אני יתן לה 4 נקודות בציר האנימציה.
- נקודה אחת עד נקודה שניה תציג את התמונה הראשונה, מ 0 אחוז עד  49.9 אחוז בציר הזמן,
- נקודה שניה עד נקודה שלישית , נבצע את החלפת התמונה, מ 49.9 אחוז בציר הזמן עד 50 אחוז, ופה החלק החשוב!, החלפת התמונה מתבצעת בפרק זמן של 0.1 אחוז, וע”י כך נמנע הריצוד בין שתי התמונות.
- נקןדה שלישית עד נקודה רביעית, מ 50 אחוז עד 100 אחוז בציר הזמן , תפקידה להשאיר לנו את התמונה השניה מוצגת 50 אחוז מהזמן.
קוד ה CSS של האנימציה לפי מה שהסברתי, והאחוזים בנקודות ציר האנימציה שתיארתי.
CSS Syntax

את החלק הראשון והקשה של האנימציה סיימנו! – דוגמא לתוצאה של האנימציה

שלב שני – הוספת אנימציה של תזוזה ממקום למקום בדף. זה בנוי על הבסיס מה שהסברתי בפוסט הקודם של האנימציות (אנימציות ב CSS3).
כדי לשחק עם המיקום של המספריים בדף, הגדרתי/הוספתי CSS של position absolute לאלמנט המספריים, והגדרות מיקום לאיזור השמאלי בדף.
בנוסף היכנתי keyframe פשוט של אנימציה שתיקח את המספריים מצד שמאל לצד ימין.
CSS Syntax

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

אז איך כותבים את זה? מאוד פשוט.
לאלמנט שקורא לאנימציה, ניתן לשרשר כמה keyframes (כמה אנימציות), וע”י כך ליצור אנימציות מורכבות.
העתקתי בדוגמא שלפנינו את הקריאה לשורת האנימציה שכתבנו מקודם, וצירפתי לה(בחלק המודגש) את הkeyframes של התזוזה.(move).

CSS Syntax

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

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

ע”י הוספה של אפקטים נוספים, כגון מתן תמונת רקע, ושינויי transform קלים, ניתן לשפר את האנמציה.

דוגמא עם שינויים ותוספות קלים שהכנתי.

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

 

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

    האימייל לא יוצג באתר. (*) שדות חובה מסומנים

    תגי HTML מותרים: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">