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