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

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

คำตอบนี้มีการโพสต์จำนวนมากในคำถามที่เกี่ยวข้องกับวิธีการสร้างภาพประกอบสำหรับเว็บ

หลีกเลี่ยงภาพเคลื่อนไหว SMIL

Sara Soueidan ซึ่งเป็นเอนิเมชั่นที่ดีที่สุดของ SVG บนเว็บเขียนว่า "ฉันรู้ว่าฉันได้เขียนคำแนะนำเกี่ยวกับอนิเมชั่น SMILแต่เมื่อเห็นอนาคตของพวกเขาฉันจะไม่ใช้มันอีกต่อไป" คุณไม่ควรทำเช่นนั้น

ภาพเคลื่อนไหว SMIL ไม่ทำงานใน IE, Edge, เบราว์เซอร์มือถือบางตัวและChrome / Opera ถูกปล่อยลงเรื่อย ๆ (แม้ว่าล่าสุดทีมงาน Chrome จะกล่าวว่าการเลิกใช้งานนี้ถูกระงับชั่วคราว ) คุณควรหลีกเลี่ยงการใช้งาน 99% ของเวลา

ใช้ CSS สำหรับแอนิเมชั่นที่ง่ายมาก

SVG สามารถเคลื่อนไหวได้โดยใช้ CSS บริสุทธิ์ (รวมถึงการใช้:hoverฯ , transforms, transitions และanimations) มีการวางแผนที่จะรับการสนับสนุนภาพเคลื่อนไหว CSS ทั้งหมดแต่ปัจจุบันมีเพียงบางส่วนเท่านั้นที่รองรับและสามารถบั๊กกี้กับปัญหาเบราว์เซอร์ข้าม

Sara Soueidan กล่าวว่า CSS นั้นยอดเยี่ยมสำหรับการสร้างภาพเคลื่อนไหว SVG แต่ชอบ JS เพราะช่วยแก้ปัญหาเบราว์เซอร์ข้ามเหล่านี้ ดังนั้นให้ใช้เมื่อคุณสามารถถอยกลับไปที่ JS เมื่อภาพเคลื่อนไหวมีความซับซ้อนหรือไม่ทำงานข้ามเบราว์เซอร์

ใช้ภาพเคลื่อนไหว JavaScript หาก CSS ไม่ทำงาน

ส่วนใหญ่ SVG สามารถสร้างภาพเคลื่อนไหวได้โดยใช้ JavaScript เพียงเล็กน้อยโดยไม่ต้องใช้ไลบรารีภาพเคลื่อนไหว JavaScript การสร้างภาพเคลื่อนไหวใน JS มีการสนับสนุนข้ามเบราว์เซอร์มากขึ้นและใช้งานง่ายด้วยความเข้าใจพื้นฐาน

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

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

เป็นที่ยอมรับในการใช้ polyfills สำหรับ SMIL แต่ฉันเหนื่อยที่จะทำเช่นนั้นเพราะพวกเขาไม่ได้ใช้ / ทดสอบอย่างแพร่หลาย ด้วยการกล่าวว่าEric WilligersและFakeSmileเป็นสองคนที่พบบ่อยที่สุด

การขับรถ

ซอฟแวร์เดียวที่ฉันได้เจอการส่งออกที่ถึง SVG + JS เป็น Adobe After Effects ปลั๊กอินที่เรียกว่าลอตตี (เดิม Bodymovin) ซึ่งเป็นส่วนขยายแฟลชเรียกว่าแฟลช 2 SVGและเครื่องมือออนไลน์เล็ก ๆ ที่เรียกSVG ละคร นอกเหนือจากนั้นแอนิเมชั่นซอฟต์แวร์เช่น Adobe Edge Animate, Adobe Animate CC หรือAnimatronส่งออกไปยังภาพเคลื่อนไหว SMIL ซึ่งไม่ควรใช้ เป็นเช่นนี้ก็จะดีที่สุดที่จะมีบางอย่างที่ทำให้นักพัฒนา SVG + CSS หรือ SVG + JS ภาพเคลื่อนไหวโดยใช้ SVGs ส่งออกจากบรรณาธิการ Inkscape มีบทช่วยสอนการเชื่อมโยงทรัพยากรที่ดีเยี่ยมและตัวอย่างของวิธีการทำเช่นนี้

ฉันแน่ใจว่าในอนาคตซอฟต์แวร์ภาพเคลื่อนไหวเพิ่มเติมจะรองรับการส่งออกไปยัง SVG + JS

หมายเหตุสำคัญอื่น ๆ

• มันเป็นสิ่งสำคัญที่จะเก็บไว้ในใจประสิทธิภาพ Sara Drasner สร้างมาตรฐานประสิทธิภาพบางประการสำหรับ SVGซึ่งแสดงว่าคุณควรเลือกใช้ภาพเคลื่อนไหว CSS ที่มีการเร่งฮาร์ดแวร์เมื่อใดก็ตามที่เป็นไปได้ แต่กลับไปใช้แนวทาง JavaScript ที่ดีเมื่อไม่สามารถทำได้

• เป็นการดีที่สุดที่จะใช้ SVG ใน<object>แท็กหรือฝังลงใน<svg>องค์ประกอบ XML โดยตรงหากเป็นการโต้ตอบและเป็นภาพพื้นหลังหากไม่ใช่แบบโต้ตอบ แต่ก็มีวิธีอื่นที่จะทำได้เช่นกัน

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

ฉันพบเสมออาศัยสิ่งอื่นนอกเหนือจากห้องสมุด JS จะเจ็บปวดมากสนับสนุน / การบำรุงรักษา WRT

ฉันใช้D3.jsเสมอ เดิมสร้างขึ้นเพื่อสร้างองค์ประกอบ SVG / DOM แบบโต้ตอบจากชุดข้อมูล อย่างไรก็ตามคุณสามารถแก้ไข SVG / DOM ที่รวมอยู่ในหน้าเว็บได้ตราบใดที่ JS มีสิทธิ์เข้าถึงได้

ฉันใช้ในหลายโครงการเพื่อสร้าง / ทำให้เคลื่อนไหว SVG / DOM ตัวอย่างบางส่วนประกอบด้วยแดชบอร์ดแบบเรียลไทม์การสร้างภาพแผนที่การแปลง DOM และการสร้างไฟล์ SVG เพื่อรวมไว้ใน PDF ฉันเห็นมันทั่วทั้งเว็บเช่นกัน เว็บไซต์มีตัวอย่างและลิงค์ไปยังหน้าต่างๆที่ใช้งาน

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

ต่อไปนี้เป็นวิธีที่เป็นไปได้ในการเคลื่อนไหว svg:

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

SVG สามารถเคลื่อนไหวได้ด้วยภาษามาร์กอัปอันทรงพลังที่เรียกว่า SMIL ซึ่งส่งออกโดยตรงจากเครื่องมือแอนิเมชันเช่นปลั๊กอิน Adobe Animate CC + flash2svg

หากต้องการสร้างภาพ SVG ด้วย SMIL แม้ในเบราว์เซอร์ที่ขาดการสนับสนุนคุณเพียงแค่ใช้ SMIL polyfill

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

โพลีฟิล SMIL ที่ทำโดย Eric Willigers ทำเช่นนั้น: มันแปล SMIL เป็น Web Animations API ที่แม้แต่เบราว์เซอร์ Microsoft ก็รองรับ มันมีประสิทธิภาพมากที่นักพัฒนา Google Chrome ตัดสินใจที่จะทิ้งการสนับสนุน SMIL ดั้งเดิมและมุ่งเน้นไปที่การสร้างภาพเคลื่อนไหวบนเว็บโดยปล่อยให้ Eric Willigers รวมตัวกันเพื่อเล่นไฟล์ SMIL ใน Chrome

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

ในความเป็นจริง Chrome devs อ้างถึง Willigers polyfill ในประกาศอย่างเป็นทางการเกี่ยวกับความตั้งใจที่จะเลิกใช้ SMIL

ดังนั้นหากคุณอ่านเว็บเกี่ยวกับการตายของ SMIL ทางอินเทอร์เน็ตไม่ต้องกังวล “ ความตาย” ของ SMIL ถูกทำให้กระฉับกระเฉงอย่างมาก มันเหมือนการเกิดใหม่

ในการใช้ SMIL บนเบราว์เซอร์ทั้งหมดรวมถึง IE และ EDGE คุณเพียงแค่เพิ่ม javascript polyfill นี้ในหน้าเว็บของคุณ:

https://github.com/ericwilligers/svg-animation

นี่คือหน้าตัวอย่างโดยใช้ polyfill ที่ทำโดย Tom Byrne ผู้เขียนผู้ส่งออก flash2svg ยอดนิยม:

หน้าโดยไม่มี polyfill:
http://www.tbyrne.org/staging/smil-polyfill/tears.htm

และหน้าเดียวกันกับ polyfill:
http://www.tbyrne.org/staging/smil-polyfill/tears_polyfill.htm

ถ้าคุณดูที่แหล่งข้อมูลมันจะอธิบายตัวเองได้ค่อนข้างมาก

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

ภาพเคลื่อนไหวส่งออกใน SVG SMIL

วิธีที่ง่ายกว่าในการสร้างภาพเคลื่อนไหว SVG คือการใช้เครื่องมือเช่น Adobe Animate CC เพื่อวาดภาพและปลั๊กอินเช่น Flash2svg ( https://github.com/TomByrne/Flash2Svg ) เพื่อส่งออกภาพใน SVG ด้วยคุณสามารถส่งออกภาพเคลื่อนไหว + เสียงเกือบทั้งหมดเป็นไฟล์ SVG ไฟล์เดียวเช่นตอนการ์ตูน:
http://www.tbyrne.org/portfolio/smil/LoveDota.svg

SVG ANIMATION JS LIBRARIES

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

• SnapSVG http://snapsvg.io
  ห้องสมุดนี้เป็นตัวตายตัวแทนของไลบรารี่ แอนิเมชั่นราฟาเอลที่เก่าแก่และเป็นที่นิยมโดยผู้แต่งคนเดียวกัน มีเสถียรภาพมาก แต่แปลง SVG ในรูปแบบภายในที่รันไทม์เพื่อทำให้เคลื่อนไหว ตัวเลือกการ Morphing นั้นพื้นฐานมากการประมาณเชิงเส้นเท่านั้น (หมายเหตุ: นอกจากนี้ยังมีปลั๊กอิน snap.svg สำหรับ Adobe Animate CC แต่ไฟล์ที่ส่งออกนั้นมีการขยายตัวผู้ส่งออกสร้างคำสั่ง snap svg หนึ่งคำสั่งสำหรับทุกเฟรมของแอนิเมชั่นไม่ใช่ทุกเฟรมหลัก ของรหัสเพียงเพื่อหมุนรูปสี่เหลี่ยมผืนผ้าที่เรียบง่ายผ่าน 360 องศาปลั๊กอิน Flash2svg มีประสิทธิภาพมากขึ้นเพียงแค่คำสั่งเดียวและไม่กี่ไบต์ในการทำงานเดียวกัน)

• Greensock MorphSVG
  http://greensock.com/morphSVGไลบรารี่
  morphing ที่มีคุณสมบัติครบถ้วนที่ช่วยให้ SVG เคลื่อนไหวได้อย่างง่ายดายและไม่จำเป็นต้องแปลงไฟล์เหล่านั้นในรูปแบบภายใน เพียงแค่สร้างคีย์เฟรม 3-4 svg ใน Inkscape และ Greenock SVGMorphing lib จะทำการสอดแทรกระหว่างเฟรมโดยอัตโนมัติและสร้างเฟรมที่อยู่ระหว่างเพื่อการเล่นที่ราบรื่น นี่คือตัวอย่าง:
  http://codepen.io/Emasoft/pen/reOqYE

• 3D Seen.js
  http://seenjs.io/demo-svg-canvas.html
  หากคุณต้องการเคลื่อนไหวในรูปแบบ 3 มิติห้องสมุดนี้มีประสิทธิภาพมาก
  Seen.js แสดงผลไฟล์. obj แบบ 3D ตาข่ายใน SVG และทำให้เคลื่อนไหวได้ง่ายมาก

SVG IMAGES บรรณาธิการ

ในส่วนของเครื่องมือคุณสามารถสร้างคีย์เฟรมอนิเมชั่นเป็นหลักด้วยซอฟต์แวร์สามตัว:

• Inkscape: โอเพ่นซอร์สมีฟีเจอร์มากมายแพคเกจแก้ไขเวกเตอร์ขั้นสูงของผู้ทำหน้าที่แบ่งกลุ่ม SVG Working Group การอ้างอิงสำหรับรูปแบบ SVG ไม่ใช่เรื่องง่ายที่จะเรียนรู้

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

• Affinity Designer: นี่เป็นซอฟต์แวร์เชิงพาณิชย์เช่น Illustrator แต่ด้วยความเข้ากันได้กับ SVG ที่ยอดเยี่ยมเกือบจะอยู่ในระดับของ Inkscape UI นั้นเป็นมิตรมากขึ้นและตอนนี้ก็กำลังเป็นที่นิยมในหมู่ศิลปิน SVG

ตัวแก้ไขภาพเคลื่อนไหว SVG

ขณะนี้ตัวแก้ไขภาพเคลื่อนไหว SVG เดียวเท่านั้นคือ:

• Adobe Animate CC: Adobe Flash Pro เดิมได้รับการเขียนใหม่อย่างสมบูรณ์โดย Adobe เพื่อย้ายจากภาพเคลื่อนไหวแฟลชที่ล้าสมัยไปแล้วไปยังภาพเคลื่อนไหว SVG ที่ทันสมัย คุณสามารถส่งออกภาพเคลื่อนไหว SVG ที่เกิดขึ้นพร้อมกับไลบรารีจาวาสคริปต์ที่กำหนดเองหรือเลือกที่จะบันทึกใน SVG + SMIL โดยใช้ปลั๊กอินเช่น "flash2svg" ตัวเลือกสุดท้ายนี้มีประสิทธิภาพมากฉันมักจะใช้มันแทนการส่งออกพื้นเมืองป่อง

คุณสามารถดาวน์โหลดปลั๊กอินฟรีได้จากที่นี่: https://github.com/TomByrne/Flash2Svg

หรือติดตั้งจากแผง Adobe Plugins: https://creative.adobe.com/addons/products/7232

น่าเสียดาย Adobe Animate CC เป็นเชิงพาณิชย์ มีแอปพลิเคชั่นทางเลือกภาพเคลื่อนไหวโอเพนซอร์ซฟรี แต่ฉันลองพวกเขาทั้งหมดและพวกเขายังคงดูด IMHO อยู่ หวังว่าในอนาคต

การอ้างอิง:
โพสต์บล็อกที่ครบถ้วนสมบูรณ์ของฉันในเรื่อง: https://medium.com/@fmuaddib/the-following-are-the-possible-ways-to-create-professional-animations-in-svg-9d4caca5f4ec

กรณีอ้างอิงเกี่ยวกับ snap.svg: /programming/35727635/adobe-animate-snap-svg-plugin-huge-files