เกี่ยวกับเส้นทางการเคลื่อนไหว

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

ระบบจะใช้ CSS เพื่อประมาณภาพเคลื่อนไหวในเส้นทางการเคลื่อนไหว ดังนั้นองค์ประกอบที่เคลื่อนไหวจึงอาจไม่ตรงตามเส้นทางการเคลื่อนไหวพอดี โดยทั่วไปแล้ว ความแตกต่างนี้จะสังเกตเห็นได้ยาก (โดยค่าเริ่มต้นแล้วน้อยกว่า 1 พิกเซล) ซึ่งคุณสามารถจำกัดขอบเขตของค่าเบี่ยงเบนในคุณสมบัติของเส้นทางการเคลื่อนไหวได้

เกี่ยวกับเส้นทางการเคลื่อนไหว

หัวข้อในหน้านี้

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

การดูเส้นทางการเคลื่อนไหว

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

คุณสามารถดูเส้นทางการเคลื่อนไหวได้ครั้งละหนึ่งเส้นเท่านั้น

จุดยึด

กำหนดจุดยึดได้ 2 วิธีดังนี้

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

แฮนเดิลตัวควบคุม

แฮนเดิลตัวควบคุมจะปรากฏขึ้นเมื่อเลือกเครื่องมือเส้นทางการเคลื่อนไหว ระหว่างจุดยึดแต่ละส่วนจะมีแฮนเดิลตัวควบคุม 2 ตัว ซึ่งแฮนเดิลแต่ละตัวจะติดกับจุดยึดแต่ละจุด ความยาวและทิศทางของแฮนเดิลตัวควบคุมจะระบุระดับความโค้งของเส้นทางการเคลื่อนไหว สำหรับเส้นตรง แฮนเดิลตัวควบคุมจะติดอยู่ระนาบเดียวกับส่วนหรือยุบอยู่

การแก้ไขเส้นทางการเคลื่อนไหว

การแก้ไขรูปร่างเส้นทางการเคลื่อนไหว

เส้นทางการเคลื่อนไหวสามารถเป็นเส้นโค้งแบบเรียบง่าย รูปทรงแบบปิด เช่น รูปหลายเหลี่ยมและวงกลม หรือเส้นขอบที่มีรายละเอียดซับซ้อนของวัตถุอื่นๆ หากต้องการเปลี่ยนรูปร่างของเส้นทางการเคลื่อนไหว ให้ทำดังนี้

เพิ่มจุดยึด

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

ปรับความโค้ง

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

  ดับเบิลคลิกจุดยึดทั้ง 2 ด้านหากต้องการปรับเส้นทางการเคลื่อนไหวให้ตรง

ลบจุดยึด

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

การเปลี่ยนรูปแบบเส้นทางการเคลื่อนไหว

คุณจะย้าย ปรับขนาด พลิก หรือหมุนเส้นทางการเคลื่อนไหวได้โดยเลือกเครื่องมือเส้นทางการเคลื่อนไหว จากนั้นเลือกช่องการควบคุมการเปลี่ยนแปลงในแถบตัวเลือกเครื่องมือ เมื่อเปิดใช้ตัวเลือกนี้ การควบคุมการเปลี่ยนแปลงจะแสดงเมื่อคุณเลือกองค์ประกอบที่มีเส้นทางการเคลื่อนไหว

ย้ายเส้นทางการเคลื่อนไหว

ลากเส้นทางการเคลื่อนไหวไปยังตำแหน่งใหม่บนพื้นที่งาน

ปรับขนาดเส้นทางการเคลื่อนไหว

• กล่องการปรับขนาดกรอบสีฟ้าจะล้อมรอบเส้นทางการเคลื่อนไหว โดยมีแฮนเดิลอยู่ที่มุมแต่ละด้าน ลากแฮนเดิลเพื่อปรับขนาดของเส้นทางการเคลื่อนไหว
• กดปุ่ม Shift ค้างไว้ระหว่างที่ลากเพื่อรักษาอัตราส่วนเดิม
• กดปุ่ม Alt ค้างไว้ระหว่างที่ลากเพื่อรักษากึ่งกลางของเส้นทางการเคลื่อนไหวให้อยู่ที่เดิม
• หากต้องการปรับขนาดเส้นทางการเคลื่อนไหวในทิศทางอื่น ให้หมุนกล่องการปรับขนาดโดยป้อนองศาการหมุนในช่อง ที่แถบตัวเลือกเครื่องมือ หรือจะกดปุ่ม Alt (Windows) หรือ Option (Mac) ค้างไว้ระหว่างที่กดปุ่มลูกศรซ้ายหรือขวาเพื่อหมุนกล่องการปรับขนาดไปทีละ 5 องศาก็ได้ ทั้งนี้ ช่องดังกล่าวจะรีเซ็ตเป็น 0 องศาเสมอ คุณจึงควรป้อนองศาการหมุนที่ต้องการจากการวางแนวปัจจุบัน การหมุนกล่องการปรับขนาดไม่ได้เปลี่ยนการวางแนวของตัวเส้นทางการเคลื่อนไหว
• หากต้องการปรับขนาดการวางแนวของกล่อง ให้ดับเบิลคลิกตัวควบคุมการหมุนด้านใน (วงแหวนขนาดเล็ก) ซึ่งจะเป็นการรีเซ็ตตำแหน่งของจุดแกนหมุน

พลิกเส้นทางการเคลื่อนไหว

• ลากแฮนเดิลปรับขนาดไปไว้เหนือแฮนเดิลปรับขนาดที่อยู่ตรงกันข้าม

หมุนเส้นทางการเคลื่อนไหว

• ลากตัวควบคุมการหมุนด้านนอก (วงแหวนขนาดใหญ่) ไปตามเข็มนาฬิกาหรือทวนเข็มนาฬิกาเพื่อหมุนเส้นทางการเคลื่อนไหว
• กดปุ่ม Shift ค้างไว้ระหว่างที่ลากเพื่อจำกัดให้หมุนได้ทีละ 45 องศา
• หากต้องการย้ายจุดแกนหมุนของการหมุนนั้น ให้ลากตัวควบคุมการหมุนด้านใน (วงแหวนขนาดเล็ก) ไปยังตำแหน่งอื่น รีเซ็ตตำแหน่งของจุดแกนหมุนโดยดับเบิลคลิกตัวควบคุมการหมุนด้านใน (ซึ่งจะเป็นการรีเซ็ตการวางแนวของกล่องการปรับขนาดด้วย)

การแก้ไขเส้นทางการเคลื่อนไหว

การแก้ไขความเร็วในการเคลื่อนไหว

ควบคุมความเร็วของวัตถุตามเส้นทางการเคลื่อนไหวโดยการเปลี่ยนระยะเวลาของภาพขนาดย่อหรือคีย์เฟรมและการค่อยๆ เปลี่ยนระหว่างภาพขนาดย่อหรือคีย์เฟรม และคุณยังสามารถทำให้ภาพเคลื่อนไหวในเส้นทางการเคลื่อนไหววนซ้ำได้อีกด้วย

จุดยึดที่เพิ่มด้วยเครื่องมือเส้นทางการเคลื่อนไหวจะไม่ส่งผลต่อความเร็วในการเคลื่อนไหว จึงควรเพิ่มภาพขนาดย่อหรือคีย์เฟรมแทน

การเพิ่มประสิทธิภาพ

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

หากต้องการบีบอัดเพิ่มเติม ให้คลิกปรับแต่งเส้นโค้ง ในคุณสมบัติเส้นทางการเคลื่อนไหว กระบวนการนี้อาจใช้เวลามากกว่าการเพิ่มประสิทธิภาพโดยอัตโนมัติ

Google Web Designer จะแสดงขนาดโดยประมาณของเส้นทางการเคลื่อนไหวขององค์ประกอบที่เลือกไว้ในแผงคุณสมบัติ ซึ่งจะแสดงปริมาณพื้นที่ดิสก์ที่เส้นทางการเคลื่อนไหวจะใช้หลังจากนำเอกสารไปใช้จริง

คุณสมบัติเส้นทางการเคลื่อนไหว

คุณสมบัติเส้นทางการเคลื่อนไหวจะปรากฏในแผงคุณสมบัติเมื่อเพิ่มจุดยึดด้วยเครื่องมือเส้นทางการเคลื่อนไหว หรือแก้ไขเส้นทางการเคลื่อนไหวให้เป็นเส้นโค้ง

คุณสมบัติ	รายละเอียด
วางแนวตามเส้นทาง	เมื่อเปิดใช้งาน องค์ประกอบจะหมุนระหว่างการเคลื่อนไหวเพื่อหันทิศทางของเส้นทางการเคลื่อนไหว (เช่น ในขณะที่ไปตามการโค้งลงด้านล่างของเส้นทางการเคลื่อนไหว องค์ประกอบจะเอียงลงด้านล่าง) ควบคุมความแม่นยำของการหมุนด้วยคุณสมบัติความคลาดเคลื่อนของมุมที่ยอมรับได้
ความคลาดเคลื่อนของตำแหน่งที่ยอมรับได้	ตั้งค่าระยะห่างขององค์ประกอบที่สามารถเบี่ยงเบนจากเส้นทางการเคลื่อนไหวได้ ค่าเริ่มต้น: 0.5 พิกเซล ขั้นต่ำ: 0.1 พิกเซล สูงสุด: 100 พิกเซล
ความคลาดเคลื่อนของมุมที่ยอมรับได้	ควบคุมค่าส่วนต่างระหว่างการวางแนวขององค์ประกอบกับการวางแนวของเส้นทางการเคลื่อนไหว ใช้งานได้เมื่อเปิดใช้งานตัวเลือกวางแนวตามเส้นทางแล้วเท่านั้น ค่าเริ่มต้น: 1° ขั้นต่ำ: 1° สูงสุด: 360°
ปรับแต่งเส้นโค้ง	คลิกปุ่ม เพื่อลดขนาด CSS ที่ใช้ในการสร้างภาพเคลื่อนไหวในเส้นทางการเคลื่อนไหว หลังจากการเพิ่มประสิทธิภาพ คุณจะใช้ปุ่มนี้ไม่ได้กว่าจะเปลี่ยนแปลงเส้นทางการเคลื่อนไหว
ขนาดโดยประมาณ	แสดงขนาดโดยประมาณของเส้นทางการเคลื่อนไหว หากต้องการบีบอัดเพิ่มเติม ให้ใช้ปุ่มปรับแต่งเส้นโค้ง

ข้อจำกัด

• การจัดตำแหน่งด้านบน/ซ้าย - เส้นทางการเคลื่อนไหวไม่รองรับการจัดตำแหน่งด้านบน/ซ้าย ขอแนะนำให้ใช้คุณสมบัติการเปลี่ยนรูปแบบของ CSS แทน (ตัวเลือกนี้เป็นค่าเริ่มต้น)
• ภาพเคลื่อนไหว 3 มิติ - Google Web Designer ไม่รองรับเส้นทางการเคลื่อนไหวแบบ 3 มิติ คุณใช้การเปลี่ยนตำแหน่งแบบ 3 มิติ แยกกันกับองค์ประกอบได้
• แผง CSS - แผง CSS จะไม่ส่งผลต่อเส้นทางการเคลื่อนไหว แม้ว่าจะยังมีการใช้รูปแบบกับองค์ประกอบนั้นๆ อยู่ก็ตาม
• มุมมองโค้ด - คุณจะดูหรือแก้ไขเส้นทางการเคลื่อนไหวในมุมมองโค้ดไม่ได้
• โฆษณาแบบรูปภาพ - เครื่องมือเส้นทางการเคลื่อนไหวไม่พร้อมใช้งานในโฆษณาแบบรูปภาพ