ตอนนี้เราได้เริ่มใช้ไทม์ไลน์อย่างเป็นทางการเพื่อสร้างแอนิเมชั่น ซึ่งแตกต่างจากแอนิเมชั่นแบบเฟรมก่อนหน้าของเรามาก แต่เมื่อเปรียบเทียบแล้ว วิธีไทม์ไลน์นั้นใช้งานง่ายและเรียบง่ายกว่า และมันจะเป็นวิธีการผลิตหลักของเราในอนาคตด้วย .
หลังจากเนื้อหาของบทเรียนที่แล้ว ให้เริ่มสร้างภาพเคลื่อนไหว "มาและไปอย่างเงียบๆ" ขยายโครงการแอนิเมชั่นของเลเยอร์ข้อความนี้ในแถบสีไทม์ไลน์ ดังแสดงในรูปด้านล่าง ตรวจสอบให้แน่ใจว่าเวลาปัจจุบันคือ 0:00:00:00 น. และโปรดทราบว่าเครื่องหมายเวลาที่ลูกศรสีแดงควรอยู่ทางซ้ายสุด ซึ่งหมายความว่าเป็นเวลาเริ่มต้น
จากนั้นใช้เครื่องมือย้ายเพื่อย้าย "Quietly Come and Go" ไปทางด้านขวาสุดของหน้าจอ จากนั้นคลิกปุ่มนาฬิกาจับเวลาที่ลูกศรสีส้ม
ซึ่งหมายความว่าโปรเจ็กต์แอนิเมชั่น "ตำแหน่ง" เริ่มต้นขึ้นแล้ว และตำแหน่งปัจจุบันของเลเยอร์ข้อความ (ปลายขวาสุดของหน้าจอ) จะถูกบันทึก ณ วินาทีเริ่มต้น เพชรสีเหลืองที่ปรากฏในพื้นที่ไทม์ไลน์เป็นสัญญาณว่ามีบันทึกอยู่ที่นั่น ซึ่งเรียกอีกอย่างว่าคีย์เฟรม ซึ่งเป็นคีย์เฟรมของไทม์ไลน์ มันแตกต่างจากแอนิเมชั่นเฟรมการเปลี่ยนแปลงที่เราเรียนรู้มาก่อน
ดึงเครื่องหมายเวลาไปทางขวาสุดแล้วใช้เครื่องมือย้ายเพื่อย้ายข้อความไปทางซ้ายสุดของหน้าจอ ในเวลานี้ คุณจะเห็นคีย์เฟรมที่สร้างขึ้นโดยอัตโนมัติที่เครื่องหมายบนไทม์ไลน์ ดังภาพด้านล่าง และสังเกตว่ามีปุ่ม Delete/Add เป็นรูปเพชรอยู่ที่ลูกศรสีแดง
หากกดปุ่มนี้ในเวลานี้ คีย์เฟรมที่สร้างไว้ ณ เครื่องหมายเวลาจะถูกลบ หากไม่มีคีย์เฟรมอยู่ที่เกณฑ์มาตรฐาน คลิกเพื่อสร้างเฟรมใหม่
ควรสังเกตว่าในที่นี้เกณฑ์มาตรฐานเวลาของเราสามารถดึงไปทางขวาได้สูงสุด 04:04 ไม่ใช่ 05:00 น. เท่านั้น เนื่องจากเวลา 05:00 น. เป็นช่วงเวลาที่ภาพเคลื่อนไหวสิ้นสุดลงในที่สุด ซึ่งเป็นช่วงเวลาของ "จุดสิ้นสุดของเฟรมสุดท้าย" แต่สิ่งที่เราต้องตั้งค่าตอนนี้คือสถานะของ "จุดเริ่มต้นของเฟรมสุดท้าย" และ เฟรมสุดท้ายจะคงอยู่ชั่วขณะหนึ่ง ดังนั้นเกณฑ์มาตรฐานจะไม่อยู่ที่ 05:00 น. โปรดจำไว้ว่าเฟรมนั้นเป็นหน่วยที่เล็กที่สุด
ด้วยการตั้งค่าข้างต้น เราได้เสร็จสิ้นการตั้งค่าการเคลื่อนที่ตำแหน่งของข้อความ "Quietly Come and Go" จากนั้นตั้งค่าการเปลี่ยนแปลงความโปร่งใส มาสร้างแบบง่ายๆ กันก่อน นั่นคือ เฟดอินตั้งแต่ต้น ปรากฏเต็มที่ครึ่งทาง แล้วค่อยเฟดออกไปจนจบ ซึ่งต้องใช้ 3 คีย์เฟรมในการตั้งค่า ตั้งค่าเป็น 0% ที่จุดเริ่มต้น 100% ในช่วงพักครึ่งแรก และตั้งค่าเป็น 0% ที่ตอนท้าย โดยประมาณตามภาพด้านล่าง โปรดทราบว่าการเปลี่ยนแปลงความโปร่งใสไม่สามารถทำได้โดยการซ่อนเลเยอร์ในโหมดไทม์ไลน์
หลังจากที่เราตั้งค่าคีย์เฟรมเป็น 1 ถึง 0% ในขั้นตอนแรกแล้ว หากเราดึงเครื่องหมายเวลาไปข้างหลัง เราจะพบว่าความโปร่งใสเป็น 0% ตลอดเวลา หลังจากตั้งค่าคีย์เฟรม 2 ในขั้นตอนที่สองแล้ว คุณจะพบว่ามีเอฟเฟกต์การเปลี่ยนแปลงระหว่าง 12 แต่หลังจากคีย์เฟรม 2 ไปจนถึงจุดสิ้นสุด ข้อความจะแสดงอยู่เสมอ สิ่งนี้นำมาซึ่งคุณสมบัติที่สำคัญมากของไทม์ไลน์: การตั้งค่าคีย์เฟรม ณ ช่วงเวลาหนึ่งจะมีผลตลอดเวลาหลังจากช่วงเวลานั้น ดังนั้น การตั้งค่าคีย์เฟรม 1 ทำให้เลเยอร์ข้อความเป็น 0% สำหรับช่วงเวลาที่ตามมาทั้งหมด (ระหว่าง 12 ถึง 23) เมื่อตั้งค่าคีย์เฟรม 2 การเปลี่ยนแปลงจะเกิดขึ้นระหว่าง 12 ถึง 23 และกระบวนการทั้งหมดระหว่าง 23 ถึง 23 จะกลายเป็น 100% จนกว่าจะตั้งค่าคีย์เฟรม 3 การเปลี่ยนแปลงจะเกิดขึ้นระหว่าง 23
ในส่วนของลำดับการตั้งค่าไม่จำเป็นต้องปฏิบัติตามลำดับข้างต้นทั้งหมด "มาและไปอย่างเงียบๆ" เดิมเป็น 100% ดังนั้นเราจึงสามารถสร้างคีย์เฟรมได้ในครึ่งเวลาโดยไม่ต้องตั้งค่าความทึบ เนื่องจากควรตั้งค่าเป็น 100% ในขณะนี้ จากนั้นสร้างคีย์เฟรมในช่วงเริ่มต้นและสิ้นสุด และปรับเป็น 0%
เลิกทำการตั้งค่าก่อนหน้าและทำตามลำดับใหม่ กล่าวคือ เปลี่ยนลำดับจาก 1, 2, 3 เป็น 2, 1, 3 เนื่องจากความทึบของช่วงเวลาเริ่มต้นและสิ้นสุด (1 และ 2) เท่ากัน เราจึงสามารถทำได้โดยการคัดลอกและวางคีย์เฟรม ขั้นแรกให้สร้างคีย์เฟรมทั้งสองนี้ หลังจากตั้งเวลาเริ่มต้นแล้ว ให้ทำเครื่องหมายคีย์เฟรมในไทม์ไลน์
คลิกขวาที่มันแล้วเลือก "คัดลอกคีย์เฟรม" จากนั้นคลิกขวาที่เครื่องหมายช่วงเวลาสิ้นสุดและเลือก "วางคีย์เฟรม" เพื่อคัดลอกการตั้งค่าของอันแรกไปยังอันหลัง คำสั่งซื้อยังสามารถกลับรายการได้ วิธีการนี้ใช้ได้กับคีย์เฟรมที่มีอยู่ทั้งหมด
นึกถึงการเฟดเข้าและเฟดเอาท์ที่กล่าวถึงก่อนหน้านี้เมื่อเรียนรู้การสร้างแอนิเมชั่นเฟรมการเปลี่ยนภาพ คุณจะรู้ว่าเอฟเฟกต์ของการตั้งค่า 3 เฟรมในปัจจุบันนั้นไม่เหมาะ ข้อความที่จะเคลื่อนไหวระหว่างการเคลื่อนไหวยังคงแสดงออกมาอย่างสมบูรณ์เกือบตลอดเวลา ตอนนี้เราจะแก้ไขมันตาม 3 เฟรมก่อนหน้า
คุณอาจต้องการเพิ่มอีกสองเฟรมก่อนและหลังเฟรมเดิม 2 ดังแสดงที่ด้านบนของภาพด้านล่าง จริงๆ แล้วเพียงแค่ย้ายเฟรมเดิม 2 ดังภาพด้านล่าง แล้วเพิ่มเฟรมใหม่เข้าไป การตั้งค่าสามารถคัดลอกได้จากเฟรมเดิม 2 ด้วยวิธีนี้เราได้เสร็จสิ้นการแก้ไขเฟดเข้าและเฟดเอาท์แล้ว
จากการดำเนินการข้างต้น เราสามารถสรุปคุณลักษณะพื้นฐานของแอนิเมชันไทม์ไลน์ได้ ซึ่งก็คือการแยกโปรเจ็กต์แอนิเมชันแต่ละโปรเจ็กต์ออกจากกัน และการแก้ไขโปรเจ็กต์ใดโปรเจ็กต์หนึ่งจะไม่ส่งผลกระทบต่อโปรเจ็กต์อื่น ตัวอย่างเช่น เมื่อเราแก้ไข "ความโปร่งใส" เราไม่จำเป็นต้องพิจารณา "จุดยืน" ที่ตั้งไว้ก่อนหน้านี้ นอกจากนี้ การตั้งค่าคีย์เฟรมของแต่ละโปรเจ็กต์ยังได้รับอนุญาตให้แตกต่างกันได้ ดังนั้นจึงไม่จำเป็นต้องกังวลเกี่ยวกับการรวมจำนวนคีย์เฟรมเข้าด้วยกัน
มีปัญหาที่ต้องสังเกตเกี่ยวกับการเพิ่มคีย์เฟรม นั่นคือความแตกต่างระหว่างการเพิ่มอัตโนมัติและการเพิ่มด้วยตนเอง เมื่อคลิกปุ่มนาฬิกาจับเวลาของรายการ จากนั้น โปรเจ็กต์จะสร้างคีย์เฟรม ณ เกณฑ์มาตรฐานเวลา และติดตามการเปลี่ยนแปลงในโปรเจ็กต์ในช่วงเวลาอื่นโดยอัตโนมัติ ซึ่งหมายความว่าหากคุณย้ายเครื่องหมายเวลาไปยังตำแหน่งใหม่และทำการเปลี่ยนแปลงรายการนั้นบนเลเยอร์ เฟรมใหม่จะถูกสร้างขึ้นโดยอัตโนมัติที่เครื่องหมายปัจจุบัน หากคุณไม่ได้ทำการเปลี่ยนแปลงใดๆ และต้องการสร้างคีย์เฟรม คุณต้องคลิกด้วยตนเอง ปุ่ม (โปรดทราบว่าการคลิกที่เฟรมที่มีอยู่จะเป็นการลบเฟรมนั้น) คลิกที่เฟรมก่อนหน้า
และเฟรมถัดไป ปุ่มเพื่อข้ามระหว่างคีย์เฟรม คุณยังสามารถคลิกขวาที่คีย์เฟรมได้โดยตรงแล้วเลือกลบเฟรม
โดยทั่วไปแล้ว เราจะคลิกปุ่มนาฬิกาจับเวลาที่จุดเริ่มต้นของภาพเคลื่อนไหว สร้างคีย์เฟรมแรก จากนั้นย้ายเครื่องหมายไปยังช่วงเวลาที่เหมาะสม ทำการเปลี่ยนแปลงเลเยอร์ที่สอดคล้องกัน และรับคีย์เฟรมอัตโนมัติใหม่ เสร็จสิ้นกระบวนการตั้งค่าทั้งหมดซ้ำแล้วซ้ำอีก ในทางกลับกัน มีโอกาสไม่มากนักที่จะสร้างเฟรมด้วยตนเอง เนื่องจากทั้งหมดนี้มีไว้สำหรับการตั้งค่า และเอฟเฟกต์ก็ไม่แตกต่างจากเฟรมที่เพิ่มโดยอัตโนมัติมากนัก ในบทเรียนต่อๆ ไป การเพิ่มเฟรมด้วยตนเองจะถูกนำมาใช้เมื่อสร้างเอฟเฟกต์การเร่งความเร็วและการชะลอตัว
นอกเหนือจากโปรเจ็กต์เดียวแล้ว ยังสามารถตั้งค่าโปรเจ็กต์แอนิเมชั่นหลายรายการพร้อมกันได้ และจะถูกติดตามโดยอัตโนมัติ ตอนนี้เราย้ายเกณฑ์มาตรฐานเวลาไปยังช่วงเวลาเริ่มต้น ดังแสดงในรูปด้านล่าง เริ่มโครงการแอนิเมชันที่สอดคล้องกันของ "Go and Stay" และ "Shape 1" จากนั้นดึงเกณฑ์มาตรฐานเวลาไปยังช่วงเวลาต่างๆ เปลี่ยนตำแหน่งและความทึบตามลำดับ . เครื่องหมายกรอบจะทิ้งไว้ทุกที่ที่มีการเปลี่ยนแปลง
ควรสังเกตว่าเนื่องจาก "รูปร่าง 1" เป็นเลเยอร์มาสก์เวกเตอร์ เพื่อบันทึกการเคลื่อนที่ของตำแหน่ง คุณต้องใช้รายการ "ตำแหน่งมาสก์เวกเตอร์" แทน "ตำแหน่ง"
อีกสิ่งหนึ่งที่ต้องพูดถึงคือตัวบ่งชี้บัฟเฟอร์การเรนเดอร์ที่กล่าวถึงในบทเรียนที่แล้ว คุณอาจค้นพบว่าเมื่อเล่นและดึงเกณฑ์มาตรฐานเวลา ตัวบ่งชี้บัฟเฟอร์การเรนเดอร์ในพื้นที่ที่เกี่ยวข้องจะถูกเติมเต็ม ซึ่งหมายความว่า Photoshop มีเนื้อหาเฉพาะของ ภาพเคลื่อนไหวถูกเก็บไว้ในแคชของระบบซึ่งสามารถปรับปรุงความเร็วเมื่อเล่นอีกครั้ง แต่หากมีการเปลี่ยนแปลงกับภาพเคลื่อนไหว บัฟเฟอร์การเรนเดอร์จะถูกล้าง แอนิเมชั่นที่เรากำลังสร้างตอนนี้ค่อนข้างง่าย ดังนั้นการบัฟเฟอร์หรือไม่เหมือนกัน แต่ถ้าคุณสร้างแอนิเมชั่นที่ซับซ้อนมากขึ้นในอนาคต โดยเฉพาะอย่างยิ่งเมื่อมีภาพหลายภาพปะปนกันในแอนิเมชั่น ความแตกต่างในการบัฟเฟอร์จะอยู่ที่ สะท้อนให้เห็น
ในบทเรียนนี้ เราได้เรียนรู้วิธีหลักในการสร้างภาพเคลื่อนไหวโดยใช้วิธีไทม์ไลน์ เมื่อเปรียบเทียบกับวิธีการเปลี่ยนเฟรมที่เราได้เรียนรู้ก่อนหน้านี้ วิธีการไทม์ไลน์ไม่เพียงสร้างได้เร็วกว่าเท่านั้น แต่ยังสะดวกในการแก้ไขอีกด้วย จากนี้ไปเราจะสร้างแอนิเมชั่นส่วนใหญ่ด้วยวิธีนี้ จนถึงตอนนี้เราได้อธิบายความรู้พื้นฐานเกี่ยวกับการผลิตแอนิเมชั่นแล้ว หลักสูตรต่อไปนี้จะอธิบายเทคนิคขั้นสูงเพิ่มเติมและวิธีการสร้างแอนิเมชั่นที่เหมาะกับสื่อต่างๆ เช่น หน้าเว็บและโทรศัพท์มือถือ
ในส่วนถัดไป เราจะแนะนำวิธี ใช้สไตล์เลเยอร์เพื่อสร้างภาพเคลื่อนไหว