בסוף השנה שעברה בניתי את האתר Chrome Dev Summit. רציתי להשתמש בעיצוב ובסגנון של Material Design, כי זו שפת עיצוב מעולה, וחשבתי שהיא תתאים לאתר שרציתי ליצור. אבל כמו בכל שפת עיצוב חדשה, יש שאלות, אתגרים והחלטות שצריך לקבל, ובמיוחד כשיש שאלות מוסכמות באינטרנט.
אחד ההיבטים של האתר שהיה מאתגר במיוחד ליצירתו היה אפקט ה"השתלטות" כאשר לוחצים על כרטיס.
כדי לקבל אפקט כזה של 60fps, נדרש קצת מחשבה, יצירת אב טיפוס וכמה פשרות מעניינות. בכנס מפתחי Chrome, דיברתי על האפקט הזה והסברתי בפירוט איך לבנות אותו.
יצירת אנימציה בעלת ביצועים גבוהים
אנימציות עם ביצועים גבוהים, לפחות היום, הן אלה שמעדיפים את הקומפוזיטור של הדפדפן. אם תוכלו להתמיד בשינוי מאפייני הטרנספורמציה והאטימות, בדרך כלל תראו ביצועים מעולים. הגישה הכללית שבה נקטתי את האנימציה של הכרטיס פועלת בנוסח הבא:
- אפשר למדוד את המיקום של כל הרכיבים בכרטיס כשהכרטיס מכווץ.
- החלפת המצב של המחלקות בכרטיס כדי להרחיב אותו (בלי אנימציה).
- עליך למדוד מחדש את המיקום של הרכיבים בכרטיס עכשיו הכרטיס מורחב.
- מחשבים את ההפרשים.
- החלת הטרנספורמציות השליליות כדי להעביר את הרכיבים חזרה למיקומי ההתחלה.
- מפעילים את האנימציות.
- מסירים את ההמרות השליליות וצופים ברכיבים שזזים למיקומים הסופיים שלהם במסך.
כל זה אולי יישמע יקר, אבל יש חלון של 100 אלפיות השנייה מהרגע שבו המשתמש יוצר אינטראקציה לפני שהאנימציה צריכה להתחיל. יותר מזה, והמשתמש יבחין בעיכוב. אתם יכולים לנצל את הזמן הזה לביצוע עבודת הכנה יקרה כדי להריץ את הסרטון בצורה זולה יותר במהלך האנימציה עצמה. בסוף התהליך יש גם חלון באורך של כ-50-100 אלפיות השנייה לביצוע משימות מסודרות, שעשוי להיות מועיל בהתאם למה שאתם מנסים לעשות.
העבודה היקרה של יצירת האנימציה מתבצעת ב-100 אלפיות השנייה הראשונות. ב-Nexus 5 העבודה נמשכת פחות מ-70 אלפיות השנייה, כך שיש מקום פנוי.
קבל את הקוד
אם אתם רוצים לבחון את האתר בצורה מפורטת יותר, תשמחו לשמוע שהקוד פורסם ב-GitHub, אז כדאי לכם לעיין בו!