เมื่อปลายปีที่แล้ว ฉันได้สร้างเว็บไซต์ Chrome Dev Summit ผมอยากให้เว็บไซต์มีรูปลักษณ์ตามการออกแบบ Material เนื่องจากเป็นภาษาการออกแบบที่ยอดเยี่ยม และผมคิดว่าการออกแบบนี้เหมาะกับเว็บไซต์ที่ผมอยากสร้าง แต่ก็ไม่ต่างอะไรกับภาษาการออกแบบใหม่ๆ ที่ต้องมีคำถาม ความท้าทาย และการตัดสินใจที่ต้องทำ โดยเฉพาะอย่างยิ่งเมื่อต้องจัดการกับธรรมเนียมปฏิบัติของเว็บ
สิ่งหนึ่งที่สร้างความท้าทายในการสร้างเว็บไซต์นี้เป็นอย่างมากคือเอฟเฟกต์ "การครอบครอง" เมื่อคุณคลิกการ์ด
การทำให้เอฟเฟกต์แบบนี้ทำงานที่ 60fps ต้องใช้การคิด การสร้างต้นแบบ และการประนีประนอมที่น่าสนใจ ใน Chrome Dev Summit ฉันได้พูดถึงเอฟเฟกต์นี้และอธิบายรายละเอียดอย่างละเอียดเกี่ยวกับวิธีสร้างเอฟเฟกต์นี้
การสร้างภาพเคลื่อนไหวที่มีประสิทธิภาพสูง
ภาพเคลื่อนไหวที่มีประสิทธิภาพสูงในปัจจุบันอย่างน้อยก็คือภาพเคลื่อนไหวที่ใช้ Compositor ของเบราว์เซอร์ หากคุณสามารถเปลี่ยนคุณสมบัติการเปลี่ยนรูปและความทึบแสงได้ตามที่ต้องการ โดยปกติแล้วคุณจะเห็นประสิทธิภาพที่ยอดเยี่ยม แนวทางทั่วไปที่ฉันใช้ในการเคลื่อนไหวของการ์ดก็คือ
- วัดตำแหน่งขององค์ประกอบทั้งหมดในการ์ดเมื่อการ์ดถูกยุบ
- สลับคลาสของการ์ดเพื่อขยาย (โดยไม่มีภาพเคลื่อนไหว)
- วัดตำแหน่งขององค์ประกอบในการ์ดอีกครั้งเมื่อการ์ดขยายแล้ว
- คำนวณความแตกต่าง
- ใช้การเปลี่ยนเชิงลบเพื่อย้ายองค์ประกอบกลับไปยังตำแหน่งเริ่มต้น
- เปิดภาพเคลื่อนไหว
- นำการเปลี่ยนรูปเชิงลบออก แล้วดูองค์ประกอบต่างๆ เคลื่อนที่ไปยังตำแหน่งสุดท้ายบนหน้าจอ
ทั้งหมดนี้อาจฟังดูมีค่าใช้จ่ายสูง แต่มีกรอบเวลา 100 มิลลิวินาทีตั้งแต่ผู้ใช้โต้ตอบก่อนที่ภาพเคลื่อนไหวจะต้องเริ่ม หากมากกว่านี้ ผู้ใช้จะรับรู้ถึงความล่าช้า คุณสามารถใช้เวลานี้ในการเตรียมงานที่มีค่าใช้จ่ายสูงเพื่อให้คุณสามารถดำเนินการในราคาที่ถูกกว่าในระหว่างการสร้างภาพเคลื่อนไหว นอกจากนี้ ยังมีช่วงเวลาประมาณ 50-100 มิลลิวินาทีในช่วงท้ายเพื่อทำงานให้เรียบร้อย ซึ่งอาจมีประโยชน์ขึ้นอยู่กับสิ่งที่คุณพยายามทำ
การทำงานที่ซับซ้อนในการสร้างภาพเคลื่อนไหวจะเกิดขึ้นภายใน 100 มิลลิวินาทีแรก และใน Nexus 5 การทำงานจะใช้เวลาประมาณ 70 มิลลิวินาที ดังนั้นจึงมีเวลาเหลือ
รับโค้ด
หากสนใจดูรายละเอียดเพิ่มเติมเกี่ยวกับเว็บไซต์นี้ เรายินดีที่จะแจ้งให้ทราบว่าโค้ดได้รับการเผยแพร่บน GitHub แล้ว ดังนั้นโปรดไปดูได้เลย