LEVEL 2 · ระดับกลาง
Motion ที่ดูเป็นงานอาชีพ
ของที่แยกงานมือใหม่กับงานโปรไม่ใช่จำนวนเอฟเฟกต์ แต่คือวินัยไม่กี่ข้อที่ใช้ซ้ำทั้งเรื่อง บทนี้สรุปวินัยที่การ์ดของเราใช้จริง แล้วปิดด้วยเครื่องมือที่ช่วยให้ไม่ต้องประดิษฐ์ท่าเอง
9.1 วินัยที่การ์ดใบนี้ใช้
- เข้านุ่ม ตั้งใจ: ทุกทางเข้าใช้ ease ตระกูล out (
power2.out,power3.out) — พุ่งมาแล้วเบรกนิ่ม ตาคนอ่านว่า "ตั้งใจมา" ไม่ใช่ "หล่นมา" ระยะทางสั้น (16–40px) และ 0.5–0.8 วินาทีก็พอ - ทีละจังหวะ: ของหลายชิ้นเข้าพร้อมกัน = ตาไม่รู้จะดูอะไร แถวรายละเอียดสามแถวใช้
stagger: 0.25— โครงเดียวกัน เหลื่อมเวลากัน สายตาถูกจูงทีละบรรทัด - อย่าปล่อยเฟรมตาย: จอนิ่งสนิทหลายวินาทีดูเหมือนวิดีโอค้าง (และ
checkปฏิเสธจริงตามsweep_static— บทที่ 6) การ์ดเราแก้ด้วยเส้นใต้เส้นเดียวที่ลากช้า ๆ ทั้งเรื่อง:ease: "none"ยาว 8.8 วินาที เคลื่อนไหวพอให้มีชีวิต เบาพอไม่แย่งซีน - จังหวะไทยสองข้อ (จ่ายราคามาแล้วจากโปรเจกต์จริง): หั่นประโยคไทยใส่
spanหลายตัวเพื่อ animate ทีละคำ — ถ้า markup มีช่องว่างระหว่าง span จะเกิดวรรคปลอมกลางคำบนจอ ("สิบปี ที่...") ที่เครื่องตรวจไม่มีวันเห็น ต้องเขียน span ชิดกันและดู contact sheet เอง · ข้อความเข้าบนพื้นสี ใช้ทางเข้าแบบ binary (tl.setโผล่ทั้งก้อน) แทนการเฟด — ตัวตรวจ contrast ชอบจับเฟรมกลางเฟดที่สีจางพอดี แก้ทีเดียวได้ทั้งความถูกและจังหวะที่เฉียบกว่า
9.2 หาท่าจากคลังก่อนประดิษฐ์เอง
HyperFrames มีคลังท่าสำเร็จ ค้นด้วยภาษาอังกฤษ (คลังทำ index เป็นอังกฤษ — ถามไทยได้ผลว่างเปล่า) และถามด้วยผลลัพธ์ที่อยากได้ ไม่ใช่ชื่อกลไก:
$ npx hyperframes catalog --query "gentle continuous motion to keep a static card alive"
echo-trail component A moving element renders with N ghosted copies...
telemetry-hud component Quiet mono debug-HUD readouts frame a slotted subject...
chart-story component One chart builds from data in reading order...
...
162 items. Run "hyperframes add <name>" to install.เจอที่ใช่ก็ติดตั้งเข้าโปรเจกต์: npx hyperframes add whip-pan-cut ได้ไฟล์มาที่ compositions/components/ พร้อมก๊อปลงเรื่อง ส่วนรอบที่ผมค้นจริงข้างบน — ผลลัพธ์ล้วนเป็นท่าโชว์ ขณะที่โจทย์ผมคือเส้นใต้เส้นเดียว หนึ่งบรรทัด tween เขียนเองถูกกว่า: ค้นก่อนเสมอ แต่กล้าตอบว่า "ไม่มีอะไรเรียบง่ายเท่าเขียนเอง"