มาพูดถึงการบ้านของคลาสที่แล้วกันก่อน แอนิเมชั่นทั้งสามที่เราขอให้ทุกคนทำให้ทั้งหมดมีเอฟเฟกต์เฟดเข้าและออก แต่ถ้าคุณมองใกล้ ๆ คุณจะพบความแตกต่าง
ภาพเคลื่อนไหวแรกจะค่อยๆ ปรากฏขณะที่ข้อความเคลื่อนไหว ข้อความจะชัดเจนที่สุดเมื่อเคลื่อนไหวไปได้ครึ่งทาง แล้วจึงค่อยๆ หายไปขณะเคลื่อนไหว หากคุณใช้การเปลี่ยนเฟรม คุณจะต้องกำหนด 3 เฟรมหลักก่อน ข้อความในเฟรมแรกควรอยู่ที่ด้านขวาสุดโดยมีความทึบ 0% (หรือซ่อนเลเยอร์ข้อความในเฟรมที่สอง) อยู่ตรงกลางด้วยความโปร่งใส 100% ข้อความในเฟรม 3 จะอยู่ทางซ้ายสุด และความทึบจะกลับไปเป็น 0% (หรือซ่อนเลเยอร์) โดยประมาณตามภาพด้านล่าง
จากนั้นเปลี่ยนระหว่างเฟรม 12 และเฟรม 23 ตามลำดับ โดยเพิ่มเฟรมละประมาณ 5 เฟรม คุณสามารถตั้งค่าเวลาหน่วงของเฟรมได้ด้วยตัวเอง ในภาพเคลื่อนไหวนี้ ข้อความจะค่อยๆ ปรากฏและหายไปพร้อมกับการเคลื่อนไหว ความโปร่งใสเปลี่ยนแปลงตลอดการเคลื่อนไหว
ในภาพเคลื่อนไหวที่สอง ข้อความยังคงอยู่เมื่อจางหายไปทางด้านขวาสุด และเริ่มเคลื่อนไหวหลังจากที่มองเห็นได้ชัดเจนแล้ว พอเคลื่อนไปทางซ้ายสุดก็จางหายไปในขณะที่ยังนิ่งอยู่ จากนั้นคีย์เฟรมควรเป็น 4 เฟรมโดยประมาณดังภาพด้านซ้ายด้านล่าง เพียงตั้งค่าการเปลี่ยนผ่านระหว่าง 4 เฟรมนี้ตามลำดับ
แม้ว่าสามารถกำหนดจำนวนเฟรมการเปลี่ยนภาพที่ระบุได้ตามต้องการ แต่จากมุมมองการออกแบบ การเปลี่ยนระหว่างเฟรม 12 และเฟรม 34 ควรน้อยกว่านี้ ประมาณ 3 ถึง 4 เฟรม ควรมีการเปลี่ยนแปลงระหว่างเฟรม 23 ค่อนข้างมากขึ้น ประมาณ 6 ถึง 7 เฟรม เนื่องจากเมื่อเคลื่อนที่ในระยะทางเดียวกัน ยิ่งจำนวนเฟรมน้อย การเคลื่อนไหวต่อเฟรมก็จะเร็วขึ้น และจำนวนเฟรมยิ่งมาก การเคลื่อนที่ก็จะยิ่งช้าลง ดังภาพขวาล่างคือระยะการเคลื่อนที่ของแต่ละเฟรม 3 เฟรม 4 เฟรม และ 7 เฟรม ตามทฤษฎีแล้ว ยิ่งจำนวนเฟรมมากเท่าไร แอนิเมชั่นก็จะยิ่งสมบูรณ์และมีรายละเอียดมากขึ้นเท่านั้น
แอนิเมชั่นของเราจะแสดงเนื้อหาข้อความเป็นหลัก เพื่อให้ผู้ชมมองเห็นได้ชัดเจน หากคุณตั้งค่าจำนวนเฟรมเฟดเข้าและเฟดออกให้ใหญ่มากและจำนวนเฟรมที่เคลื่อนไหวให้น้อยมาก จะทำให้เกิดสถานการณ์ที่ข้อความค่อยๆ จางลง จากนั้นเลื่อนอย่างรวดเร็ว แล้วค่อยจางหายไป ละเอียดอ่อนมาก บางทีผู้ดูยังสามารถเข้าใจเนื้อหาของข้อความได้ แต่วิธีการนำเสนอนี้ไม่เหมาะสม แม้ว่าบางครั้งสิ่งนี้อาจกลายเป็นเทคนิคการแสดงออกที่แหวกแนวได้เช่นกัน
ตอนนี้เราได้สร้างแอนิเมชั่นสองเรื่องในเรื่องเดียวกัน ทั้งที่มีเอฟเฟ็กต์การจางและการเคลื่อนไหว แต่ทั้งสองมีข้อบกพร่องด้านการแสดงออก ข้อเสียของภาพเคลื่อนไหวแรกคือการเปลี่ยนความทึบยาวเกินไป ข้อความจะมองเห็นได้ทั้งหมดในเฟรมเดียวเท่านั้นระหว่างภาพเคลื่อนไหวทั้งหมด เป็นแบบกึ่งโปร่งใสทั้งก่อนและหลัง สิ่งนี้ไม่ได้เน้นความสำคัญของข้อความและอาจทำให้ผู้ดูอ่านได้ยาก
คุณอาจคิดว่าปัญหานี้ไม่มีอยู่ เนื่องจากข้อความในภาพเคลื่อนไหวแรกดูชัดเจนมาก แต่เราใช้ความทึบ 100% เป็นสถานะการแสดงผลขั้นสุดท้าย ด้วยวิธีนี้ ตามการเปลี่ยน 5 เฟรม แต่ละเฟรมจะเพิ่มขึ้น 20% นั่นคือแม้ว่าเฟรมแรกจะเป็น 0% แต่เฟรมที่สองถึง 20% ดังนั้นโดยพื้นฐานแล้วจึงไม่มีปัญหาในการอ่าน หากในสถานการณ์อื่น ความทึบสุดท้ายไม่ใช่ 100% แต่เพียง 30% หรือต่ำกว่า ความทึบที่เพิ่มขึ้นในแต่ละเฟรมจะน้อยมาก ดังนั้น แม้ว่าความทึบสุดท้าย 30% ก็เพียงพอแล้ว ก็จำเป็นสำหรับการอ่าน แต่ความทึบจะจางลง อยู่ระหว่างดำเนินการจะมองเห็นได้ยากและส่งผลต่อการอ่าน คุณสามารถตั้งค่าความทึบสุดท้ายเป็น 30%, 10% ฯลฯ แล้วลองอีกครั้ง
ในทางตรงกันข้าม ภาพเคลื่อนไหวที่สองจะหลีกเลี่ยงข้อบกพร่องนี้ โดยจะทำให้ข้อความจางลงและจางลงแยกจากกัน คงรูปเดิมไว้ระหว่างการเคลื่อนไหว สภาวะที่ปรากฏขั้นสุดท้าย ไม่ว่าจะเป็น 100% หรือ 30% หรืออะไรก็ตาม แต่ก็มีข้อเสียอีกประการหนึ่งคือข้อความหยุดนิ่งที่จุดเริ่มต้นและจุดสิ้นสุดซึ่งทำลายความต่อเนื่องของการเคลื่อนไหว
ตอนนี้เราต้องการรวมทั้งสองเข้าด้วยกันเพื่อสร้างภาพเคลื่อนไหวที่มีเอฟเฟกต์เฟดเข้าและเฟดเอาท์ และยังสามารถแสดงข้อความได้ดีขึ้นอีกด้วย แนวคิดคือการทำให้ข้อความในแอนิเมชั่นแรกเคลื่อนไหวตลอดทั้งกระบวนการ แต่บีบอัดการเฟดเข้าและเฟดเอาท์ออกเป็นสองสามเฟรมที่จุดเริ่มต้นและจุดสิ้นสุด เพื่อให้แน่ใจว่าข้อความจะคงรูปลักษณ์สุดท้ายไว้ในช่วงส่วนใหญ่ ของการเคลื่อนไหว ดังที่แสดงในภาพด้านซ้ายด้านล่าง ลูกศรสองทางแสดงถึงกระบวนการเฟดเข้าและเฟดออก ครึ่งบนแสดงภาพเคลื่อนไหวแรก จะเห็นได้ว่าผลรวมของเฟดเข้าและเฟดออกเท่ากับทั้งหมด กระบวนการแอนิเมชั่น ด้านล่างนี้เป็นแนวคิดปัจจุบันของเรา โดยเฟดเข้าและเฟดออกกินเวลาครึ่งหนึ่งหรือน้อยกว่าของลำดับทั้งหมด ซึ่งจะทำให้ข้อความสามารถเคลื่อนไหวได้เกือบทั้งหมดในลักษณะสุดท้าย
การตั้งค่าคีย์เฟรมดังที่แสดงในภาพด้านขวาด้านล่าง เพียงตั้งค่าการเปลี่ยนแปลงในเวลาที่มีสองเฟรมที่อยู่ติดกัน แม้ว่าข้อความจะไม่สามารถมองเห็นได้ในเฟรมที่ 1 แต่คุณสามารถทราบได้ว่าข้อความนั้นอยู่ที่ด้านขวาสุดของหน้าจอ ในเฟรมที่ 2 ข้อความทั้งหมดได้ถูกแสดงและตำแหน่งได้ย้ายไปทางซ้ายเล็กน้อย ด้วยวิธีนี้ การเปลี่ยนเฟรม 12 จะทำให้การเปลี่ยนแปลงความทึบทั้งหมดเสร็จสมบูรณ์ และการเคลื่อนไหวส่วนเล็กๆ เสร็จสมบูรณ์ในเวลาเดียวกัน หลังจากนั้น ข้อความจะเลื่อนไประยะหนึ่ง (การเปลี่ยนผ่านของเฟรม 23) จากนั้นจะเริ่มจางลงขณะเคลื่อนเข้าใกล้ด้านซ้ายสุด (การเปลี่ยนผ่านของเฟรม 34) ซึ่งตรงกันข้ามกับการค่อยๆ จางเข้า
ฉันสงสัยว่าคุณเคยคิดถึงปัญหาอื่นที่จะพบในการผลิตแอนิเมชั่นนี้หรือไม่ นั่นคือจะแน่ใจได้อย่างไรว่าระยะการเคลื่อนไหวของเฟรม 12 สอดคล้องกับระยะห่างของเฟรม 23 ความสอดคล้องกันในที่นี้ไม่ได้หมายความว่าเท่ากัน แต่หมายความว่าระยะทางที่แต่ละเฟรมเคลื่อนที่เท่ากัน สมมติว่าการเปลี่ยนแปลงของเฟรม 12 คือ 3 เฟรม (ABC) และการเปลี่ยนผ่านของเฟรม 23 คือ 6 เฟรม (DEFGHI) นั่นคือ , 1ABC2DEFGHI3 รวม 12 เฟรม จากนั้นระยะการเคลื่อนไหวของข้อความในแต่ละเฟรมทั้ง 12 เฟรมนี้ควรจะเท่ากันเพื่อให้ได้เอฟเฟกต์การเคลื่อนไหวที่ดีขึ้น แต่ผู้คนมักสร้างผลจากการไปเร็วข้างหน้าและไปช้าไปข้างหลัง หรือไปช้าข้างหน้าและไปเร็วไปข้างหลัง เพราะพวกเขาตัดสินระยะห่างของการเคลื่อนไหวไม่เพียงพอ ปัญหานี้แก้ไขได้ยาก หากคุณไม่ใช้ไม้บรรทัดในการคำนวณระยะทางอย่างแม่นยำ คุณสามารถลองได้หลายครั้งเพื่อค้นหาจำนวนเฟรมการเปลี่ยนภาพที่เหมาะสมที่สุด
สิ่งที่คุณต้องเชี่ยวชาญในบทเรียนนี้คือวิธีจัดการกับการเฟดเข้าและเฟดเอาท์เมื่อรวมกับการเคลื่อนไหว วิธีที่ดีที่สุดคือใช้จำนวนเฟรมที่สั้นลงเพื่อทำให้การเฟดเข้าและออกสมบูรณ์ในขณะที่เคลื่อนที่ต่อไป ขณะเดียวกันก็รักษาระยะการเคลื่อนที่ของแต่ละเฟรมให้ใกล้เคียงกัน การดำเนินการนี้ค่อนข้างยุ่งยาก แต่ไม่ต้องกังวล เราจะมีวิธีแก้ไขในเร็วๆ นี้
ansample01.rar
เราจัดเตรียมไฟล์ต้นฉบับสำหรับสร้างแอนิเมชั่นที่สามไว้ที่นี่ ( ansample01.rar ) ไม่ใช่ว่าฉันคิดว่าทุกคนทำไม่ได้ แต่เพื่อให้การสอนมีความสามัคคี เราจำเป็นต้องใช้แอนิเมชั่นนี้เพื่อเรียนรู้ต่อ คุณยังสามารถใช้ผลงานของคุณเองได้ ไม่มีการบ้านสำหรับชั้นเรียนนี้ แต่มีคำถามที่ต้องคิด นั่นคือจะสร้างแอนิเมชันดังที่แสดงด้านล่างได้อย่างไร โดยยังคงการตั้งค่า 20 เฟรมดั้งเดิมของ ansample01.psd ไว้ไม่เปลี่ยนแปลง
ในส่วนถัดไป เราจะแนะนำ ข้อจำกัดของภาพเคลื่อนไหวของเฟรมการเปลี่ยนภาพ