ภาพเคลื่อนไหว CSS

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

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

แอนิเมชั่นคืออะไร?

เราต้องการให้คุณเข้าสู่บทช่วยสอนอย่างเต็มที่ แต่สำหรับสิ่งนี้ จำเป็นต้องเข้าสู่โลกของแอนิเมชั่นหรือสิ่งที่เกี่ยวกับการออกแบบกราฟิก โลกของ การออกแบบเชิงโต้ตอบ 

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

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

ก่อนหน้านี้ แอนิเมชั่นแรกได้รับการออกแบบบนแผ่นกระดาษ ในแต่ละแอนิเมชั่น แอนิเมชั่นถูกวาดเป็นขั้นเป็นตอน และเมื่อถึงจุดสิ้นสุดของชีตแล้ว แอนิเมชั่นจะถูกส่งต่ออย่างรวดเร็วเพื่อให้เกิดเอฟเฟกต์การเคลื่อนไหวใน การวาดภาพ.

ประเภทแอนิเมชั่น

แอนิเมชั่นมีหลายประเภท:

การ์ตูนหรือแอนิเมชั่นดั้งเดิม

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

หยุดการเคลื่อนไหว

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

Pixelation

Pixelation เป็นเทคนิคที่มาจาก Stop Motion และประกอบด้วยการทำงานกับวัตถุที่ไม่ใช่ตุ๊กตาหรือโมเดล แต่เป็นวัตถุหรือคนทั่วไป วัตถุถูกถ่ายภาพหลายครั้งและขยับเล็กน้อยในแต่ละเฟรม

Rotoscopy

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

แอนิเมชั่นโดย Cutouts หรือ Cut out Animation

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

แอนิเมชัน 3D

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

ปัจจุบันยังมีเทคนิคอื่นๆ เช่น ภาพวาดบนกระจก แอนิเมชั่นของทราย ฉากกุจา และภาพวาดบนเซลลูลอยด์ 

CSS คืออะไร?

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

ยืน CSSโปรดดูที่ "cascading style ชีต" มันถูกสร้างขึ้นจากภาษาที่ใช้ในภาคการออกแบบและในการนำเสนอของหน้าเว็บที่ดียิ่งขึ้นคือชุดเครื่องมือและคำสั่งที่รับผิดชอบในการนำเสนอหน้าเว็บตามที่เราเห็นครั้งแรกครั้งเดียว มันถูกสร้างขึ้นแล้ว ทำงานร่วมกับเครื่องมือ HTML (จัดจากเนื้อหาพื้นฐานของเพจ)

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

CSS คืออะไร?

ด้วย CSS คุณสามารถจัดระเบียบเพจของคุณได้ กล่าวคือ คุณสามารถบอกหน้าเว็บของคุณว่าต้องการค้นหาข้อมูลทั้งหมดอย่างไร เพื่อให้ผู้ดูจัดการได้ง่ายและมีประโยชน์ในเวลาเดียวกัน ป้อนคำสั่งทั้งหมดขององค์ประกอบบางอย่างที่เป็นส่วนหนึ่งของสไตล์หรือการออกแบบของหน้าเว็บ เช่น the แบบอักษร สี ขนาด ฯลฯ 

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

เคลื่อนไหวใน CSS

ตอนนี้คุณรู้เพียงเล็กน้อยเกี่ยวกับโลกแห่งแอนิเมชั่นและ CSS แล้ว ได้เวลาเริ่มการสอนแล้ว

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

แอนิเมชั่นแต่ละแอนิเมชั่นเหล่านี้มีข้อดีหลายประการ:

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

การตั้งค่าแอนิเมชั่น

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

คุณสมบัติย่อยคือ:

แอนิเมชั่น - ล่าช้า

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

แอนิเมชั่น - ทิศทาง

ระบุว่าภาพเคลื่อนไหวควรกลับไปที่เฟรมเริ่มต้นที่ส่วนท้ายของลำดับหรือไม่ หรือควรเริ่มจากจุดเริ่มต้นเมื่อถึงจุดสิ้นสุด

แอนิเมชั่น - ระยะเวลา

ระบุระยะเวลาที่แอนิเมชันใช้ในการทำให้รอบของแอนิเมชันสมบูรณ์ (ระยะเวลา)

แอนิเมชั่น - วนซ้ำ - นับ

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

แอนิเมชั่น - ชื่อ

ใช้เพื่อระบุชื่อที่อธิบายแต่ละเฟรมของแอนิเมชั่น

แอนิเมชั่น - เล่น - state

อนุญาตให้คุณหยุดชั่วคราวและเล่นต่อในลำดับภาพเคลื่อนไหวได้

แอนิเมชั่น - เวลา - ฟังก์ชั่น

มันบ่งบอกถึงจังหวะของแอนิเมชั่น นั่นคือ วิธีแสดงเฟรมแอนิเมชั่น สำหรับสิ่งนี้ เส้นโค้งการเร่งความเร็วถูกสร้างขึ้น

แอนิเมชั่น - เติม - โหมด

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

ตั้งค่าลำดับด้วยเฟรม

เมื่อเรากำหนดค่าเวลา ระบบการตั้งชื่อ ฯลฯ แล้ว ถึงเวลาที่จะนำเสนอรูปลักษณ์หรือความรู้สึกให้กับแอนิเมชั่นของเรา

ในการทำเช่นนี้ เราจะสร้างสองเฟรมใหม่และใช้กฎ @คีย์เฟรม. ด้วยเหตุนี้ แต่ละเฟรมจะอธิบายว่าแต่ละองค์ประกอบถูกค้นพบได้อย่างไรระหว่างลำดับภาพเคลื่อนไหว

เพื่อบ่งบอกถึง เวลาและจังหวะ, เฟรมใช้ เปอร์เซ็นต์ และ จากและถึงด้วยเหตุนี้ เราจึงสามารถระบุได้ว่าเมื่อใดที่จุดเริ่มต้นเกิดขึ้นด้วย 0% และสิ้นสุดที่ 100%

แอนิเมชั่นเฟรมและข้อความ

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

แบบอักษร 75% - ขนาด: 300%; ขอบ - ซ้าย: 25%; ความกว้าง: 150%;

ด้วยรหัสนี้ เราขอแนะนำเบราว์เซอร์ว่าใน 75% ของลำดับ ส่วนหัวมีระยะขอบด้านซ้าย 25% และขนาด 200% ที่มีความกว้าง 150%

แอนิเมชั่นทำซ้ำ

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

ข้อสรุป

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

คุณกล้าแล้วหรือยัง?