จากการศึกษาสามบทเรียนก่อนหน้านี้ เราได้เชี่ยวชาญวิธีสร้างแอนิเมชัน แม้ว่าแอนิเมชันที่ผลิตจะยังหยาบมากก็ตาม คุณยังจำได้ไหมว่าเมื่อคุณเรียนรู้พื้นฐาน คุณต้องเผชิญกับบล็อกสีเดียวเป็นเวลานาน นั่นไม่ได้ส่งผลกระทบต่อระดับประสิทธิภาพปัจจุบันของทุกคน ในทำนองเดียวกัน เร็วๆ นี้เราจะเริ่มสร้างแอนิเมชั่นที่มีรายละเอียดมากขึ้น แต่ก่อนที่จะเกิดเหตุการณ์เช่นนี้ ทุกคนจะต้องเรียนรู้การคิดเชิงออกแบบที่จำเป็น สิ่งที่เรียกว่าการคิดเชิงออกแบบหมายถึงการวางแผนและการพิจารณาก่อนสร้างแอนิเมชัน การวางแผนนี้มีหลายแง่มุม
ก่อนอื่น เรามาพูดถึงการจัดระเบียบของเลเยอร์กันก่อน แอนิเมชั่นที่เสร็จแล้วขั้นสุดท้ายไม่มีข้อมูลเลเยอร์ เลเยอร์ที่กล่าวถึงในที่นี้อ้างอิงถึงเลเยอร์ที่ใช้งานจริงเท่านั้น สำหรับแอนิเมชั่นที่สร้างโดยใช้การเปลี่ยนแปลงตำแหน่งของเลเยอร์ ปัญหาที่ชัดเจนคือ ต้องจัดเรียงเลเยอร์อย่างสมเหตุสมผล เนื่องจากหน่วยการเคลื่อนไหวที่เล็กที่สุดคือเลเยอร์ ดังนั้นหากคุณต้องการสร้างวัตถุหลายชิ้นที่มีวิถีการเคลื่อนที่ที่แตกต่างกัน พวกมันจะต้องกระจายไปในทิศทางที่แตกต่างกัน ชั้น คุณต้องพิจารณาระยะทางในการเคลื่อนไหวล่วงหน้าด้วย ขนาดและตำแหน่งของภาพต้องเว้นพื้นที่เพียงพอสำหรับการเคลื่อนไหว นี่เป็นหนึ่งในนั้น
ประการที่สองคือการพิจารณาว่าจะตัดกับเลเยอร์อื่นหรือไม่ และจะจัดการกับจุดตัดนั้นอย่างไร ใครจะเป็นผู้ครอบคลุมใคร ซึ่งก็คือการจัดเรียงลำดับชั้นของเลเยอร์ต่างๆ ดังรูปต่อไปนี้แสดงวิธีตัดกันทั้งสามวิธีทางด้านซ้ายสุด คือ เมื่อทั้งสองชั้นอยู่ที่ 100% สีเขียวจะเปลี่ยนเป็นสีแดง อีกสองอันแสดงเอฟเฟกต์การครอบคลุมที่แตกต่างกันของเลเยอร์ต่างๆ ที่ความทึบแสง 50% หากสีเขียวคลุมสีแดง แสดงว่าทางแยกจะเป็นสีเขียวกว่า และในทางกลับกัน ทั้งหมดนี้อยู่ในโหมดการผสมปกติ หากคุณเลือกโหมดการผสมอื่นๆ เช่น การซ้อนทับ คุณต้องให้ความสำคัญกับเลเยอร์มากขึ้น
สิ่งที่กล่าวมาข้างต้นล้วนเป็นปัญหาทางเทคนิค ตอนนี้เรามาพูดถึงปัญหาโครงเรื่องกันดีกว่า โดยทั่วไป หากวัตถุมีการเคลื่อนไหวอยู่ในภาพตลอดเวลา ก็ไม่จำเป็นต้องคำนึงถึงวัตถุนั้นด้วย แต่ถ้าวัตถุไม่อยู่ในรูปภาพแต่แรกแต่เข้ามาในรูปภาพในภายหลัง หรือเดิมอยู่ในรูปภาพแล้วย้ายออกจากรูปภาพในภายหลัง คุณจะต้องอธิบายลักษณะและการหายไปของวัตถุ คำอธิบายนี้เป็นการเปลี่ยนผ่าน ผู้ชมจะมีการเปลี่ยนแปลงทางจิตวิทยาที่เป็นธรรมชาติมากขึ้น เทคนิคทั่วไปคือการทำให้วัตถุค่อยๆ ปรากฏ (หรือเรียกว่าเฟดเข้า) หรือค่อยๆ หายไป (หรือเรียกว่าเฟดออก) ดังแสดงในรูปด้านล่าง แสดงให้เห็นการเปรียบเทียบผลกระทบของการเฟดเข้าและเฟดออกในการเคลื่อนไหวของข้อความเดียวกัน
คุณสามารถเลื่อนเมาส์ไปยังพื้นที่เล่นเพื่อดูเอฟเฟ็กต์ภาพเคลื่อนไหวจริง และเลื่อนเมาส์ออกจากพื้นที่เล่นเพื่อหยุดเล่น จากการเปรียบเทียบ ฉันเชื่อว่าทุกคนจะรู้สึกว่าผลของการเพิ่มการประมวลผลแบบเฟดอินและเฟดเอาท์จะดีกว่า
นอกจากนี้ การตั้งค่าการวนซ้ำยังเป็นปัญหาของโครงเรื่องอีกด้วย จริงๆ แล้วเราได้กล่าวถึงเรื่องนี้ไปแล้ว นั่นคือ ในบางสถานการณ์ สามารถใช้ภาพเคลื่อนไหวแบบวนซ้ำได้ ในขณะที่ในสถานการณ์อื่นๆ ก็ไม่เหมาะสม ตัวอย่างเช่น หากภาพเคลื่อนไหวของข้อความชื่อคอลัมน์ค่อยๆ จางลงซ้ำๆ กัน จะทำให้ทั้งหน้าเว็บดูยุ่งเหยิง และทำให้ผู้ชมรู้สึกไม่สบายใจ แนวทางที่เหมาะสมที่สุดในเวลานี้คือการเล่นเพียงครั้งเดียวเพื่อให้สามารถแสดงผลได้โดยไม่กระทบต่อหน้าเว็บโดยรวม โดยทั่วไปการตั้งค่าวงจรเป็น 2 ถึง 3 ครั้งเป็นสิ่งที่ยอมรับได้ และหากมากกว่านี้ก็ไม่ดี
อย่างไรก็ตาม ภาพเคลื่อนไหวที่เล่นเพียงครั้งเดียวจะถูกวางไว้ที่ด้านบนของหน้าเว็บเพื่อให้สามารถมองเห็นได้ทันทีที่คุณเข้าสู่หน้าเว็บ หากวางไว้ที่ด้านล่างของหน้าเว็บ ภาพเคลื่อนไหวอาจเล่นจบแล้วเมื่อผู้ชมมาถึงจุดนั้น ในกรณีนั้น การสร้างภาพเคลื่อนไหวจะไม่มีความหมาย และควรใช้ภาพนิ่งแทนจะดีกว่า
ควรสังเกตว่าภาพเคลื่อนไหว GIF จะถูกเล่นอีกครั้งทุกครั้งที่มีการเรียก หากบางคนมีความรู้เกี่ยวกับการผลิตหน้าเว็บอยู่แล้ว พวกเขาสามารถใช้คุณสมบัตินี้เพื่อตั้งค่าการดำเนินการที่เกี่ยวข้องในซอฟต์แวร์การผลิตหน้าเว็บได้ ตัวอย่างเช่น นี่คือวิธีที่คุณเลื่อนเมาส์มาที่นี่เพื่อดูภาพเคลื่อนไหวของตัวอย่าง ภาพเคลื่อนไหวจะเริ่มต้นจากจุดเริ่มต้นเสมอหลังจากการเคลื่อนไหวแต่ละครั้ง ด้วยวิธีนี้ แม้ว่าแอนิเมชั่นจะเล่นเพียงครั้งเดียว แต่ก็สามารถเล่นได้หลายครั้งบนหน้าเว็บ ไม่ต้องกังวลหากคุณไม่มีความรู้เกี่ยวกับการสร้างหน้าเว็บ สิ่งนี้จะไม่ส่งผลกระทบต่อการเรียนรู้แอนิเมชั่นครั้งต่อไปของเรา -
ปัญหาสำคัญที่ต้องพิจารณาเกี่ยวกับเอฟเฟ็กต์การเฟดที่ดูดีคือสามารถตั้งค่าเบราว์เซอร์ให้ปิดใช้งานภาพเคลื่อนไหวได้ ในขณะนี้ ภาพเคลื่อนไหวจะแสดงเฉพาะเฟรมแรกของภาพเคลื่อนไหวเท่านั้น จากนั้นภาพเคลื่อนไหวที่คล้ายกับ "กำลังมาอย่างเงียบๆ" ด้านบนจะว่างเปล่าในหน้าเว็บ เนื่องจากเฟรมแรกเดิมว่างเปล่า สิ่งนี้อาจทำให้เกิดความเข้าใจผิดในหมู่ผู้ชมได้อย่างง่ายดาย
บางทีคุณอาจคิดว่าไม่มีใครจงใจปิดการแสดงภาพเคลื่อนไหว แต่เนื่องจากปัจจัยนี้ไม่สามารถตัดออกได้ เราจึงต้องพิจารณาสถานการณ์ของผู้เยี่ยมชมจากระดับที่กว้างที่สุด ในเค้าโครงโดยรวมของหน้าเว็บ หลีกเลี่ยงการใช้ภาพเคลื่อนไหวแบบจางลงในข้อความสำคัญหรือส่วนตัวบ่งชี้ หลังจากวางภาพเคลื่อนไหวลงในหน้าเว็บแล้ว วิธีที่ดีที่สุดคือปิดการเล่นภาพเคลื่อนไหวด้วยตนเองเพื่อตรวจสอบว่ามีปัญหาใดๆ หรือไม่ นอกเหนือจากการปิดการเล่นภาพเคลื่อนไหวแล้ว หากผู้เยี่ยมชมกดปุ่ม ESC เมื่อหน้าเว็บแสดงขึ้น การเล่นภาพเคลื่อนไหวก็จะถูกขัดจังหวะด้วย และหน้าจอจะคงอยู่ในช่วงเวลาที่มีการหยุดชะงัก
หากคุณต้องการดูแลผู้เยี่ยมชมที่ถูกห้ามเล่นแอนิเมชั่นและผู้ได้รับอนุญาตให้เล่นแอนิเมชั่นในเวลาเดียวกัน และรักษาสมดุลระหว่างทั้งสอง คุณควรปฏิบัติตามหลักการในการผลิตแอนิเมชั่น กล่าวคือ ส่วนหลักไม่ควรเคลื่อนไหว และส่วนที่แก้ไขควรเป็นภาพเคลื่อนไหว ดังที่แสดงในภาพด้านล่าง ตัวข้อความจะไม่เคลื่อนไหว เฉพาะขอบของข้อความเท่านั้นที่เคลื่อนไหวได้ ด้วยวิธีนี้ แม้ว่าภาพนิ่งจะถูกเล่นหรือถูกขัดจังหวะระหว่างการเล่น แต่ก็จะไม่ส่งผลกระทบต่อความเข้าใจของผู้ชมในเนื้อหา
อย่างไรก็ตาม ตราบใดที่เนื้อหาสามารถสะท้อนให้เห็นได้อย่างแม่นยำตลอดเวลา และหลีกเลี่ยงการหายไปของข้อความหรือการเสียรูปมากเกินไป ข้อความหลักก็สามารถย้ายได้เช่นกัน
เนื้อหาที่อธิบายในบทเรียนนี้ไม่เกี่ยวข้องกับเทคโนโลยีการผลิตแอนิเมชั่น อย่างไรก็ตาม เมื่อคุณต้องการนำแอนิเมชันไปใช้กับหน้าเว็บ คุณต้องพิจารณาวิธีการผลิตและประสิทธิภาพของแอนิเมชั่นจากมุมมองที่กว้าง การเรียนรู้เนื้อหาเหล่านี้ค่อนข้างน่าเบื่อ เพียงแค่สร้างความประทับใจให้กับทุกคนและนำไปใช้ในการผลิตในอนาคต
ภารกิจ นี้เป็นการสร้างแอนิเมชั่นเรื่อง "Quietly Come and Go" นอกจากนี้ ยังมีการสร้างแอนิเมชันที่ได้รับมาสองรายการต่อไปนี้ด้วย
ในส่วนถัดไป เราจะแนะนำวิธีแสดง การเฟดเข้าและเฟดเอาท์ ในแอนิเมชั่น