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