เส้นโค้งการค่อยๆ เปลี่ยน CSS สไตล์ตีกลับ
ออกแบบฟังก์ชันการกำหนดเวลา CSS cube-bezier() แบบกำหนดเองโดยการลากจุดควบคุมสองจุด ดูตัวอย่างแบบสดเทียบกับการอ้างอิงเชิงเส้น จากนั้นคัดลอกค่าที่พร้อม
ผลลัพธ์
หน้านี้เปิดตัวสร้างด้วย x1=0.68, y1=-0.55, x2=0.265, y2=1.55 โหลดแล้ว — กราฟโอเวอร์ชูตบางไลบรารี Ease มีป้ายกำกับว่า EaseOutBack ค่าลบ y1 และ y2 เหนือ 1 เป็นสาเหตุว่าทำไมตัวอย่างแอนิเมชั่นด้านล่างจึงดึงกลับเลยจุดเริ่มต้นและเลยจุดสิ้นสุดก่อนที่จะตกลงไป ลากที่จับหรือแก้ไขตัวเลขเพื่อทำให้เอฟเฟ็กต์ชัดเจนขึ้นหรือนุ่มนวลขึ้น
บอกตามตรงว่าสิ่งนี้คืออะไร: เส้นโค้งลูกบาศก์ bezier() เส้นเดียวมีจุดควบคุมเพียงสองจุด ดังนั้นจึงสามารถประมาณการเคลื่อนไหวแบบ Overshoot-and-Settle ได้เพียงครั้งเดียว ไม่ใช่การสะท้อนทางกายภาพแบบ Multi-Bounce จริงที่มีการกระโดดลดลงหลายครั้ง สำหรับเอฟเฟกต์การเด้งลูกบอลตามตัวอักษร คุณจะต้องมีคีย์เฟรมหลายรายการหรือหลายขั้นตอน () เชื่อมโยงเข้าด้วยกัน เส้นโค้งนี้เป็นเส้นโค้งที่ใกล้เคียงที่สุดที่ฟังก์ชันกำหนดเวลาการเปลี่ยนภาพธรรมดาจะรวมอยู่ในบรรทัดเดียวได้
การกระโดดข้ามจุดเดียวนั้นยังคงเป็นสิ่งที่ UI ที่เด้งกลับมากที่สุดต้องการ: ปุ่มที่โผล่พ้นขนาดที่วางไว้เล็กน้อย, โมดอลที่เลื่อนออกไปก่อนที่จะตกลงไป, การ์ดที่เด้งเข้าที่ คัดลอกค่าตามที่เป็นอยู่สำหรับความรู้สึกที่เร็วนั้น หรือทำให้ y1 อ่อนลงไปทาง 0 และ y2 ไปทาง 1 เพื่อหมุนส่วนที่เกินกลับ