วิธีสร้างภาพเคลื่อนไหว SVG ด้วย CSS

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

ก่อนที่เราจะลงลึกในบทช่วยสอน คุณควรคุ้นเคยกับการเปลี่ยนและการแปลง CSS แนวคิดเดียวกันบางส่วนจะถูกใช้กับ SVG

พื้นฐาน SVG

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

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

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

วิธีสร้างกราฟิก SVG

Adobe Illustrator เป็นโปรแกรมทางเลือกหนึ่งเมื่อสร้าง SVG ในความเป็นจริงแล้ว สามารถสร้างได้ตั้งแต่เริ่มต้นเนื่องจากเป็น XML ทั้งหมด แต่น่าจะง่ายกว่าหากใช้โปรแกรมออกแบบ โดยเฉพาะอย่างยิ่งสำหรับ SVG ที่ซับซ้อนกว่า

เคล็ดลับในการออกแบบใน Adobe Illustrator

เช่นเดียวกับโปรเจ็กต์ Adobe Illustrator อื่นๆ กล่องขอบคือที่ที่ภาพประกอบถูกสร้างขึ้น ดังนั้นสิ่งสำคัญคือต้องแน่ใจว่าทุกอย่างอยู่ในนั้น วิธีที่ดีที่สุดในการทำเช่นนั้นคือเลือกงานศิลปะที่คุณต้องการให้มีใน SVG จากนั้นไปที่ Object > Artboards > Fit to Artwork Bounds

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

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

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

ในไฟล์นี้ คุณจะเห็นส่วนนอกของวงล้อมีชื่อว่า "วงล้อชั้นนอก" และส่วนด้านในมีชื่อว่า "วงล้อชั้นใน" เป็นพื้นฐาน แต่ใช้งานได้

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

ส่งออกกราฟิก SVG ใน Adobe Illustrator

เมื่อคุณมีภาพ SVG ขั้นสุดท้ายแล้ว คุณต้องส่งออกภาพนั้นเพื่อให้สามารถใช้งานบนเว็บได้ ไปที่ ไฟล์ > บันทึกเป็น > SVG คุณยังสามารถไปที่ File, Export, .SVG ขึ้นอยู่กับเวอร์ชันของ Illustrator ที่คุณใช้ สิ่งนี้จะถูกบันทึกเป็น flyweel_wheel

เมื่อคุณทำสิ่งนี้แล้ว จะมีกล่องโต้ตอบที่มีตัวเลือกสองสามตัว (หากคุณไม่เห็นทั้งหมดต่อไปนี้ ให้ไปที่ “ตัวเลือกเพิ่มเติม”):

โปรไฟล์: SVG 1.1

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

การตั้งค่าย่อย: ตัวเลือกนี้จะฝังรายละเอียดของอักขระลงในไฟล์ SVG เมื่อจำเป็น สิ่งนี้ทำให้ไฟล์แสดงแบบอักษรที่อาจไม่มีอยู่ในระบบของผู้ใช้ เป็นไปได้ที่จะรวมสัญลักษณ์ที่ใช้ใน SVG เท่านั้น (ซึ่งจะลดขนาดไฟล์) เมื่อเลือก "เฉพาะสัญลักษณ์ที่ใช้" (หากคุณใช้แบบอักษรพิเศษสำหรับงานศิลปะของคุณ)

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

คุณสมบัติ CSS: แอตทริบิวต์การนำเสนออนุญาตให้ใส่สไตล์ CSS ใน SVG หากจำเป็น ขึ้นอยู่กับกรณีการใช้งานของคุณ สิ่งนี้อาจเหมาะสมที่สุดหรือไม่ก็ได้ แอตทริบิวต์การนำเสนอระบุสิ่งต่าง ๆ เช่น fill: blue; มากกว่าที่เห็นตามธรรมเนียมในรูปแบบอินไลน์: . แอตทริบิวต์การนำเสนอโดยทั่วไปจะแทนที่ได้ง่ายกว่าใน CSS

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

ในบางกรณี ข้อความอาจถูกวาดไปตามเส้นทางที่กำหนดเอง ด้วยตัวเลือก “ใช้องค์ประกอบ <textPath> สำหรับข้อความบนเส้นทาง” ระบบจะส่งออกเป็นข้อความบนเส้นทาง ตัวเลือก "ตอบสนอง" ก็มีความสำคัญเช่นกัน หากไม่ได้เลือกไว้ ไฟล์ SVG จะมีความกว้างและความสูงแบบตายตัว

วิธีทำให้ SVG เคลื่อนไหวด้วย CSS

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

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

แอนิเมชั่นพื้นฐาน

ต่อไปนี้เป็นแอนิเมชั่นง่ายๆ ที่ทำให้วงล้อโตขึ้นเมื่อโฮเวอร์:

 svg {
   ความสูง: 20%;
   ความกว้าง: 20%;
   เติม: #50c6db;
}
svg:เลื่อน {
   แปลงร่าง: ขนาด (1.25);
   ระยะเวลาเปลี่ยนผ่าน: 1.5 วินาที;
} 

ภาพเคลื่อนไหวล้อหมุน

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

วงล้อ SVG จะทำหน้าที่เป็นกราฟิกสปินเนอร์ในการโหลด ล้อด้านนอกจะหมุนและด้านในจะโตขึ้นเล็กน้อยเมื่อสีเปลี่ยนจากสีอ่อนเป็นสีเข้ม

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

พื้นฐานการแปลงแหล่งกำเนิด

คุณสมบัติต้นกำเนิดของการแปลงใช้เพื่อเปลี่ยนตำแหน่งของจุดกำเนิดของการเปลี่ยนแปลงขององค์ประกอบ จุดเริ่มต้นการเปลี่ยนแปลงขององค์ประกอบ HTML อยู่ที่ (50%, 50%) ซึ่งเป็นศูนย์กลางขององค์ประกอบ

จุดกำเนิดการแปลงขององค์ประกอบ SVG อยู่ที่จุด (0, 0) ซึ่งเป็นมุมบนซ้ายของผืนผ้าใบ

องค์ประกอบ SVG หมุนรอบศูนย์กลางได้อย่างไร จำเป็นต้องมีการปรับปรุงด้วยคุณสมบัติการแปลงแหล่งกำเนิด สามารถตั้งค่าได้โดยใช้ค่าเปอร์เซ็นต์หรือค่าสัมบูรณ์ (pixels, ems หรือ rems) ค่านี้จะถูกตั้งค่าให้สัมพันธ์กับกล่องขอบเขตขององค์ประกอบ

หากเราต้องตั้งค่าจุดกำเนิดการแปลงของ <rect> เป็นศูนย์โดยใช้ค่าเปอร์เซ็นต์ จะทำดังนี้:

 ขวา {
  แหล่งกำเนิดการเปลี่ยนแปลง: 50% 50%;
}

ทำล้อ

อันดับแรก การตั้งค่าคีย์เฟรมการหมุนเป็นกุญแจสำคัญ นี่จะเป็นกราฟิกสปินเนอร์ ดังนั้นจำเป็นต้องหมุนเต็ม ก็จะมีการใช้เอฟเฟ็กต์เฟดอินเช่นกัน ตัวอย่างนี้สามารถพบได้ใน Codepen

 @keyframes หมุน {
    จาก {แปลง:หมุน(0deg);}
    เพื่อ {แปลง:หมุน(360deg);}
}
@keyframes จางหายไปใน {
    0% {
        ความทึบ: .35;
    }
    50% {
        ความทึบ: .5;
    }
    75% {
        ความทึบ: .75;
    }
    100% {
        ความทึบ: .25;
    }
}

ต่อไป สิ่งสำคัญคือต้องสร้างกระดาษห่อ SVG

 .svg-คอนเทนเนอร์ {
  ความสูง:100%;
  ความกว้าง:100%;
  ความสูงสูงสุด: 15 ซม.;
  ความกว้างสูงสุด: 15 ซม.;
  ขอบ: 0 อัตโนมัติ;
}

สร้างสไตล์ SVG ทั่วไปและนี่คือที่ที่ระบุต้นทางของการแปลง

 svg {
  ด้านบน: 50%;
  ซ้าย: 50%;
  ตำแหน่ง: แน่นอน;
  ความสูงสูงสุด: 15 ซม.;
  ความกว้างสูงสุด: 15 ซม.;
  ความกว้าง: 20%;
  ความสูง: 20%;
  เติม: #50c6db;
  แปลงร่าง: แปล (50%, 50%);
} 

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

 #ล้อนอก {
  แอนิเมชั่น: สปิน 4s เชิงเส้นไม่สิ้นสุด;
}
#ล้อด้านใน {
  แอนิเมชั่น: fadeIn 2s เชิงเส้นไม่สิ้นสุด;
} 

หวังว่านี่จะเป็นคำแนะนำที่ดีเกี่ยวกับ SVG และเทคนิคแอนิเมชั่นพื้นฐาน เมื่อคุณใช้มันมากขึ้น แนวคิดพื้นฐานเหล่านี้จะช่วยให้คุณสร้างแอนิเมชั่นที่ซับซ้อนมากขึ้น