วิธีสร้างภาพเคลื่อนไหวขณะโหลดโดยใช้ไฟล์ SVG

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

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

ฉันจะสร้างไฟล์ Svg แบบเคลื่อนไหวได้อย่างไร

คุณสามารถสร้างไฟล์ SVG แบบเคลื่อนไหวได้หลายวิธี วิธีหนึ่งคือการใช้โปรแกรมแก้ไขกราฟิกแบบเวกเตอร์ เช่น Adobe Illustrator หรือ Inkscape โปรแกรมเหล่านี้ช่วยให้คุณสร้างกราฟิกแบบเวกเตอร์ของคุณเอง แล้วส่งออกเป็น ไฟล์ SVG อีกวิธีหนึ่งคือการใช้เครื่องมือบนเว็บเช่น Method Draw เครื่องมือนี้ช่วยให้คุณสร้างกราฟิกแบบเวกเตอร์ของคุณเองแล้วส่งออกเป็นไฟล์ SVG

Scalable Vector Graphics (SVG) เป็นภาษามาร์กอัป XML ที่อธิบายภาพสองมิติ เมื่อคุณส่งออกไฟล์ SVG จาก Animate จะไม่มีการเพิ่มคำจำกัดความหรือรหัสที่ไม่ต้องการลงไป การนำเข้า SVG ไปยัง Character Animator จะได้รับการปรับปรุงโดยใช้วิธีการส่งออกนี้ จัดการสัญลักษณ์หลายตัวได้อย่างราบรื่นใน การส่งออก SVG ทำให้ไม่จำเป็นต้องลบเนื้อหาออกจากไฟล์ ผลลัพธ์ใน Animate นั้นใกล้เคียงกับงานศิลปะบนเวทีมาก FXG Export ถูกแทนที่ด้วยฟีเจอร์ใหม่ที่เรียกว่า Animate 13.0: มันมาแทนที่ฟีเจอร์ FXG Export ฟีเจอร์บางอย่างของ Animate ไม่รองรับการใช้รูปแบบ SVG การส่งออกเนื้อหาที่สร้างขึ้นโดยใช้ฟีเจอร์เหล่านี้ส่งผลให้ถูกลบหรือตั้งค่าเริ่มต้นเป็นฟีเจอร์ที่รองรับ

Illustrator เป็นที่รู้จักกันดีในด้านความสามารถในการสร้างกราฟิกแบบเวกเตอร์ หน้าที่ของ Image Trace คือสร้างไฟล์ SVG จากภาพบิตแมป ขณะนี้สามารถสร้างไฟล์ SVG ได้หลายวิธีด้วยคุณลักษณะนี้ สามารถใช้โปรแกรมแก้ไขข้อความกับ Microsoft Word เวอร์ชันที่เข้ากันได้หรือโปรแกรมอื่นๆ ที่รองรับไฟล์ sva เพื่อแก้ไขได้
ด้วยไลบรารี JavaScript ที่หลากหลาย คุณสามารถสร้างและจัดการไฟล์ svg บนหน้าเว็บของคุณได้ ตัวอย่างเช่น d3.js, Raphal และรูปแบบอื่นๆ เป็นที่นิยม แต่ละไลบรารีเหล่านี้มาพร้อมกับตัวเลือกและคุณสมบัติการปรับแต่งที่หลากหลาย

ภาพเคลื่อนไหว Svg: เคล็ดลับในการสร้าง

เว็บไซต์เริ่มใช้ ภาพเคลื่อนไหว SVG มากขึ้นเรื่อยๆ เป็นวิธีที่ยอดเยี่ยมในการเพิ่มความสวยงามเล็กๆ น้อยๆ ให้กับเว็บไซต์ และง่ายต่อการนำไปใช้ ก่อนใช้ภาพเคลื่อนไหว SVG บนเว็บไซต์ของคุณ คุณควรคำนึงถึงบางสิ่งก่อน ก่อนอื่นคุณต้องกำหนดเฟรมที่ถูกต้อง คุณลักษณะการแสดงตัวอย่างแบบสดมีอยู่ในแอปพลิเคชัน Live-Pack และสามารถใช้ตั้งค่าภาพเคลื่อนไหวได้ ภาพเคลื่อนไหวอาจดูเหมือนว่าดำเนินไปได้ด้วยดี แต่อาจต้องใช้แท็ก object> แทนแท็ก img>

คุณสามารถส่งออกภาพเคลื่อนไหวเป็น Svg ได้หรือไม่

ได้ คุณสามารถส่งออกภาพเคลื่อนไหวเป็นไฟล์ SVG ได้ ในการทำเช่นนี้ เพียงไปที่เมนู ไฟล์ > ส่งออก > ส่งออกเป็น... และเลือกรูปแบบ SVG จากเมนูแบบเลื่อนลง

เราจะแสดงวิธีส่งออกรูปภาพจาก After Effects ในบทช่วยสอนสั้นๆ นี้ ต้องใช้ภาพเวกเตอร์สำหรับนักวาดภาพประกอบ ในขณะที่ต้องใช้ภาพแรสเตอร์สำหรับ AE จำเป็นต้องใช้ปลั๊กอิน bodymovin และตัวแปลงไฟล์ออนไลน์ หากคุณต้องการเริ่มต้น ให้ทำสำเนาสำรองของโครงการ ใน After Effects เฟรมใดๆ ในโครงการอาจถูกส่งออก เพื่อหลีกเลี่ยงเลเยอร์ที่ถูกครอบตัด ตรวจสอบให้แน่ใจว่าเลเยอร์ทั้งหมดของคุณถูกเปิดเผย หากคุณทำเช่นนั้น ให้ใช้เส้นขอบขององค์ประกอบเพื่อขยายเลเยอร์ ควรใช้มาสก์ธรรมดาแทน Alpha Matte เมื่อสร้างเลเยอร์ มีความแม่นยำและเสถียรมากกว่าเว็บไซต์แปลงไฟล์อื่นๆ

ไฟล์ Svg: วิธีส่งออกจาก After Effects

After Effects สามารถส่งออกรูปภาพของไฟล์ SVG เป็นรูปภาพได้ คุณต้องติดตั้งปลั๊กอิน Bodymovin และสามารถใช้ตัวแปลงไฟล์ออนไลน์ได้ ตัวเลือกการนำเข้าบางส่วนใน Animate ทำงานคล้ายกับตัวเลือกการนำเข้าใน Adobe Illustrator

Svg ตัวโหลด

ตัว โหลด SVG เป็นส่วนประกอบที่ให้คุณโหลดและดูไฟล์กราฟิกเวกเตอร์แบบปรับขนาดได้ (SVG) เป็นวิธีที่ง่ายในการดูหรือแก้ไขไฟล์ SVG โดยไม่ต้องติดตั้งซอฟต์แวร์เพิ่มเติมใดๆ SVG Loader ใช้งานได้ฟรีและพร้อมใช้งานสำหรับทั้ง Windows และ Mac

สร้างองค์ประกอบ Vue เพื่อใช้ Svg

วิธีที่ตรงไปตรงมาที่สุดคือการสร้างองค์ประกอบ Vue ใหม่โดยใช้เมธอด svg() ในตัวอย่างนี้ คอมโพเนนต์ Vue แบบธรรมดาสามารถสร้าง ภาพ SVG แบบ ธรรมดาได้ หากต้องการนำเข้า Svg จาก '@/components/svg' เป็น '@/vue' จะต้องนำเข้าอุปกรณ์ประกอบฉากการส่งออกเริ่มต้นของ Vue.use(Svg): * *, data() * return * image: '/images/logo. svg' แนวทางนี้มีคุณสมบัติเรียบร้อยหลายอย่างนอกเหนือจากความตรงไปตรงมา ตัวอย่างเช่น เราสามารถใช้การโยงข้อมูลเพื่อเปลี่ยนค่ารูปภาพในแต่ละครั้งที่มีการแสดงผล ด้วยเหตุนี้ เนื่องจากเราใช้ CSS แบบอินไลน์เป็นวิธีจัดรูปแบบของเรา จึงสามารถใช้ CSS เพื่อจัดรูปแบบ SVG โดยตรงได้อย่างง่ายดาย: *br กรอก * ด้วยตัวอักษร FFF; ขีด * ด้วยตัวอักษร S

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

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

SVG (กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้) เป็นภาพที่ใช้ XML ซึ่งคล้ายกับ HTML มีรูปทรงเรขาคณิตที่คุ้นเคยจำนวนมากที่สามารถรวมกันเพื่อสร้างกราฟิกสองมิติที่สามารถกำหนดได้โดยใช้องค์ประกอบต่างๆ ที่หลากหลาย ในบทความนี้ ฉันจะแสดงวิธียกระดับงานส่วนหน้าของเว็บของคุณโดยใช้ SVG และ เทคนิคแอนิเมชัน แอตทริบิวต์ Stroke-Dasharray และ Stroke-Dashoffset เป็นสองพารามิเตอร์ที่ใช้บ่อยที่สุดสำหรับการวาดเส้นทางใน SVG เป็นไปได้ที่จะรวมลักษณะเหล่านี้เพื่อสร้างภาพลวงตาว่าเส้นทางกำลังถูกวาดอย่างช้าๆ สามารถใช้คำสั่งการวาดที่หลากหลาย เช่น ส่วนโค้งและเส้นโค้งเบซิเยร์กำลังสอง เพื่อสร้างกราฟิกที่ซับซ้อนมากขึ้น คุณลักษณะที่ทรงพลังที่สุดสองอย่างที่สามารถใช้เพื่อใช้แอนิเมชั่นและเอฟเฟ็กต์ SVG ที่หลากหลาย ได้แก่ แอนิเมชั่นเส้นขีดแดชเรย์และแอนิเมชั่นเส้นประเส้นประ

ด้วยเครื่องมือที่มีประโยชน์นี้ คุณสามารถทดลองกับคุณสมบัติทั้งสองได้ ในบทความที่แล้ว เราได้พูดถึงว่าการใช้ JavaScript นั้นง่ายกว่าและเร็วกว่าในการใช้เทคนิคแอนิเมชั่น หากคุณกำลังมองหาห้องสมุดที่ทำได้มากกว่าด้วยตัวมันเองแต่ยังคงให้ผลลัพธ์ที่น่าทึ่ง ไม่ต้องมองหาที่อื่นนอกจาก Vivus Snap.svg ซึ่งใช้ JavaScript ทำให้การวาดภาพ SVG เป็นเรื่องง่ายโดยให้คุณเรียก animate(*) เพื่อทำให้ภาพเคลื่อนไหว anime.js ไลบรารีอื่นช่วยให้คุณสร้างองค์ประกอบ div โดยใช้ เส้นทาง SVG ด้วยโค้ดเพียงไม่กี่บรรทัด

กำลังโหลด Animation Css

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

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

คุณสามารถสร้างสปินเนอร์การโหลด CSS ได้อย่างง่ายดาย ใน HTML ตรวจสอบให้แน่ใจว่าชื่อคลาสสำหรับ div เป็นตัวโหลด หากต้องการปรับแต่ง ภาพเคลื่อนไหวการโหลด CSS ให้ใช้คลาส CSS selector.loader กฎต่อไปนี้จะช่วยคุณในการกำหนดคุณสมบัติหลายรายการ จำเป็นอย่างยิ่งที่จะต้องใช้ชื่อแอนิเมชันที่กำหนดไว้ในคุณสมบัติแอนิเมชัน (เช่น สปินเนอร์) อย่างที่คุณเห็น มีเพียงสองเฟรมในตัวอย่างนี้ ตัวโหลดถูกตั้งค่าให้หมุน 0 องศา และ Ribbon จะทำการหมุนทั้งหมดภายในสี่วินาที

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