เส้นโค้งการค่อยๆ เปลี่ยนมาตรฐานของการออกแบบวัสดุ
ออกแบบฟังก์ชันการกำหนดเวลา CSS cube-bezier() แบบกำหนดเองโดยการลากจุดควบคุมสองจุด ดูตัวอย่างแบบสดเทียบกับการอ้างอิงเชิงเส้น จากนั้นคัดลอกค่าที่พร้อม
ผลลัพธ์
หน้านี้จะเปิดตัวสร้างด้วย x1=0.4, y1=0, x2=0.2, y2=1 ที่โหลดไว้แล้ว ซึ่งเป็นกราฟการค่อยๆ เปลี่ยนมาตรฐานที่เผยแพร่ในหลักเกณฑ์การเคลื่อนไหวของดีไซน์ Material ของ Google ลากจุดจับหรือแก้ไขตัวเลข และเส้นโค้ง การแสดงตัวอย่างสด และการอัปเดต CSS ที่คัดลอกได้เข้าด้วยกัน
ดีไซน์ Material เรียกเส้นโค้งนี้ว่า "การค่อยๆ เปลี่ยนแบบมาตรฐาน" และแนะนำให้ใช้กับการเปลี่ยนผ่านหน้าจอส่วนใหญ่ ซึ่งเป็นองค์ประกอบที่มองเห็นได้อยู่แล้วและเพียงแค่ย้าย ปรับขนาด หรือจางลงภายในหน้าจอเดียวกัน รูปร่างของมันเร่งความเร็วอย่างรวดเร็ว จากนั้นค่อยๆ ลดความเร็วลง ซึ่งเป็นเหตุผลว่าทำไมแอป Android และ UI บนเว็บที่เป็นสไตล์ Material จำนวนมากจึงมีความรู้สึกในการเปลี่ยนแปลงแบบเดียวกันโดยไม่มีใครสังเกตเห็นว่าพวกเขากำลังใช้ตัวเลขสี่ตัวที่เหมือนกัน
วางลงในฟังก์ชันการเปลี่ยนเวลาหรือฟังก์ชันกำหนดเวลาภาพเคลื่อนไหวเพื่อให้รู้สึกถึงความสอดคล้องกับวัสดุ หรือใช้เป็นจุดอ้างอิง: แนวทางของวัสดุยังกำหนดเส้นโค้ง "ชะลอตัว" และ "เร่งความเร็ว" แยกต่างหากสำหรับองค์ประกอบที่เข้าหรือออกจากหน้าจอ ซึ่งเส้นโค้งมาตรฐานเดียวนี้ไม่ได้มีวัตถุประสงค์เพื่อแทนที่