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