จะสร้างเส้นโค้ง cubic-bezier easing สำหรับ CSS เองได้อย่างไร?

ลากจุดจับจุดควบคุมสองจุดบนกราฟ พิมพ์ค่า x1, y1, x2, y2 ที่แน่นอน หรือเลือกค่าที่กำหนดไว้ จากนั้นเลือก CSS ภายใต้ รูปแบบผลลัพธ์ และคลิก คัดลอก เพื่อรับค่า cubic-bezier() สำหรับ transition-timing-function

จะสร้างเอฟเฟกต์เด้งหรือเลยเกินด้วย cubic-bezier ได้อย่างไร?

ลากจุดจับขึ้นเหนือหรือลงใต้กรอบเพื่อให้ค่า Y เลยช่วง 0-1 ค่า Y สามารถเกินช่วงนั้นได้ ในขณะที่ X อยู่ระหว่าง 0 ถึง 1 ค่าที่กำหนดไว้ back-out และ anticipate เป็นจุดเริ่มต้นการเลยเกินที่ทำไว้พร้อมแล้ว

ฉันสามารถรับค่า easing สำหรับ Tailwind, Framer Motion หรือ anime.js ได้หรือไม่?

ได้ แท็บรูปแบบผลลัพธ์คือ CSS, Tailwind, Framer Motion และ anime.js ทั้งหมดจัดรูปแบบตัวเลขสี่ตัวเดียวกัน ดังนั้นเลือกแท็บและคลิก คัดลอก เพื่อนำส่วนย่อยไปไว้ในคลิปบอร์ดของคุณ

จะโหลดค่า cubic-bezier ที่มีอยู่เพื่อแก้ไขได้อย่างไร?

วางค่า เช่น cubic-bezier(.17, .67, .83, .67) ลงในช่องนำเข้าแล้วคลิก โหลด หากไม่สามารถอ่านตัวเลขสี่ตัวได้ คุณจะได้รับข้อความแสดงข้อผิดพลาด เส้นโค้งจะถูกเก็บไว้ใน URL ของหน้าหลังเครื่องหมาย hash ด้วย จึงสามารถแชร์ได้

ทำไมตัวอย่างการเคลื่อนไหวถึงรู้สึกช้ากว่าทรานสิชันจริงของฉัน?

ตัวอย่างการเคลื่อนไหว ใช้การตั้งค่า ระยะเวลา ที่คุณเปลี่ยนได้ และค่าเริ่มต้นจะช้ากว่าเพื่อให้คุณศึกษาเส้นโค้งได้ ลด ระยะเวลา ลง จากนั้นใช้เล่นซ้ำเพื่อดูการเคลื่อนไหวที่ความเร็วที่คุณวางแผนจะใช้งานจริง

ฟรีจริงหรือ

ใช่ ทุกเครื่องมือใช้งานได้ฟรี ไม่ต้องมีบัญชีและไม่ต้องใช้บัตรเครดิต การทำงานเกิดขึ้นบนอุปกรณ์ของคุณแทนที่จะเป็นเซิร์ฟเวอร์ของเรา ซึ่งเป็นสิ่งที่ทำให้ใช้งานได้ฟรี

ใช้งานได้บนมือถือหรือไม่?

ได้ ใช้งานได้บนเบราว์เซอร์มือถือรุ่นปัจจุบันทั้ง iOS และ Android โดยไม่ต้องติดตั้งอะไร

📈

สร้าง CSS Cubic-Bezier Easing ฟรี

ออกแบบ CSS easing curve โดยลาก control point ดูตัวอย่างการเคลื่อนไหวสดๆ และคัดลอกค่า cubic-bezier() มี preset overshoot/bounce

ทำงานในเบราว์เซอร์ไม่ต้องสมัคร ไม่มีป๊อปอัปไม่ต้องเข้าสู่ระบบฟรีตลอดไป

ใช้งานได้แบบออฟไลน์เมื่อโหลดแล้ว

ลากจุดจับสีเขียวและชมพูเพื่อปรับรูปโค้ง

จุดควบคุม

x1y1x2y2

ตัวอย่างการเคลื่อนไหว

ระยะเวลา1.6วิ

การเปลี่ยนแปลงความกว้าง

ค่า CSS

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

ค่าสำเร็จรูป

จุดจับสีชมพูและเขียวสามารถดึงขึ้นหรือลงเกินกล่อง (Y เกิน 0-1) เพื่อสร้างเอฟเฟกต์ overshoot/กระดอน เช่น back-out และ anticipate ส่วน X อยู่ในช่วง 0-1 (เวลาไม่สามารถย้อนกลับได้)

การใช้งานทั่วไป

การผ่านผ่าน CSS แบบกำหนดเองออกแบบการทำให้เรียบลื่นที่รู้สึกเป็นธรรมชาติสำหรับเอฟเฟกต์ hover เมนู และการเปลี่ยน UI
แอนิเมชันเด้งและเกินจำนวนสร้างการเคลื่อนไหวของสปริง/เด้งที่สนุกสนานโดยการดึงจุดควบคุมให้ยาวเกินกำหนด
Easing สำหรับแอนิเมชัน @keyframesเลือก animation-timing-function ที่ถูกต้องสำหรับแอนิเมชัน CSS keyframe
ค่า Easing สำหรับไลบรารี JS Animationรับค่า cubic-bezier สำหรับ GSAP, Framer Motion, anime.js และอื่น ๆ
เข้าใจวิธีการทำงาน Easingดูความสัมพันธ์ระหว่างเส้นโค้ง bezier และการเคลื่อนไหวที่สร้างขึ้น

วิธีการทำงาน

ตัวแก้ไขสร้างในเบราว์เซอร์ทั้งหมดด้วย React state และ SVG — ไม่มีไลบรารีจัดการคณิตศาสตร์เส้นโค้ง จุดควบคุมที่ลากได้สองจุดกำหนดเส้นทาง SVG แบบ cubic Bezier และเอนจินแอนิเมชัน CSS ของเบราว์เซอร์เองแสดงตัวอย่างการเคลื่อนไหวโดยแทรกค่า cubic-bezier() ที่ได้ลงในกฎ @keyframes โดยตรง

1
ลากหรือพิมพ์จุดควบคุม
ตัวจับสองตัว (P1 สีเขียวอมฟ้า P2 สีกุหลาบ) อยู่บน canvas SVG การลากใช้ Pointer Events API กับ setPointerCapture ตัวจับจึงติดตามนิ้วหรือเคอร์เซอร์แม้อยู่นอกขอบ SVG คุณยังขยับตัวจับด้วยปุ่มลูกศร หรือพิมพ์ค่าที่แน่นอนในช่องตัวเลข x1/y1/x2/y2 ได้
2
SVG วาดเส้นโค้งแบบเรียลไทม์
เส้นโค้งเป็นองค์ประกอบ SVG <path> เดียวที่คำสั่ง C (cubic Bezier) ถูกคำนวณใหม่จากพิกัดจุดควบคุมทั้งสี่ทุกครั้งที่ state อัปเดต ไม่มี canvas ไม่มีไลบรารีภายนอก — ตัวเรนเดอร์ SVG ของเบราว์เซอร์วาดเส้นทางโดยตรง
3
เอนจิน CSS ของเบราว์เซอร์แสดงตัวอย่าง easing
แอนิเมชันสดสามแบบ (จุดเลื่อน การเปลี่ยนความกว้าง และการปรับขนาด) รัน CSS @keyframes โดยแทรกค่า cubic-bezier() แบบ inline เอนจินแอนิเมชันของเบราว์เซอร์เองตีความเส้นโค้ง สิ่งที่คุณเห็นจึงตรงกับที่ CSS ในโปรดักชันจะให้ผล
4
คัดลอกโค้ดตามไวยากรณ์ของเฟรมเวิร์กคุณ
แท็บจัดรูปแบบตัวเลขสี่ตัวเดียวกันเป็น CSS transition-timing-function คลาส Tailwind แบบค่ากำหนดเอง อาร์เรย์ ease ของ Framer Motion หรือสตริง easing ของ anime.js โค้ดถูกเขียนลงคลิปบอร์ดด้วย navigator.clipboard เส้นโค้งยังถูกเข้ารหัสใน hash ของ URL (#b=x1,y1,x2,y2) เพื่อให้แชร์หรือบุ๊กมาร์กได้