10 באוק׳ 2012

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

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







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

@keyframes mymove{}
@-moz-keyframes mymove /* Firefox */{}
@-webkit-keyframes mymove /* Safari and Chrome */{}
@-o-keyframes mymove /* Opera */{}
 דוגמא 2:
animation-name:mymove;
-moz-animation-name:mymove; /* Firefox */
-webkit-animation-name:mymove; /* Safari and Chrome */
-o-animation-name:mymove; /* Opera */

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

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

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



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

HTML Syntax
<div class="seezer"></div>

CSS Syntax
.seezer{
  background: url(seezers.png) no-repeat;
  height: 40px;
  width: 57px;  
  animation: seezer  300ms;
  animation-iteration-count: infinite; 
  animation-timing-function :linear; 
}

@keyframes seezer {
      0% {background-position:0 0;}   /*first Image in sprite*/   
      50% {background-position:0 -40px;}   /*second Image in sprite*/   
}

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

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

קוד ה CSS של האנימציה לפי מה שהסברתי, והאחוזים בנקודות ציר האנימציה שתיארתי.
CSS Syntax
@keyframes seezer
{
      0%{background-position:0 0;}      
      49.9%{background-position:0 0;}     
      50%{background-position:0 -40px;}
      100%{background-position:0 -40px;}      
}
את החלק הראשון והקשה של האנימציה סיימנו! - דוגמא לתוצאה של האנימציה

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

.seezer{ 
  position: absolute;
  left: 0;
  top:100px; 
}

@keyframes move {
  0% {left:0;}     
  100%{left:105%;}
}


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

אז איך כותבים את זה? מאוד פשוט.
לאלמנט שקורא לאנימציה, ניתן לשרשר כמה keyframes (כמה אנימציות), וע"י כך ליצור אנימציות מורכבות.
העתקתי בדוגמא שלפנינו את הקריאה לשורת האנימציה שכתבנו מקודם, וצירפתי לה(בחלק המודגש) את הkeyframes של התזוזה.(move).
CSS Syntax
.seezer{
 ......
  animationseezer  300ms, move 12m;
 ....
}

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

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

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

צירפתי לינקים למאמרים נוספים שקשורים לפוסט זה:

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

תודה,
אלעד שכטר