การเคลื่อนไหวเบื้องต้นด้วย Hype Record

• เมษายน 27, 2024

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

ตามที่เราได้เรียนรู้เพื่อสร้างภาพเคลื่อนไหวเราต้องเริ่มต้นและหยุดเฟรม ตัวอย่างเช่นเพื่อลดขนาดของสี่เหลี่ยมในขณะที่มันเคลื่อนผ่านหน้าจอเราจะบอก Hype ว่าเฟรมใดที่จะเริ่มการเคลื่อนไหวและเฟรมที่จะหยุด เนื่องจากเรากำลังทำงานกับแอนิเมชั่นที่ใช้เส้นเวลาเราจึงสามารถพูดคุยกับ Hype ได้โดยใช้คีย์เฟรมบนไทม์ไลน์ และคุณเดาได้ว่าเราจะวางเฟรมหลักเหล่านี้ไว้ในเฟรมเริ่มและหยุดพิเศษ

เมื่อ Hype เห็นคีย์เฟรมมันจะบันทึกคุณสมบัติของวัตถุเช่นสี่เหลี่ยมบนหน้าจอ คุณสมบัติเพียงไม่กี่อย่างที่ Hype จะรับรู้ ได้แก่ ความทึบ, กำเนิดซ้าย, ขวากำเนิด, ความสูงขนาดและความกว้างขนาด คุณสมบัติเหล่านี้สอดคล้องกับคุณสมบัติสไตล์ CSS ในเอกสาร HTML5 Hype เก็บค่าของคุณสมบัติเหล่านี้พร้อมกับตำแหน่งหรือกรอบที่เกี่ยวข้องบนเส้นเวลา

ขั้นตอนแรกของเราในการสร้างภาพเคลื่อนไหวตัวอย่างนี้คือการบอก Hype ว่าขนาดใดที่จะทำให้สี่เหลี่ยมผืนผ้าและตำแหน่งที่จะวางบนหน้าจอที่จุดเริ่มต้นและจุดสิ้นสุดของภาพเคลื่อนไหว เราสามารถทำสิ่งนี้ได้ด้วยปุ่มบันทึก

1. คลิกไฟล์ - ใหม่เพื่อเริ่มเอกสารใหม่ใน Hype โดยใช้การตั้งค่าเริ่มต้น
   
   มาเพิ่มสี่เหลี่ยมลงบนหน้าจอ
   
   
2. คลิกที่ไอคอนองค์ประกอบในแถบเครื่องมือและเลือกสี่เหลี่ยมผืนผ้า Hype จะวางรูปสี่เหลี่ยมผืนผ้าใหม่ที่กึ่งกลางของหน้าจอ
   
   มาวางสี่เหลี่ยมผืนผ้าที่เราต้องการให้เป็นจุดเริ่มต้นของแอนิเมชัน เราจะรักษาขนาดเริ่มต้นดังนั้นสิ่งที่เราต้องทำคือย้ายสี่เหลี่ยม
   
   
3. ลากสี่เหลี่ยมผืนผ้าไปที่ขอบด้านซ้ายของหน้าจอ
   
   
4. ลองดูที่เครื่องมือตรวจสอบ Metrics สี่เหลี่ยมผืนผ้าในขณะนี้คือ 7 พิกเซลจากขอบด้านซ้ายและ 149 พิกเซลจากขอบด้านบน นอกจากนี้มันคือ 102 x 102 พิกเซล
   
   

ตอนนี้เราต้องการให้สี่เหลี่ยมเลื่อนไปที่ขอบขวาและลด 50% นอกจากนี้เราต้องการให้สิ่งนี้เกิดขึ้นในเวลาเพียง 30 เฟรม มาบอก Hype ข้อมูลนี้ผ่านคุณสมบัติบันทึกในบทช่วยสอนถัดไป

ต่อ