บทความนี้สาธิตขั้นตอนการเพิ่มภาพเคลื่อนไหวและการเปลี่ยนผ่านหลายขั้นตอน
จะใช้แอนิเมชั่นและการเปลี่ยนภาพแบบหลายขั้นตอนได้อย่างไร
ในการสร้างภาพเคลื่อนไหวแบบหลายขั้นตอน ชุดของคีย์เฟรมจะถูกสร้างขึ้น ระบุชุดการเปลี่ยนแปลงที่จะใช้กับองค์ประกอบ HTML ที่เลือก คีย์เฟรมแต่ละอันแสดงถึงสถานะที่แตกต่างกันของภาพเคลื่อนไหว และเบราว์เซอร์จะเปลี่ยนองค์ประกอบระหว่างสถานะเหล่านี้ได้อย่างราบรื่น ขณะเปลี่ยน ให้ระบุการเปลี่ยนแปลงอย่างราบรื่นของคุณสมบัติ CSS ในช่วงระยะเวลาที่กำหนดโดยการโต้ตอบของผู้ใช้หรือการเปลี่ยนแปลงสถานะ
ให้เราอธิบายตัวอย่างที่ใช้ได้จริงเพื่อความเข้าใจที่ดีขึ้น:
ตัวอย่างที่ 1: การใช้แอนิเมชั่นหลายขั้นตอน
ในตัวอย่างนี้ ภาพเคลื่อนไหวหลายขั้นตอนจะนำไปใช้กับองค์ประกอบ HTML ที่เลือก เยี่ยมชมการสาธิตด้านล่าง:
< สไตล์ >
.animationตัวอย่าง {
ความกว้าง: 130px;
ความสูง: 130px;
สีพื้นหลัง: ป่าสีเขียว;
ตำแหน่ง: ญาติ;
แอนิเมชั่น: moveAnimate 4s เข้า-ออกง่ายไม่สิ้นสุด;
}
< / สไตล์ >
< ร่างกาย >
< แผนก ระดับ = 'ตัวอย่างภาพเคลื่อนไหว' >< / แผนก >
< / ร่างกาย >
ในข้อมูลโค้ดด้านบน:
- อย่างแรก คลาสชื่อ “ ตัวอย่างภาพเคลื่อนไหว ” ถูกเลือกภายใน “ <สไตล์> ” แท็ก
- ต่อไป ค่าของ “ 130px ” ถูกกำหนดให้กับ “ ความสูง ' และ ' ความกว้าง ' คุณสมบัติ.
- นอกจากนี้ ตั้งค่า “ ป่าไม้เขียวขจี ' และ ' ญาติ ” เป็นค่าสำหรับ “ สีพื้นหลัง ' และ ' ตำแหน่ง ” คุณสมบัติเพื่อเพิ่มประสิทธิภาพการมองเห็น
- หลังจากนั้นให้ใช้ปุ่ม “ ภาพเคลื่อนไหว ” คุณสมบัติ และกำหนดให้เท่ากับ “ moveAnimate 4s เข้า-ออกสะดวกไร้ขีดจำกัด ” เพื่อใช้แอนิเมชั่น
- ค่าประกอบด้วยสี่ส่วน ส่วนแรกคือแอนิเมชันชื่อที่กำหนดเอง ส่วนที่สองคือระยะเวลาที่ต้องทำให้เสร็จ ส่วนที่สามคือประเภทของแอนิเมชัน และส่วนที่สี่คือขีดจำกัดของจำนวนครั้งที่แอนิเมชันนี้จะใช้
- ในตอนท้าย สร้างองค์ประกอบ HTML และกำหนด ' ตัวอย่างภาพเคลื่อนไหว ” เรียนไปค่ะ
ตอนนี้ใช้ ' คีย์เฟรม ” กฎเพื่อกำหนดกำหนดเอง “ เคลื่อนไหวเคลื่อนไหว ” ภาพเคลื่อนไหว:
@ คีย์เฟรม moveAnimate {0 % {
ซ้าย: 0 ;
สีพื้นหลัง: สีฟ้า;
}
ห้าสิบ % {
ซ้าย: 200px;
สีพื้นหลัง: ป่าสีเขียว;
แปลงร่าง: หมุน ( 180องศา ) ;
}
100 % {
ซ้าย: 0 ;
สีพื้นหลัง: สีฟ้า;
}
}
ในบล็อกรหัสด้านบน:
- ประการแรก “ @คีย์เฟรม ” บล็อกถูกสร้างขึ้นพร้อมกับชื่อของแอนิเมชันที่กำหนดเองซึ่งกำลังจะถูกกำหนด
- จากนั้น สร้างบล็อกชื่อ “ 0% ” ที่ใช้สไตล์ CSS ที่จุดเริ่มต้นของภาพเคลื่อนไหว และใช้ประโยชน์จาก “ สีพื้นหลัง ' และ ' ซ้าย คุณสมบัติของ CSS
- ตอนนี้ สร้างบล็อกชื่อ และ “ ห้าสิบ% ” เพื่อจัดสไตล์ในช่วงกลางของแอนิเมชั่น ให้ค่าของ “ 200px ”, “ ป่าไม้เขียวขจี ' และ ' หมุน (180deg) ” ไปที่คุณสมบัติ 'ซ้าย', 'สีพื้นหลัง' และ 'แปลง' สิ่งนี้ทำให้องค์ประกอบที่เลือกหมุนไปทางซ้าย 200px
หลังจากรวบรวมบล็อคโค้ดด้านบน:
เอาต์พุตแสดงภาพเคลื่อนไหวหลายขั้นตอนที่นำไปใช้กับองค์ประกอบ HTML ที่เลือก
ตัวอย่างที่ 2: การใช้การเปลี่ยนผ่านหลายขั้นตอน
หากต้องการใช้การเปลี่ยนหลายขั้นตอน สามารถใช้ตัวเลือก CSS ร่วมกับ ' การเปลี่ยนแปลง ' คุณสมบัติ. เยี่ยมชมรหัสด้านล่าง:
.เลือนหายไป {
ความทึบ: 1;
การเปลี่ยนแปลง: ความทึบ 1 วินาที;
}
.fade: เลื่อน {
ความทึบ: 0;
}
<
/ สไตล์>
<
ร่างกาย>
< หน้า ระดับ = 'เลือนหายไป' > วางเมาส์เหนือฉันเพื่อดูการเปลี่ยนแปลง < / หน้า >
< / ร่างกาย >
คำอธิบายของรหัสด้านบน:
- ประการแรก กำหนดเอง “ เลือนหายไป ” คลาสถูกเลือกและระบุค่า 1 ให้กับ “ ความทึบ ' คุณสมบัติ. นอกจากนี้ ตั้งค่าของ “ ความทึบ 1 วินาที ” ถึง “ การเปลี่ยนแปลง คุณสมบัติ CSS ตั้งค่าหรือลบความทึบในช่วงเวลา “ 1 วินาที '.
- ต่อไป “ : เลื่อน ” ตัวเลือกถูกกำหนดให้กับ “ เลือนหายไป ' ระดับ. ในนั้นค่าของ “ 0 ” ถูกตั้งค่าเป็นคุณสมบัติความทึบ
- ในที่สุด องค์ประกอบ HTML จะถูกสร้างขึ้นภายใน “ <เนื้อหา> ” แท็ก และคลาสของ “ เลือนหายไป ” ติดมาด้วย
หลังจากสิ้นสุดขั้นตอนการรวบรวม หน้าเว็บจะปรากฏดังนี้:
GIF แสดงให้เห็นว่ามีการใช้การเปลี่ยนเฟดแบบกำหนดเองกับองค์ประกอบ HTML ที่เลือก
บทสรุป
ภาพเคลื่อนไหวและการเปลี่ยนหลายขั้นตอนทำให้หน้าเว็บ HTML มีชีวิตชีวาโดยการเพิ่มการเคลื่อนไหวและเอฟเฟ็กต์ภาพ สำหรับภาพเคลื่อนไหว ' คีย์เฟรม ” ใช้กับเปอร์เซ็นต์ระยะเวลา เช่น “ 0% ” คือจุดเริ่มต้น “ ห้าสิบ% ” คือตรงกลาง และ “ 100% ” คือสิ้นสุดระยะเวลาของแอนิเมชั่น สำหรับการเปลี่ยนแปลง สามารถใช้ตัวเลือก CSS ร่วมกับ “ การเปลี่ยนแปลง ' ระดับ. บทความนี้ได้สาธิตกระบวนการใช้ภาพเคลื่อนไหวและการเปลี่ยนผ่านหลายขั้นตอน