เครื่องกำเนิดไฟฟ้าคิวบิกเบซิเยร์

การพิมพ์ลูกบาศก์ bezier(x1, y1, x2, y2) ด้วยมือแล้วโหลดหน้าใหม่เพื่อตรวจสอบความรู้สึกเป็นวิธีที่ช้าในการปรับแต่งภาพเคลื่อนไหว ตัวสร้างนี้จะปิดลูปนั้น: ลากจุดควบคุมบนเส้นโค้ง หรือพิมพ์ตัวเลขที่แน่นอนลงในฟิลด์ x1/y1/x2/y2 และเส้นโค้ง สตริง CSS ที่คัดลอกได้ และการแสดงตัวอย่างแอนิเมชั่นสด ทั้งหมดจะอัปเดตในทุกการเปลี่ยนแปลง — ไม่มีขั้นตอนการสร้าง ไม่ต้องโหลดซ้ำ

แกนทั้งสองทำงานต่างกันตามจุดประสงค์ x1 และ x2 จะถูกยึดระหว่าง 0 ถึง 1 เพราะนั่นคือสิ่งที่ข้อกำหนด CSS ต้องการจริงๆ สำหรับฟังก์ชันจับเวลาแบบลูกบาศก์ bezier() ค่าที่อยู่นอกช่วงนั้นไม่ถูกต้อง y1 และ y2 ไม่มีขีดจำกัดดังกล่าว: ลากที่จับเหนือด้านบนของกล่องหรือด้านล่างด้านล่าง และเส้นโค้งจะเลยเกินจุดเริ่มต้นหรือจุดสิ้นสุด ซึ่งเป็นวิธีการสร้างเอฟเฟกต์แบบสปริงและแบบเด้งจากเส้นโค้งการค่อยๆ เปลี่ยนเส้นเดียว

การดูตัวเลขนั้นไม่เหมือนกับการดูการเคลื่อนไหว ดังนั้นการดูตัวอย่างจึงแสดงลูกบอลที่เหมือนกันสองลูกเคียงข้างกันในลูป โดยลูกหนึ่งเคลื่อนที่โดยใช้เส้นโค้งที่คุณกำหนดเอง ส่วนอีกลูกเคลื่อนที่ด้วยความเร็วเชิงเส้นคงที่ธรรมดา การดูพวกเขาแข่งขันเป็นวิธีที่เร็วที่สุดในการบอกได้ว่ากราฟการค่อยๆ เปลี่ยนให้ความรู้สึกที่คุณต้องการจริงหรือไม่ ก่อนที่จะไปถึงสไตล์ชีต หน้าที่กำหนดไว้ล่วงหน้า — จำนวนจริงเบื้องหลังคีย์เวิร์ดที่เข้าออกได้ง่ายของ CSS การประมาณค่าเกินจริงที่ทำให้เกิดการตีกลับ และเส้นโค้งมาตรฐานการออกแบบวัสดุที่เผยแพร่โดย Google ล้วนเป็นจุดเริ่มต้นที่พร้อมแล้วที่คุณสามารถลากมาได้ แทนที่จะเป็นจุดควบคุมที่ว่างเปล่า

ทุกอย่างทำงานภายในเบราว์เซอร์ของคุณ: ไม่มีการอัปโหลด, ไม่มีบัญชี, ไม่มีเซิร์ฟเวอร์ไป-กลับ และเครื่องกำเนิดไฟฟ้ายังคงทำงานแบบออฟไลน์เมื่อโหลดเพจแล้ว