นิเมชั่น A Look Into Scalable Vector Graphics (SVG)

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

การใช้งานขั้นพื้นฐาน

ภาพเคลื่อนไหวใน SVG สามารถทำได้ผ่าน ธาตุ;

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

attributeName: คุณลักษณะนี้ระบุคุณลักษณะขององค์ประกอบที่จะได้รับผลกระทบในการเคลื่อนไหว.

จาก: คุณลักษณะนี้เป็นตัวเลือกเราสามารถระบุค่าที่แน่นอนหรือปล่อยให้มันเริ่มต้นจากที่ที่มันเป็น.

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

เธ: คุณลักษณะนี้ระบุระยะเวลาของภาพเคลื่อนไหว ค่าของคุณสมบัตินี้จะแสดงในไวยากรณ์ค่านาฬิกา ตัวอย่างเช่น, 02:33 แสดงถึง 2 นาทีและ 33 วินาทีในขณะที่ 3h เท่ากับ 3 ชั่วโมง แต่เราไม่จำเป็นต้องใช้เวลานานดังนั้นเราจึงระบุระยะเวลาเพียงแค่ 3s หรือ 3 วินาที

สิ่งเดียวกันจะไป องค์ประกอบ แต่คราวนี้เรากำหนดเป้าหมายคุณลักษณะรัศมีของวงกลม (R).

• การสาธิตการใช้งานขั้นพื้นฐาน

องค์ประกอบการเคลื่อนย้าย

ในการเคลื่อนย้ายองค์ประกอบ SVG เราจะต้องกำหนดเป้าหมายพิกัดขององค์ประกอบเท่านั้น x และ Y;

ในตัวอย่างข้างต้นเราย้ายสี่เหลี่ยมจาก 0 ไปยัง 200 ใน 3 วินาทีสี่เหลี่ยมจะปรากฏขึ้นในแนวนอนจากซ้ายไปขวา นอกจากนี้หากคุณดูอย่างระมัดระวังเราได้เพิ่มคุณสมบัติอื่นให้กับ องค์ประกอบคือ ใส่.

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

นอกจากนี้ยังทำงานคล้ายกับ องค์ประกอบเราสามารถใช้ cx หรือ cy, ชอบมาก:

• การย้ายองค์ประกอบสาธิต

เคลื่อนไหวหลายคุณสมบัติ

จนถึงตอนนี้เรากำหนดเป้าหมายหนึ่งคุณลักษณะเท่านั้นที่จะเป็นภาพเคลื่อนไหว แต่ยังสามารถสร้างภาพเคลื่อนไหวได้มากกว่าหนึ่งคุณลักษณะพร้อมกัน ตัวอย่างด้านล่างแสดงวิธีที่เราทำ:

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

• การสาธิตคุณสมบัติหลาย ๆ

ติดตามเส้นทาง

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

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

แค่นี้เรามาดูกันดีกว่า

• การสาธิต Path ต่อไปนี้

แปลง

เราสามารถใช้การแปลงเช่น ขนาด, แปลความ และ หมุน สำหรับแอนิเมชันและเราจะใช้ ;

การแปลงใน SVG แบ่งปันหลักการที่คล้ายกันกับ CSS3 และเราได้ครอบคลุมเกี่ยวกับมันค่อนข้างครอบคลุมในโพสต์ก่อนหน้าของเราเกี่ยวกับการแปลง CSS3 2D.

• การสาธิตการเปลี่ยนแปลง

ความคิดสุดท้าย

คุณสามารถสร้างบางสิ่งเช่นนี้ได้ทั้งนี้ขึ้นอยู่กับความสามารถของคุณใน SVG Animation.

ข้อดีอย่างหนึ่งของการใช้ SVG Animation เหนือ Flash Animation คือไม่ต้องพึ่งพาปลั๊กอินของ บริษัท อื่นในการทำงานและยังเร็วกว่า Flash มาก หลังจาก Adobe หยุดการสนับสนุน Flash ใน Android คุณอาจต้องลองวิธีนี้เพื่อแสดงภาพเคลื่อนไหวในเว็บไซต์ถัดไปของคุณ.

อ้างอิงเพิ่มเติม

• เอกสารภาพเคลื่อนไหว SVG
• เทคนิคการสร้างภาพเคลื่อนไหว SVG ขั้นสูง

• ดูการสาธิต
• แหล่งดาวน์โหลด