เครื่องมือสร้าง CSS Sprite Animation
สร้างโค้ด CSS animation อัตโนมัติ
จากรูปภาพหลายภาพหรือสไปรต์ชีต
📏 การตั้งค่ากริด
⚙️ การตั้งค่า Animation
🎞️ ลำดับเฟรม
ลากเพื่อจัดเรียงใหม่เกี่ยวกับเครื่องมือสร้าง Sprite Animation
เครื่องมือสร้าง CSS Sprite Animation เป็นเครื่องมือออนไลน์ฟรีที่ช่วยสร้างโค้ด CSS อัตโนมัติสำหรับแอนิเมชันโดยใช้พร็อพเพอร์ตี้ animation และฟังก์ชัน steps() จากรูปภาพหลายเฟรมหรือสไปรต์ชีตที่มีอยู่
ต่างจาก GIF animation CSS sprite ให้รูปภาพคุณภาพสูงที่ไม่มีการลดทอนคุณภาพ ช่วยให้คุณควบคุมความเร็วในการเล่น ทิศทาง และจำนวนรอบการทำซ้ำได้อย่างยืดหยุ่นผ่าน CSS นอกจากนี้ยังสามารถรักษส่วนที่โปร่งใสบางส่วน (alpha channel) ได้อย่างสวยงาม
ทุกขั้นตอนตั้งแต่การโหลดรูปภาพ การรวม ไปจนถึงการสร้างโค้ด CSS จะถูกประมวลผลภายในเบราว์เซอร์ของคุณทั้งหมด รูปภาพของคุณจะไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์ เพื่อให้มั่นใจได้ถึงความรวดเร็วและปลอดภัย
วิธีสร้าง CSS Sprite Animation
อัปโหลดรูปภาพ
เลือกสไปรต์ชีตที่รวมมาแล้ว หรืออัปโหลดรูปภาพหลายเฟรมเพื่อนำมารวมเป็นชีตเดียวกัน
ปรับแต่งแอนิเมชัน
กำหนดจำนวนคอลัมน์และแถว ความเร็วในการเล่น (ระยะเวลา) และทิศทางการเล่นไปพร้อมกับดูภาพตัวอย่างแบบเรียลไทม์
รับโค้ดและรูปภาพ
ดาวน์โหลดภาพสไปรต์ชีตที่สมบูรณ์แล้ว และคัดลอกโค้ด CSS/HTML ที่สร้างขึ้นเพื่อนำไปใช้ในโปรเจ็กต์ของคุณ
อธิบายคุณสมบัติ CSS
การทำงานของ CSS animation + steps()
ฟังก์ชัน steps() เป็นค่าที่ใช้ในพร็อพเพอร์ตี้ animation-timing-function ของ CSS ในขณะที่แอนิเมชันปกติ (เช่น ease หรือ linear) จะเปลี่ยนค่าอย่างราบรื่นตามเวลา แต่ steps() จะเปลี่ยนค่าทีละขั้น
ใน sprite animation พร็อพเพอร์ตี้นี้ถูกใช้เพื่อเลื่อน background-position ทีละความกว้างของหนึ่งเฟรมในทันที ทำให้เกิดเอฟเฟกต์การสลับเฟรมเหมือนสมุดพลิก
| พร็อพเพอร์ตี้ | คำอธิบาย | บทบาทใน Sprites |
|---|---|---|
| animation-timing-function | กราฟความเร็วของแอนิเมชัน | การตั้งค่า steps(N) จะช่วยป้องกันการเปลี่ยนภาพอย่างราบรื่นระหว่างเฟรม |
| background-position | ตำแหน่งเริ่มต้นของภาพพื้นหลัง | มีการแก้ไขใน @keyframes เพื่อเลื่อนเฟรมให้เข้ามาในมุมมอง |
| animation-duration | เวลาที่ใช้เพื่อให้ครบรอบหนึ่งครั้ง | กำหนดความเร็วในการเล่นโดยรวม (FPS) |
อภิธานศัพท์ Animation
- Sprite Sheet
- รูปภาพขนาดใหญ่ภาพเดียวที่มีรูปภาพย่อยหลายรูป (เฟรม) เรียงกันเป็นตาราง ช่วยลดจำนวนคำขอ HTTP และปรับปรุงเวลาการโหลดหน้าเว็บ นิยมใช้มากในการพัฒนาเกมสำหรับแอนิเมชันของตัวละคร
- ฟังก์ชัน steps()
- ฟังก์ชัน Easing ของ CSS ที่จะเปลี่ยนค่าทีละขั้นแทนที่จะทำให้ราบรื่น ตัวอย่างเช่น
steps(4)จะแบ่งการทำงานออกเป็น 4 ขั้นแยกกัน เป็นองค์ประกอบสำคัญในการสร้าง CSS sprite animation - @keyframes
- กฎ CSS ที่ใช้สำหรับกำหนดสถานะระหว่างทางของการสร้างแอนิเมชัน ใน sprite animation จะเป็นการกำหนดการเปลี่ยน
background-positionจาก 0% (เริ่มต้น) ไปยัง 100% (สิ้นสุด) ตามความกว้างรวมของภาพ - background-position
- พร็อพเพอร์ตี้ CSS ที่ใช้กำหนดตำแหน่งเริ่มต้นของภาพพื้นหลัง เมื่อเปลี่ยนค่านี้ไปในทิศทางลบ เฟรมต่างๆ ของสไปรต์ชีตจะถูกดึงเข้ามาแสดงในกรอบที่มองเห็น
- Alpha Channel
- ส่วนของข้อมูลรูปภาพที่กำหนดความโปร่งใส การใช้ไฟล์รูปแบบ PNG ช่วยให้ไล่ระดับความโปร่งใสได้อย่างสวยงาม ต่างจาก GIF ที่รองรับความโปร่งใสแค่ 1 บิต (ทึบแสงทั้งหมดหรือโปร่งใสทั้งหมด)
คำถามที่พบบ่อย
- Q.รูปภาพที่อัปโหลดจะถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?
- ไม่ เครื่องมือนี้ประมวลผลรูปภาพทั้งหมด—รวมถึงการโหลดรูปภาพ การรวมรูปภาพ และการสร้างโค้ด—ในสภาพแวดล้อมเฉพาะที่ของเบราว์เซอร์ของคุณ จะไม่มีข้อมูลถูกส่งไปยังเซิร์ฟเวอร์ภายนอก จึงปลอดภัยต่อการใช้งานกับภาพความลับ
- Q.ความแตกต่างระหว่าง GIF animation และ CSS sprite คืออะไร?
- แม้ว่าไฟล์ GIF จะเป็นไฟล์เดี่ยวที่เรียบง่าย แต่ก็จำกัดสีแค่ 256 สีและไม่รองรับความโปร่งใสบางส่วนอย่างเหมาะสม CSS sprite ใช้ภาพ PNG เพื่อให้ได้คุณภาพสูง และมีความยืดหยุ่นผ่าน CSS—คุณสามารถเปลี่ยนความเร็ว เล่นถอยหลัง หรือหยุดชั่วคราวเมื่อชี้เมาส์ (hover) ได้ง่ายๆ
- Q.ฉันสามารถรวมรูปภาพที่มีขนาดต่างกันได้หรือไม่?
- ด้วยกลไกของ CSS sprite แต่ละเฟรมต้องมีขนาด (กว้างและสูง) เท่ากัน หากคุณอัปโหลดรูปภาพที่มีขนาดต่างกัน เครื่องมือจะอิงขนาดตามรูปภาพแรก ซึ่งอาจทำให้ถูกตัดหรือจัดตำแหน่งไม่ตรงตามต้องการ ขอแนะนำให้ปรับขนาดภาพให้เท่ากันก่อน
- Q.จะรองรับจอแสดงผล Retina (ความละเอียดสูง) ได้อย่างไร?
- เพื่อให้ได้ภาพคมชัดบนหน้าจอความละเอียดสูง (เช่น จอ Retina) ให้สร้างสไปรต์ชีตที่มีความละเอียดเป็นสองเท่าของจอแสดงผลที่ต้องการ จากนั้นใช้พร็อพเพอร์ตี้
background-sizeของ CSS เพื่อย่อขนาดให้เท่ากับที่แสดงจริง - Q.ขนาดสูงสุดที่แนะนำสำหรับสไปรต์ชีตคือเท่าไร?
- โดยทั่วไป แนะนำให้รักษาขนาดไม่เกิน 2048x2048 พิกเซล สไปรต์ชีตที่ใหญ่เกินไปอาจกินหน่วยความจำอย่างมากบนอุปกรณ์เคลื่อนที่ และอาจทำให้แอนิเมชันกระตุกหรือเบราว์เซอร์ค้าง การปรับให้เหลือ 1024x1024 พิกเซลหรือต่ำกว่ามักจะปลอดภัยกว่า
การใช้งาน
แอนิเมชันกำลังโหลด (Loading)
เหมาะมากสำหรับการสร้างสปินเนอร์ที่ปรับแต่งเอง (spinners) หรือแถบความคืบหน้าที่แสดงระหว่างแอปหรือเว็บไซต์กำลังโหลด ทำงานได้อย่างมีประสิทธิภาพด้วย CSS ขั้นต่ำ และรองรับดีไซน์แบบกึ่งโปร่งใสที่สวยงาม
การเคลื่อนไหวของตัวละคร (Game UI)
สร้างลูปการกระทำ เช่น "เดิน", "วิ่ง", หรือ "กระโดด" ให้กับตัวละครในเกมบนเบราว์เซอร์หรือเว็บไซต์แบบอินเทอร์แอกทีฟ เปลี่ยนแปลงท่าทางได้ง่ายๆ แค่สลับคลาส CSS
ไอคอน UI แบบอินเทอร์แอกทีฟ
เหมาะสำหรับการเปลี่ยนไอคอนแบบเคลื่อนไหวเวลาที่ผู้ใช้ชี้เมาส์ที่ปุ่มหรือคลิกที่รูปหัวใจ "รายการโปรด" เรียกใช้แอนิเมชันเหล่านี้ได้อย่างราบรื่นโดยใช้ :hover หรือการสลับคลาส
แบนเนอร์โฆษณา (Banner Ads) คุณภาพสูง
มีประสิทธิภาพสำหรับแบนเนอร์โฆษณาที่ต้องการการเคลื่อนไหวที่ดึงดูดใจโดยไม่สูญเสียคุณภาพเหมือนในไฟล์ GIF เมื่อใช้งานคู่กับการบีบอัดไฟล์ PNG คุณจะสามารถสร้างแบนเนอร์แบบเคลื่อนไหวที่คมชัดและสะดุดตาได้
ส่งความคิดเห็น
โปรดแจ้งให้เราทราบความคิดเห็นของคุณเพื่อช่วยปรับปรุงเครื่องมือ
การส่งความคิดเห็นถูกระงับชั่วคราว
เซิร์ฟเวอร์ไม่ว่างหรือระบบป้องกันสแปมทำงานอยู่ โปรดลองอีกครั้งในภายหลัง