วิธีใช้การเปลี่ยน CSS3 และภาพเคลื่อนไหวเพื่อเน้นการเปลี่ยนแปลง UI

นักออกแบบและศิลปินมีประวัติยาวนานในการทดสอบการเคลื่อนไหวเอฟเฟ็กต์และภาพลวงตาประเภทต่างๆโดยมีจุดประสงค์ในการเพิ่มเลเยอร์พิเศษให้กับงานของพวกเขา ขบวนการ op op เริ่มใช้เครื่องฉายภาพในปี 1960 เพื่อสร้างความประทับใจในการเคลื่อนไหว.

ตั้งแต่นั้นมาวิธีการใหม่และใหม่กว่าได้โผล่ขึ้นมาเช่นศิลปะการเคลื่อนไหวที่เป็นที่นิยมเมื่อเร็ว ๆ นี้ที่ขยายมุมมองของผู้ชมโดยใช้การเคลื่อนไหวหลายมิติ การเคลื่อนไหวยังปรากฏในวิทยาศาสตร์คอมพิวเตอร์ด้วยการประดิษฐ์เคอร์เซอร์กะพริบครั้งแรกในปี 1967.

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

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

การเปลี่ยน

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

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

การเปลี่ยนคุณสมบัติ CSS ของลิงค์บนโฮเวอร์ (หรือโฟกัสหรือคลิก) เป็นรูปแบบการเปลี่ยนที่เก่าแก่ที่สุดและง่ายที่สุดและมีอยู่ก่อนในยุค CSS3.

 a color: orange;  a: โฮเวอร์ color: red;  a: โฟกัส color: blue;  a: เยี่ยมชม color: green; 

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

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

1. พวกเขามักจะมีจุดเริ่มต้นและสถานะสิ้นสุด.
2. สถานะระหว่างจุดเริ่มต้นและจุดสิ้นสุดถูกกำหนดโดยเบราว์เซอร์เราไม่สามารถเปลี่ยนแปลงสิ่งนั้นด้วย CSS.
3. พวกเขาต้องการ เรียกอย่างชัดเจน, เช่นการเพิ่ม pseudoclass ใหม่โดย CSS หรือคลาสใหม่โดย jQuery.

คุณสามารถดูตัวอย่างที่สวยงามของการเปลี่ยน CSS3 ที่ใช้อย่างชาญฉลาดด้านล่างซึ่งผู้เขียนเปิดเผยข้อมูลที่ซ่อนอยู่ในลักษณะที่ไม่ล่วงล้ำ แต่ยังคงให้ความสำคัญกับผู้ใช้ต่อเนื้อหาใหม่.

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

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

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

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

สิ่งที่สำคัญที่สุดที่คุณต้องรู้เกี่ยวกับภาพเคลื่อนไหว CSS3 ได้แก่ :

1. พวกเขาไม่จำเป็นต้องเรียกใช้อย่างชัดเจนพวกเขาสามารถเริ่มต้นในการโหลดหน้าหรือเมื่อเหตุการณ์ DOM อื่นเกิดขึ้นในเบราว์เซอร์
2. สามารถใช้ในกรณีที่มีการใช้การเปลี่ยนเช่นเมื่อเพิ่มคลาสหรือ pseudoclass ใหม่หรือลบออก (แม้ว่าจะเป็นกรณีการใช้งานที่น้อยกว่า)
3. พวกเขาต้องการให้เรากำหนด keyframes บางอย่าง (สถานะกลาง)
4. เราสามารถระบุจำนวนความถี่และรูปแบบของคีย์เฟรมเหล่านี้

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

คลาสใหม่เหล่านี้มีการเคลื่อนไหวตามที่ระบุไว้ @keyframes กฎในไฟล์ CSS คลาสพิเศษจะถูกลบออกโดย jQuery เมื่อผู้ใช้คลิกที่ปุ่มในครั้งถัดไปและเมนูจะถูกซ่อนอีกครั้ง.

คุณสมบัติของ CSS และ @keyframes ที่กฎ

สำหรับช่วงการเปลี่ยนภาพเราสามารถใช้ การเปลี่ยนแปลง คุณสมบัติชวเลขหรือ 4 คุณสมบัติที่เกี่ยวข้องกับการเปลี่ยนแปลงเดียว: สถานที่ให้บริการการเปลี่ยนแปลง, การเปลี่ยนแปลงระยะเวลา, การเปลี่ยนแปลงระยะเวลา-ฟังก์ชั่น, และ การเปลี่ยนแปลงความล่าช้า. คุณสมบัติชวเลขมีคุณสมบัติเดียวทั้งหมดในรูปแบบย่อ.

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

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

 .องค์ประกอบ พื้นหลัง: สีส้ม; การเปลี่ยนแปลงคุณสมบัติ: พื้นหลัง; การเปลี่ยนระยะเวลา: 3 วินาที การเปลี่ยนจังหวะฟังก์ชั่น: ความง่ายในการ; . องค์ประกอบ: โฮเวอร์ พื้นหลัง: สีแดง; 

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

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

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

 .องค์ประกอบ พื้นหลัง: สีส้ม; การเปลี่ยนภาพ: พื้นหลัง 3 วินาทีใช้งานง่าย . องค์ประกอบ: โฮเวอร์ พื้นหลัง: สีแดง; 

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

 .องค์ประกอบ ตำแหน่ง: ญาติ; ชื่อภาพเคลื่อนไหว: ภาพนิ่ง; นิเมชั่น - ระยะเวลา: 3 วินาที ภาพเคลื่อนไหวจังหวะเวลาฟังก์ชั่น: ง่ายใน;  @keyframes สไลด์ 0% ซ้าย: 0;  50% ซ้าย: 200px;  100% ซ้าย: 400px; 

ในตัวอย่างด้านบนเราสร้างเอฟเฟกต์การเลื่อนที่ง่ายมาก เราได้กำหนด นิเมชั่นชื่อ, จากนั้นผูกคีย์เฟรม 3 อันกับที่เราระบุไว้ใน @keyframes สไลด์ … ที่กฎ ร้อยละอ้างอิงถึงระยะเวลาของการเคลื่อนไหวดังนั้น 50% เกิดขึ้นที่ 1.5s ในตัวอย่าง.

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

 .องค์ประกอบ ตำแหน่ง: ญาติ; แอนิเมชั่น: slide 3s ง่ายใน;  @keyframes สไลด์ จาก left: 0;  ถึง left: 400px; 

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

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

ภาพเคลื่อนไหวและการเปลี่ยน CSS3 ทำงานร่วมกับคำนำหน้าผู้จัดจำหน่ายเป็นเวลานานซึ่งเราไม่จำเป็นต้องใช้อะไรอีกต่อไปอย่างไรก็ตาม Mozilla Developer Network ยังคงแนะนำให้เพิ่ม -WebKit คำนำหน้าสำหรับในขณะที่การสนับสนุนสำหรับเบราว์เซอร์ที่ใช้ Webkit เพิ่งมีความมั่นคง.