ภาพเคลื่อนไหว SVG: วิธีทำให้ SVG ดูเหมือนกำลังวาด

SVG เป็นรูปแบบกราฟิกแบบเวกเตอร์ที่อนุญาตให้ใช้กราฟิกคุณภาพสูงโดยไม่ขึ้นกับความละเอียดบนเว็บ แต่คุณสมบัติที่ยอดเยี่ยมที่สุดอย่างหนึ่งคือคุณสามารถทำให้ SVG ปรากฏราวกับว่ากำลังวาดอยู่บนหน้า มีหลายวิธีในการทำเช่นนี้ แต่วิธีหนึ่งคือการใช้องค์ประกอบ คุณสามารถสร้างภาพลวงตาของการเคลื่อนไหวได้ด้วยการตั้งค่าแอตทริบิวต์ขององค์ประกอบเมื่อเวลาผ่านไป ตัวอย่างเช่น สมมติว่าคุณมี SVG ต่อไปนี้ ถ้าคุณต้องการทำให้วงกลมดูเหมือนถูกวาดบนหน้า คุณสามารถเพิ่มองค์ประกอบต่อไปนี้ภายในองค์ประกอบ ซึ่งจะทำให้รัศมีของวงกลมค่อยๆ เพิ่มขึ้นจาก 0 ถึง 50 ในช่วงเวลา 2 วินาที และเนื่องจากเราได้เพิ่มแอตทริบิวต์ "เติม" ด้วยค่า "หยุด" วงกลมจะยังคงอยู่ที่รัศมีสุดท้ายเมื่อภาพเคลื่อนไหวเสร็จสมบูรณ์ หากคุณต้องการเพิ่มความสมจริงให้กับเอฟเฟกต์ คุณยังสามารถทำให้แอตทริบิวต์ “เส้นขีด-เส้นประ” เคลื่อนไหวได้ สิ่งนี้จะทำให้ดูเหมือนว่าวงกลมถูกวาดด้วยปากกาหรือดินสอ ตัวอย่างเช่น: สิ่งนี้จะทำให้วงกลมดูเหมือนถูกวาดด้วยปากกาหรือดินสอ โดยเริ่มจากด้านนอกแล้ววนเข้าด้านใน มีอีกหลายสิ่งที่คุณสามารถทำได้เพื่อทำให้เอฟเฟ็กต์สมจริงยิ่งขึ้น แต่สิ่งนี้ควรเป็นจุดเริ่มต้นที่ดีให้กับคุณ

การใช้ SVG ใน UI สมัยใหม่นั้นสะดวก แต่การให้มันปรากฏในเพจของคุณนั้นน่าเบื่อ สร้างได้ง่ายด้วย องค์ประกอบ SVG และ CSS เท่านั้น ไม่ต้องใช้เครื่องมือพิเศษ! ทำตามตัวอย่าง CodePen ของฉัน (ซึ่งทั้งหมดนี้อยู่ใน React) คุณจะสามารถเรียนรู้วิธีการทำเช่นนั้นได้ คุณสามารถกระจายไลบรารีออกได้มากกว่าปกติเล็กน้อย คุณจึงไม่ต้องเสียพื้นที่มากเกินไปในบันเดิล ในโลกแห่งความงาม คุณจะมีคนอย่างน้อยสองสามคนที่ใช้เอฟเฟ็กต์นี้หากไม่มีอะไรอื่น

Svgs มีแอนิเมชั่นได้ไหม

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

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

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

การใช้ไฟล์ Svg จำนวนมาก

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

ฉันจะสร้างเส้นทางใน Svg ได้อย่างไร

มีสองสามวิธีในการทำให้เส้นทางเคลื่อนไหวใน svg วิธีหนึ่งคือใช้แอตทริบิวต์ stroke-dashray และ stroke-dashoffset แอตทริบิวต์ stroke-dasharray ระบุความยาวของเส้นประในเส้นขีด และแอตทริบิวต์ stroke-dashoffset ระบุระยะห่างระหว่างจุดเริ่มต้นของ dasharray และจุดเริ่มต้นของเส้นขีด คุณสามารถสร้างภาพลวงตาของการวาดเส้นขีดได้

Codrops เป็นแอนิเมชั่นพื้นฐานที่ใช้ ไฟล์ VScript ภาพเวกเตอร์ (SVG) คือภาพประเภทหนึ่งที่ไม่ได้สร้างจากพิกเซลสี แต่สร้างด้วยฟังก์ชันทางคณิตศาสตร์ที่สามารถแสดงผลได้โดยใช้หน้าจอ ในบทความนี้ เราจะพูดถึงฟังก์ชัน getPointAtLength() และดูว่าสามารถใช้เพื่อแสดงข้อมูลของเส้นทาง SVG ในวิธีที่สร้างสรรค์ได้อย่างไร เราจะสร้างภาพเคลื่อนไหวแต่ละเฟรมของภาพเคลื่อนไหวนี้ด้วยองค์ประกอบวงกลมใหม่และวางไว้บนเส้นทาง เมื่อใช้ฟังก์ชัน createParticle แต่ละเฟรมจะเต็มไปด้วยอนุภาคใหม่ที่จะจางหายไปและเด้งขึ้นมา นอกเหนือจากการทำแอนิเมชั่นจังหวะ-แดชออฟเซ็ตของฟิวส์เพื่อทำให้แอนิเมชั่นสมจริงยิ่งขึ้น ฉันได้เพิ่มสีสันให้กับมัน

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

ทำไม Svg ของคุณถึงไม่เคลื่อนไหว

สามารถสร้างภาพประกอบภาพเคลื่อนไหวได้โดยใช้โปรแกรมสร้างกราฟิก Silhouette CSS หรือ JavaScript เป็นเทคนิคแอนิเมชั่นทั่วไปที่รองรับ อย่างไรก็ตาม หาก SVG ของคุณไม่เคลื่อนไหว อาจมีสาเหตุบางประการสำหรับสิ่งนี้ หนึ่งในปัญหาที่พบบ่อยที่สุดคือการใช้แท็ก *img> แทนที่จะใช้แท็ก *object* หากคุณแทนที่แท็ก img> ทั้งหมดด้วยแท็ก object> SVG ของคุณจะกลับมาเคลื่อนไหวต่อ

Svg วาดแอนิเมชั่น Codepen

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

Svg เติมแอนิเมชั่น

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

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

ความยาวของเส้นขีด-dashray จะถูกกำหนดโดยเอฟเฟกต์การเติม นอกจากนี้ เนื่องจากมีค่าเท่ากัน เราจะเติมด้วยเส้นประขนาดใหญ่และไม่มีช่องว่างระหว่างส่วนต่างๆ เมื่อใช้ setTimeout 100ms ตัวแปร -dashoffset จะถูกอัพเดต รายการ li แต่ละรายการจะมีค่าหมายเหตุเพิ่มโดยใช้แอตทริบิวต์ data-* ในฟังก์ชัน expandNumber() เราใช้องค์ประกอบ .percent_int หรือ .percent_dec ขึ้นอยู่กับ className และในกรณีที่ผลลัพธ์ควรมีจุดทศนิยม ตัวแปรตัวนับจะถูกต่อท้ายเป็นข้อความเมื่อองค์ประกอบเปลี่ยนจากการวนซ้ำหนึ่งไปยังอีกถัดไป อย่างไรก็ตามในบางกรณีจะเพิ่มมูลค่าเป็นเวลานาน หากโน้ตมีค่าตามที่เราต้องการ จะต้องตั้งค่า clearInterval

เหตุใดคุณจึงควรสร้างแอนิเมชันสำหรับเว็บไซต์ที่มีประสิทธิภาพสูง

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

เครื่องสร้างแอนิเมชั่น Svg Line

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

ในที่สุดวันนี้ฉันก็ใช้แอนิเมชั่นเส้น SVG เป็นครั้งแรก ซึ่งเป็นฟีเจอร์ที่ฉันชื่นชอบมาเป็นเวลานาน เอฟเฟกต์นี้สามารถทำได้โดยใช้ SVG แบบอินไลน์ (หมายความว่าข้อมูลถูกแทรกลงใน HTML แทนที่จะเชื่อมโยง the.svg กับแท็กรูปภาพ) นอกจากนี้ยังจำเป็นต้องมีคุณสมบัติเส้นขีดในเส้นทาง SVG SVG เกือบจะเหมือนกับโครงร่างในแง่ของโครงสร้าง สามารถใช้ CSS เพื่อปรับความกว้างและสีของเส้นขีด สามารถใช้ CodePen ด้านบนเพื่อเล่นกับมันได้โดยการลบคุณสมบัติที่ไม่มีที่สิ้นสุดและลบความคิดเห็นโหมดการเติมภาพเคลื่อนไหว จากนั้นด้วยแอนิเมชั่นของเรา เราสามารถทำให้คุณสมบัติกลับสู่สถานะก่อนหน้าได้โดยการวาดรูปร่างของเราลงไป

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

เราจะสร้างแอนิเมชั่นใน Svg ได้อย่างไร?

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

การสนับสนุนที่แข็งแกร่งของ Adobe Illustrator สำหรับ Svg

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