รูปแบบใดที่สนับสนุนแอนิเมชันที่เหมาะกับเว็บ

13

รูปแบบใดที่สนับสนุนแอนิเมชันเหมาะสำหรับเว็บและข้อดีและข้อเสียของแต่ละรูปแบบคืออะไร

image-format animation

— Alinium
แหล่งที่มา

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

— Zach Saucier

13

ขึ้นอยู่กับประเภทของภาพเคลื่อนไหวที่คุณต้องการ

.gif images - รองรับการใช้งานเต็มรูปแบบ แต่ จำกัด การใช้งานกับเฟรม ไฟล์. png นั้นควรได้รับการสนับสนุนสำหรับภาพเคลื่อนไหว แต่คุณไม่เห็นมันบ่อยนักหากเป็นอย่างนั้น
Flash, Silverlight และปลั๊กอินอื่น ๆ - Flash มีแพร่หลายมากที่สุด แต่ปลั๊กอินทั้งหมดจะต้องติดตั้งในเบราว์เซอร์และไม่สามารถนับได้ว่าจำเป็นต้องติดตั้งบนคอมพิวเตอร์ของผู้ใช้ อาจไม่ทำงานสำหรับแพลตฟอร์มมือถือ
CSS3 - แปลงหรือแอนิเมชั่นอย่าง จำกัด สนับสนุนเบราว์เซอร์ จำกัด
วิดีโอ HTML5 - อนาคต แต่รองรับเบราว์เซอร์ที่ จำกัด
JavaScript - ต้องเปิดใช้งาน แต่ควรใกล้เคียงกับการสนับสนุนเบราว์เซอร์สากล ภาพเคลื่อนไหวมี จำกัด ดูRaphaël.js
แท็ก Canvas - รองรับเบราว์เซอร์สมัยใหม่ แต่รองรับภาพเคลื่อนไหวที่หลากหลาย

— Virtuosi Media
แหล่งที่มา

ฉันกำลังจะไปที่นี่ แต่<canvas>ภาพเคลื่อนไหวนั้นเป็นจาวาสคริปต์ - มันเป็นเพียงรูปแบบที่แตกต่างกันซึ่งสามารถวาดสิ่งต่างๆได้ หากคุณต้องการความแม่นยำคุณควรแยกแยะความแตกต่างระหว่างองค์ประกอบ HTML ภาพเคลื่อนไหว SVG (ที่ใช้ raphael.js) และ HTML5<canvas>

— Yi Jiang

ความแตกต่างระหว่าง SVG และภาพเคลื่อนไหวบนผืนผ้าใบสั้น ๆ - ด้วย SVG ทุกเส้นทางเป็นองค์ประกอบที่คุณสามารถผูกข้อมูลและเหตุการณ์เช่นคลิกและวางเมาส์ไปที่และโต้ตอบกับเหมือน div ในขณะที่ Canvas เป็นเหมือนเบราว์เซอร์ที่สร้างสิ่งต่าง ๆ ให้ กฎพฤติกรรมพวกเขาลืมเกี่ยวกับพวกเขา SVG ไม่มีอยู่ใน IE ก่อน IE 9 ซึ่งเป็นสาเหตุที่ราฟาเอลเจ๋ง - ควบคุม SVG หรือใน IE6-8 จะใช้แบรนด์เทียบเท่าของตัวเองเก่าของ IE (เรียกว่า VML) สิ่งเดียวที่ฉันรู้ว่าราฟาเอลไม่ทำงานคือเบราว์เซอร์หุ้น Android เก่า (ก่อนเวอร์ชัน 2 ฉันคิดว่า)

— user56reinstatemonica8

2

นี่คือนอกเหนือจากคำตอบที่ดีของ Virtuosi Media:

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

นอกจากนี้ยังสามารถโต้ตอบ หากคุณเลื่อนไปที่ส่วน Smart Cover ของหน้า iPad ของ Apple คุณสามารถดูได้ในลักษณะการทำงาน: http://www.apple.com/ipad/features/

— Marc Edwards
แหล่งที่มา

1

เมื่อวางภาพที่มีความโปร่งใสด้านบนของภาพเคลื่อนไหวบนเลเยอร์ใต้ภาพ คุณจะพบว่า PNG24 เป็นรูปแบบภาพเดียวที่ anti-aliasing ผสมผสานอย่างถูกต้องกับภาพพื้นหลัง ด้วย GIF และ PNG8 คุณจะพบว่าขอบของคุณเป็นก้อน ดูไม่ดี แต่พลาดง่ายมาก

— John Drefahl
แหล่งที่มา