6 בספט׳ 2012

אנימציות ב CSS3

CSS3 Animations

אנימציות ב-100% CSS3

לפני שנתחיל חשוב לציין! - אנימציות ב CSS לא עובדות עד גרסה אקספלורר 9 כולל(רק מגרסה 10 העתידית לצאת בקרוב), ובכל שאר הדפדפנים יש להוסיף לפני קוד הstyle , את ה 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 בדוגמאות, אך כדי שהקוד יעבוד בכל הדפדפנים הנתמכים יש לכתוב את הקוד בכל 4 הצורות האפשריות, ניתן ליצור פיתרון אלגנטי בless, אני אדגים בסוף.

החוקים של יצירת אנימציה מאוד פשוטים.
  1. יש לנו אלמנט עליו נפעיל את האנימציה. 
  2. את האנימציה עצמה שנקרא לה מתוך האלמנט.




אז בואו נתחיל!
ניצור אלמנט div,  ניתן לו class בשם  box, נוסיף לו קצת עיצוב רוחב+גובה+צבע,נוסיף לו position fixed עם הגדרות מיקום. שנוכל לשחק עם האנימציה במיקום של האלמנט.

 .box{width:200px;height:200px;background:red;
         position:fixed;left:400px;top:0;
}

עכשיו אחרי שיצרנו את האלמנט ניצור את קוד האנימציה ה keyframes:
הצורה הבסיסית ביותר עובדת עם נקודת תחילת אנימציה וסיום אנימציה, בנוסף נציין את ה styles,שייצגו את פעולות האנימציה, לדוגמת מיקום האלמנט בהתחלה ובסוף האנימציה. ראו דוגמא:
syntax
    @keyframes animationName{
        from {left: 100px;}
        to {left: 400px;}
    }

עכשיו מה שנשאר הוא לחבר את האנימציה בstyles   לאלמנט box. ע"י שימוש בstyle, מסוג animation-name שקורא לאנימציה, ועם ה style מסוג animation-duration שיגדיר את משך זמן שהאנימציה תרוץ, יודע לקבל שניות(s) ומיל-שניות(ms).

syntax
.box{
      styles.....
      animation-name: animationName;
      animation-duration: 5s;
}

syntax מקוצר (אותו הדבר כמו הדוגמא לפני):
 
.box{
      styles.....
      animation: animationName 5s;     
}
זהו! יצרתם את האנימציה הראשונה שלכם! היא תפעל ותרוץ 5 שניות עד שתיפסק.
לצפייה בקטע קוד

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

syntax
    @keyframes animationName{
        0% {left: 100px;}
       25% {left: 170px;top:100px;}
       50% {left: 250px;top:0px;}   
       75% {left: 320px;top:100px;}  
       100% {left: 400px;top:0px;}  
 }

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

הגדרות חשובות נוספות לאנימציה

  1. מספר חזרות של האנימציה (animation-iteration-count) - ברירת מחדל היא 1, ניתן לתת במקום, כל ספרה, או infinite, כשמו כן הוא,אינסופי. - הכי שימושי, בעיקר מצב אינסופי
  2. הגדרת delay התחלתי (animation-delay), מהרגע שהאנימציה מתחילה, מקבל יחידות זמן s(שניות) או ms(מילי שניות)
  3. הגדרה מה קורה בסיום ריצה של אנימציה שרצה במספר חזרות (animation-direction) - ניתן להגדיר שבסוף האנימציה היא תעשה את הפעולה שוב מהסוף להתחלה וכך יווצר רצף.
  4. easing  מהירות האנימציה (animation-timing-function), התחלה אמצע וסוף, ניתן להגדיר שחלק מסוים באנימציה יפעל מהר יותר.
  5. מצב ריצה של אנימציה (animation-play-state) - ברירת מחדל = אנימציה רצה, ניתן להגדיר שהאנימציה עצורה, ותתחיל לרוץ לדוגמא במעבר עכבר, או להפך (אנימציה רצה ונעצרת במעבר עכבר).
דוגמא שמוסיפה את כל האפשריות הנוספות - לחץ לדוגמא
פירוט השינויים שבוצעו בדוגמא
  • מספר חזרות אין סופי
  • האנימציה מתחילה אחרי 2 שניות מטעינת הדף
  • בסיום סבב אנימציה , האנימציה עובדת ב reverse.
  • easing - הוחלף לlinear, שעובד במהירות קבועה.
  • מצב ריצה של אנימציה- הוספתי שבמעבר עכבר האנימציה נעצרת.

יתרונות וחסרונות של אנימציות ב CSS3

יתרונות
  • אין צורך ב JS
  • ולכן גם עובד מהר יותר
  • נתמך ברב הדפדפנים החדשים
חסרונות
  • לא עובד באקספלורר עד גרסה 9 כולל (כלומר נמתך רק מגרסה 10 שלא יצאה רישמית)
  • נכון לעכשיו, אנחנו נאלצים לכתוב כל דבר ב 4 צורות שונות, על מנת לתמוך בכל הדפדפנים התומכים. ניתן ליצור כתיבה נכונה ע"י שימוש ב less.


כתיב מקוצר ושימוש ב less, על מנת למנוע שכפול קוד: 

* למאמר בנושא less

ראשית ניתן לקצר ולשרשר את הגדרות האנימציה בשורה אחת.
syntax

     animation : animationName animationTime easing delayTime repeatTime animationDirection; 

שנית ניתן להעביר את כל הפרמטרים בפונקציה וע"י כך להימנע משכפול קוד.
דוגמא
 .animation(@name, @animationTime, @easing, @delay, @repeat,@direction){

     animation:@name @animationTime @easing @delay @repeat @direction;
     -moz-animation:@name @animationTime @easing @delay @repeat @direction;
     -webkit-animation:@name @animationTime @easing @delay @repeat @direction;
     -0-animation:@name @animationTime @easing @delay @repeat @direction;

}

.box{
   .animation(myfirst, 5s,linear ,2s , infinite, alternate);  /* Call Function */
}
אותו דבר אנחנו עושים לגבי ה keyframes , פונקציה שתתן את כל נקודות האנימציה, אותם נעביר לכל צורת הכתיבה של ה keyframes.

מה שנוצר בסוף, היא פונקציה אנימציה שמפעילה את ה keyframe (ומגדירה הגדרות נוספות של אנימציה).
ה keyframe, בעקבות הצורת של כתיבה שלכל דפדפן מצריך כתיבה שונה, קורא לפונקציה שתגדיר את כל ה keyframes של האנימציה.

הנה דוגמת הקוד - הדוגמא שמדגימה את הקוד.

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


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


אני אשמח שתטקבקו
אלעד שכטר