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