เมื่อสร้างภาพเคลื่อนไหวในไทม์ไลน์แล้ว คุณจะปรับแต่งได้โดยแก้ไของค์ประกอบที่เคลื่อนไหวได้ โดยเปลี่ยนคีย์เฟรมและระยะเวลา และโดยเล่นภาพเคลื่อนไหวแบบวนซ้ำ
หัวข้อในหน้านี้
แก้ไของค์ประกอบที่เคลื่อนไหวได้
เมื่อคุณเปลี่ยนคุณสมบัติขององค์ประกอบที่เคลื่อนไหวได้ จะมีการเพิ่มคีย์เฟรมโดยอัตโนมัติที่ตำแหน่งส่วนหัวของตัวควบคุมการเล่น หากตรงนั้นยังไม่มีคีย์เฟรม คุณเลือกคีย์เฟรมที่มีอยู่เพื่อแก้ไของค์ประกอบ ณ จุดที่ต้องการในไทม์ไลน์ก็ได้เช่นกัน ภาพเคลื่อนไหวที่อยู่ก่อนหน้าหรือถัดมาจะปรับให้เริ่มหรือสิ้นสุดตามคุณสมบัติที่เปลี่ยนไป
หากคุณเปลี่ยนแปลงคุณสมบัติที่คีย์เฟรมแรก จะเป็นการแก้ไขคุณสมบัติฐานขององค์ประกอบนั้น คีย์เฟรมที่ตามมาจะสืบทอดคุณสมบัติฐานยกเว้นกรณีที่คุณระบุค่าคุณสมบัติเป็นค่าอื่นที่คีย์เฟรมเหล่านั้น
หากคุณเลือกหลายคีย์เฟรม และแก้ไขคุณสมบัติขององค์ประกอบหนึ่งหรือหลายองค์ประกอบ การเปลี่ยนแปลงจะมีผลกับคีย์เฟรมที่เลือกทั้งหมด
หากองค์ประกอบหนึ่งไม่จําเป็นต้องอยู่ในไทม์ไลน์ภาพเคลื่อนไหวทั้งหมด คุณอาจต้องตั้งค่าช่วงการมองเห็นเพื่อให้องค์ประกอบดังกล่าวอยู่นอกช่วง
เปลี่ยนฟีเจอร์การค่อยๆ เปลี่ยนภาพเคลื่อนไหว
หากต้องการเปลี่ยนลักษณะการค่อยๆ เปลี่ยนของภาพเคลื่อนไหว ให้คลิกขวาที่ระยะเวลาที่ต้องการเปลี่ยน แล้วเลือกการค่อยๆ เปลี่ยนใหม่ หรือตัวเลือกการค่อยๆ เปลี่ยน... เพื่อระบุการค่อยๆ เปลี่ยนที่กำหนดเอง
เล่นภาพเคลื่อนไหวแบบวนซ้ำ
- บนไทม์ไลน์ ให้คลิกปุ่มตั้งค่าการเล่นซ้ำภาพเคลื่อนไหว
บนเลเยอร์ภาพเคลื่อนไหวที่ต้องการให้วนซ้ำ
- ในเมนูป๊อปอัป ให้เลือกตัวเลือกดังนี้
- ไม่มีสิ้นสุด - ภาพเคลื่อนไหวจะวนซ้ำไม่มีสิ้นสุด
- ___ ครั้ง - ภาพเคลื่อนไหวจะวนซ้ำตามจำนวนครั้งที่ระบุ
- ไม่มี - ภาพเคลื่อนไหวจะไม่วนซ้ำ
เลเยอร์ที่มีช่วงการมองเห็นจะวนซ้ำไม่ได้
การวนซ้ำเลเยอร์จะเปลี่ยนแปลงภาพเคลื่อนไหวในเอกสารที่เผยแพร่
การเล่นภาพเคลื่อนไหวแบบวนซ้ำจะมีผลต่อการแสดงตัวอย่างในพื้นที่งานเท่านั้น
ปรับคีย์เฟรมและระยะเวลาบนไทม์ไลน์
เลือกคีย์เฟรมและระยะเวลา
การเพิ่มคีย์เฟรมและระยะเวลาทำได้หลายวิธีดังนี้
- คลิกเพื่อเลือกคีย์เฟรมหรือระยะเวลา การเลือกคีย์เฟรมต่อเนื่องกัน 2 คีย์เฟรมจะเป็นการเลือกระยะเวลาระหว่างคีย์เฟรมเหล่านั้นด้วย เช่นเดียวกัน การเลือกระยะเวลาจะเป็นการเลือกคีย์เฟรมที่อยู่รอบๆ โดยอัตโนมัติด้วย
- Shift + คลิกเพื่อเลือกคีย์เฟรมหรือระยะเวลาหลายรายการที่อยู่ติดกัน
- Ctrl + คลิก (Windows) หรือ ⌘ + คลิก (Mac) เพื่อเลือกหรือยกเลิกการเลือกคีย์เฟรมหรือระยะเวลาที่ไม่ได้อยู่ติดกัน
- คลิกแล้วลากเส้นมาร์คีการเลือกเป็นรูปสี่เหลี่ยมเพื่อเลือกคีย์เฟรมทั้งหมดภายในสี่เหลี่ยม จะมีการเลือกระยะเวลาต่อเมื่อคีย์เฟรมทั้งสองรวมอยู่ในเส้นมาร์คีเท่านั้น
- Ctrl + คลิกแล้วลาก (Windows) หรือ ⌘ + คลิกแล้วลาก (Mac) เส้นมาร์คีเพื่อสลับระหว่างเลือกและไม่เลือกคีย์เฟรม ระบบจะเลือกคีย์เฟรมในสี่เหลี่ยมที่ไม่ได้เลือกอยู่และยกเลิกการเลือกคีย์เฟรมที่เลือกอยู่ตอนนี้ ขอแจ้งอีกครั้งว่าจะมีการเลือกระยะเวลาต่อเมื่อคีย์เฟรมทั้งสองรวมอยู่ในเส้นมาร์คีเท่านั้น
-
ดับเบิลคลิกเลเยอร์ภายในไทม์ไลน์เพื่อเลือกคีย์เฟรม ระยะเวลา และแฮนเดิลระดับการมองเห็นทั้งหมดสําหรับเลเยอร์นั้น
ย้ายคีย์เฟรมและระยะเวลา
หลังจากเลือกคีย์เฟรมและระยะเวลาแล้ว คุณจะย้ายคีย์เฟรมหรือระยะเวลานั้นได้โดยลากไปยังตำแหน่งใหม่บนไทม์ไลน์ การกำหนดเวลาของภาพเคลื่อนไหวจะเปลี่ยนตามไปด้วย
ปรับขนาดภาพเคลื่อนไหว
คุณปรับขนาดภาพเคลื่อนไหวให้ยาวขึ้นหรือสั้นลงโดยยังรักษาระยะห่างระหว่างคีย์เฟรมตามสัดส่วนได้ โปรดทำตามขั้นตอนเหล่านี้เพื่อปรับขนาดภาพเคลื่อนไหว
- เลือกคีย์เฟรมหรือระยะเวลาที่ต้องการปรับขนาด โดยเลือกจากคนละเลเยอร์ได้
- กด Shift ค้างไว้แล้วลากคีย์เฟรมหนึ่งที่เลือกไว้ไปทางซ้ายหรือขวา ภาพเคลื่อนไหวจะหดสั้นลงหรือยืดยาวขึ้น โดยขึ้นอยู่กับว่าคุณลากเข้าหาหรือออกจากจุดกึ่งกลางของภาพเคลื่อนไหว คีย์เฟรมอื่นๆ ที่เลือกไว้จะย้ายเป็นระยะห่างตามสัดส่วนไปด้วย ยกเว้นคีย์เฟรมที่อยู่ท้ายสุด ซึ่งจะยังคงอยู่กับที่
- หากคุณเปิดใช้การสแนปไทม์ไลน์ไว้ การสแนปจะมีผลกับคีย์เฟรมที่คุณลากเท่านั้น
- คีย์เฟรมต้องไม่ทับซ้อนกันหรือห่างจากกันไม่ถึง 0.1 มิลลิวินาที
- คีย์เฟรมที่ไม่ได้เลือกจะไม่เคลื่อนที่ แต่อาจจำกัดการเคลื่อนที่ของคีย์เฟรมที่เลือก
การปรับสัดส่วนคีย์เฟรมของไทม์ไลน์
คัดลอกและวางคีย์เฟรม
คุณจะคัดลอกและวางคีย์เฟรมลงบนเวลาอื่นในเลเยอร์เดียวกัน บนเลเยอร์อื่น หรือแม้กระทั่งบนหน้าอื่นหรือไทม์ไลน์ของเอกสารอื่นก็ได้ คีย์เฟรมที่วางจะยังคงมีคุณสมบัติที่เคลื่อนไหวได้เหมือนเดิม แต่จะไม่คงการค่อยๆ เปลี่ยนภาพเคลื่อนไหวหรือเส้นทางการเคลื่อนไหวเอาไว้
คุณจะคัดลอกและวางคีย์เฟรมโดยใช้วิธีการใดก็ได้ต่อไปนี้
-
เลือกคีย์เฟรมเพื่อคัดลอก กด Control+C (Windows) หรือ ⌘+C (Mac) แล้วคลิกตำแหน่งใหม่บนไทม์ไลน์และเลือกเลเยอร์เป้าหมาย 1 เลเยอร์หรือหลายเลเยอร์ก็ได้ กด Control+V (Windows) หรือ ⌘+V (Mac) เพื่อวาง
-
คลิกขวาที่คีย์เฟรมเพื่อคัดลอก เลือกคัดลอกคีย์เฟรมจากเมนูป๊อปอัป จากนั้นคลิกขวาที่ตำแหน่งใหม่บนไทม์ไลน์สำหรับเลเยอร์เป้าหมาย แล้วเลือกวางคีย์เฟรมจากเมนูป๊อปอัป
-
Alt + คลิกแล้วลาก (Windows), Option + คลิกแล้วลาก (Mac) หรือคลิก + Alt แล้วลาก (Linux) คีย์เฟรมเพื่อทำซ้ำรายการนั้นที่ตำแหน่งสิ้นสุด วิธีการนี้จะใช้ไม่ได้ระหว่างหน้า เอกสาร หรือไทม์ไลน์สำหรับภาพเคลื่อนไหวที่ซ้อนกัน
หากคุณคัดลอกและวางคีย์เฟรมลงในเลเยอร์ที่ไม่มีคีย์เฟรมก่อนหน้านี้ คีย์เฟรมใหม่จะแทรกที่ 0 วินาทีโดยอัตโนมัติพร้อมกับคีย์เฟรมที่วางไว้ ยกเว้นว่าคุณจะวางคีย์เฟรมที่ 0 วินาที
หากคุณคัดลอกและวางคีย์เฟรมบนคีย์เฟรมที่มีอยู่แล้ว คุณสมบัติที่เคลื่อนไหวได้ของคีย์เฟรมที่วางจะแทนที่คุณสมบัติที่เคลื่อนไหวได้ของคีย์เฟรมที่มีอยู่แล้วและสอดคล้องกัน
ลบคีย์เฟรม
หากต้องการลบคีย์เฟรม ให้คลิกขวา (Windows) หรือ Control + คลิก (Mac) ที่คีย์เฟรม แล้วเลือกลบจากเมนูป๊อปอัป
แก้ไขกฎคีย์เฟรมในแผง CSS
หากคุณคุ้นเคยกับกฎคีย์เฟรม CSS แล้ว (เริ่มต้นด้วยคีย์เวิร์ด @keyframes) คุณจะใช้แผง CSS เพื่อดูและแก้ไขรูปแบบภาพเคลื่อนไหวขณะอยู่ในมุมมองการออกแบบได้ ไทม์ไลน์และพื้นที่งานจะแสดงให้เห็นการเปลี่ยนแปลงที่คุณทำในแผงโดยอัตโนมัติ
การทำงานกับกฎคีย์เฟรม
- เลือกองค์ประกอบที่เคลื่อนไหวได้ 1 รายการเพื่อดูกฎคีย์เฟรมสำหรับองค์ประกอบนั้นในแผง CSS
- เพิ่มคีย์เฟรมระหว่างคีย์เฟรมที่มีอยู่ด้วยการคลิกแทรกคีย์เฟรม
- แก้ไขเปอร์เซ็นต์ของคีย์เฟรม
- เพิ่ม แก้ไข และลบคุณสมบัติเคลื่อนไหวของคีย์เฟรม
- เปิดหรือปิดใช้คุณสมบัติเคลื่อนไหวในภาพเคลื่อนไหวทั้งหมดโดยคลิกช่องทำเครื่องหมายข้างชื่อคุณสมบัติ
- ลบคีย์เฟรมแต่ละรายการด้วยการล้างเปอร์เซ็นต์หรือลบคุณสมบัติเคลื่อนไหวทั้งหมดสำหรับคีย์เฟรมนั้นๆ
- ลบภาพเคลื่อนไหว CSS ทั้งหมดสำหรับองค์ประกอบหนึ่งๆ โดยเลือกกฎคีย์เฟรมและคลิกปุ่มลบกฎที่เลือก
ที่ด้านล่างของแผง
ข้อจำกัด
- คุณจะแก้ไขการค่อยๆ เปลี่ยนไม่ได้
- คุณจะเพิ่มคีย์เฟรมหลังคีย์เฟรมสุดท้ายไม่ได้ ให้ใช้ไทม์ไลน์แทน
ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้แผง CSS