วิธีการสร้างภาพเคลื่อนไหว SVG โดยใช้ CSS
ภาพเคลื่อนไหว SVG สามารถทำได้ผ่านองค์ประกอบพื้นฐานเช่น
CSS Animation อาจเป็นอีกทางเลือกหนึ่งในการใช้ไลบรารี JavaScript เช่น SnapSVG ในโพสต์นี้เราจะเห็นสิ่งที่เราสามารถส่งด้วย CSS Animation ใน SVG.
1. การสร้างรูปร่าง
ก่อนอื่นเราจะต้องวาดรูปร่างและวัตถุที่เราต้องการให้เคลื่อนไหว คุณสามารถใช้แอพพลิเคชั่นเช่น ร่าง, Adobe Illustrator, หรือ Inkscape เพื่อสร้าง.
สำหรับตัวอย่างนี้ฉันวาดท้องฟ้าที่มีเมฆเป็นฉากหลังและเรือจรวดพุ่งขึ้นไปรวมกับเปลวไฟด้วย:
เมื่อวาดเสร็จแล้วเราต้องส่งออกแต่ละวัตถุที่เราสร้างขึ้นเป็น SVG.
ฉันจะใช้ Sketch เป็นตัวอย่างสำหรับขั้นตอนนี้ เลือกวัตถุที่คุณต้องการเปลี่ยนเป็นรูปแบบ SVG ที่ด้านล่างขวาของหน้าต่างให้คลิก ทำให้ส่งออกได้. เลือกรูปแบบ SVG จากนั้นคลิกส่งออก object-name คุณต้องทำสิ่งนี้ทีละวัตถุ.
2. ใส่ SVG ลงใน HTML
เมื่อคุณเปิดไฟล์ SVG ในโปรแกรมแก้ไขรหัสคุณจะพบว่ารหัส SVG นั้นค่อนข้างยุ่ง ดังนั้นก่อนที่เราจะปรับใช้ไฟล์ SVG ให้เป็นระเบียบเรียบร้อยและปรับให้เหมาะสมด้วยเครื่องมือบรรทัดคำสั่งนี้ชื่อ SVGO.
เปิด สถานีปลายทาง หรือ พร้อมรับคำสั่ง, และติดตั้ง SVGO ด้วยบรรทัดคำสั่งนี้:
[sudo] npm install -g svgo
ปรับคำสั่ง, svgo, ในไฟล์ SVG โดยใช้ --น่ารัก เพื่อสร้างรหัส SVG ที่อ่านได้:
svgo rocket.svg --pretty
หากคุณมี SVG หลายตัวในไดเรกทอรีคุณสามารถปรับให้เหมาะสมทั้งหมดพร้อมกันในคราวเดียว สมมติว่าชื่อไดเรกทอรี / ภาพ, จากนั้นในไดเร็กทอรีหลักให้ใช้คำสั่งนี้:
svgo -f images --pretty
มาดูความแตกต่างก่อนและหลังการใช้ SVGO.
คัดลอกรหัสภายในไฟล์ SVG และวางลงในไฟล์ HTML เราจะทำงานในพื้นที่ทำงานที่ 800px กว้าง 600px ดังนั้นอย่าลืมกำหนด ความกว้าง ในองค์ประกอบ SVG.
SVG ถูกตั้งค่าในไฟล์ HTML เราจะต้องกำหนด ID สำหรับแต่ละวัตถุเพื่อให้เราสามารถเลือกพวกเขาใน CSS ในภายหลัง.
สำหรับบทช่วยสอนนี้เราต้องกำหนด ID สำหรับจรวดและเปลวไฟและเมฆบางส่วน เพื่อให้วัตถุจัดการกับสเตจแอนิเมชั่นในภายหลังเราจำเป็นต้องเพิ่ม รหัส - คุณยังสามารถใช้ ชั้น - ไปยังแต่ละวัตถุ ในขั้นตอนนี้รหัสจะมีลักษณะดังนี้:
3. สร้างภาพเคลื่อนไหวโดยใช้ CSS
ตอนนี้มาสนุกกันเถอะ แผนคือการเพิ่มจรวดขึ้นสู่อวกาศ จรวดถูกแบ่งออกเป็นสองกลุ่ม จรวดเองและเปลวไฟ.
ก่อนอื่นเราวางจรวดไว้ตรงกลางของพื้นที่ทำงานดังนี้
#rocket แปรรูป: แปล (260px, 200px);
สิ่งที่คุณเห็นคือ:
ตอนนี้เพื่อให้จรวดดูเหมือนว่ามันกำลังสูงขึ้นไปเราต้องสร้างภาพลวงตาของเมฆที่ตกลงมา CSS ที่เราใช้สำหรับสิ่งนี้คือ:
# cloud1 แอนิเมชัน: ตกเชิงเส้น 1s ไม่มีที่สิ้นสุด; @keyframes ตก จาก transform: translateY (-100px); เป็น transform: translateY (1000px)
เพื่อทำให้ดูสมจริงยิ่งขึ้นลองสร้างภาพเคลื่อนไหวเมฆสี่ก้อนแล้วสร้างมันขึ้นมา “ตก” ที่ความเร็วแตกต่างกัน นอกจากนี้เราจะวางตำแหน่งให้แตกต่างจากแกน X.
คลาวด์ที่สองจะมีรหัสดังนี้:
# cloud2 ภาพเคลื่อนไหว: fall-2 2s linear ไม่มีที่สิ้นสุด @keyframes fall-2 จาก transform: translate (200px, -100px); เป็น transform: translate (200px, 1000px)
โปรดทราบว่าเราได้ย้ายระบบคลาวด์ # 2 ไปทางขวาโดย 200px กับ แปลความ. ในขั้นตอนนี้ผลลัพธ์ควรมีลักษณะเช่นนี้.
ต่อไปมาทำให้จรวดมีชีวิตขึ้นมา เราจะกำหนดเฟรมภาพเคลื่อนไหวดังต่อไปนี้:
#rocket ภาพเคลื่อนไหว: ป๊อปอัพ 1 วินาทีช่วยให้ไม่ จำกัด @keyframes ป๊อปอัป 0% transform: แปล (260px, 200px); 50% transform: แปล (260px, 240px); 100% Transform: แปล (260px, 200px);
และเพิ่มแอนิเมชั่นในเปลวไฟจรวดเช่นกัน:
#flame ภาพเคลื่อนไหว: เขย่า. 2s เชิงเส้นไม่ จำกัด @keyframes สั่น 0% Transform: แปล (55px, 135px) หมุน (7deg); 20% transform: แปล (55px, 135px) หมุน (0deg); 40% transform: แปล (55px, 135px) หมุน (-7deg); 60% transform: แปล (55px, 135px) หมุน (0deg); 100% Transform: แปล (55px, 135px) หมุน (0deg);
ขวา! เมื่อรหัสของเราพร้อมแล้วภาพเคลื่อนไหวควรทำงานกับ SVG ของเรา.
ลองดูจรวดของเราระเบิดขึ้นสู่อวกาศ.
ความคิดสุดท้าย
แอนิเมชันไม่ใช่คุณสมบัติที่ง่ายที่สุดใน CSS ที่จะเข้าใจ แต่หวังว่าคุณจะพบบทช่วยสอนนี้เป็นจุดเริ่มต้นที่ดีในการสำรวจ CSS Animation บน SVG เพิ่มเติม คุณจะประหลาดใจเมื่อทราบว่าสามารถทำอะไรได้บ้างกับ CSS Animation.
หากคุณต้องการเริ่มต้นด้วยพื้นฐานเบื้องต้นคุณสามารถเริ่มต้นที่นี่ด้วยโพสต์นี้: A Look Into: ภาพเคลื่อนไหวกราฟิกเวกเตอร์ (SVG) ที่ปรับขนาดได้หรือติดตามส่วนที่เหลือของซีรี่ส์ SVG.
- ดูการสาธิต
- แหล่งดาวน์โหลด
