เนื้อหา
- 01. D3.js
- 02. แผนภูมิ js
- 03. นักชาร์ต
- 04. บริเทคชาร์ต
- 05. ตูชาร์ต
- 06. ทู js
- 07. Pts.js
- 08. อนิเมะ js
- 09. PixiJS
- 10. ซด็อก
- 11. Snap.svg
เฟรมเวิร์ก Javascript สามารถตอบสนองฟังก์ชันต่างๆได้ ที่นี่เราจะมาดูไลบรารีบางส่วนที่จะช่วยคุณสร้างกราฟิกที่สวยงาม
เบราว์เซอร์มี API และพื้นผิวการวาดภาพที่มีพลังสูงมากมาย สิ่งที่โดดเด่นที่สุดคือองค์ประกอบผ้าใบและกราฟิกเวกเตอร์ที่ปรับขนาดได้ (SVG) คุณลักษณะทั้งสองนี้พร้อมใช้งานในเบราว์เซอร์บนเดสก์ท็อปและอุปกรณ์เคลื่อนที่เกือบทั้งหมดแล้ว แต่ API ที่จำเป็นในการใช้งานนั้นค่อนข้างต่ำและโดยทั่วไปแล้ว "ระดับต่ำ" จะแปลเป็นโค้ดที่น่าเบื่อและซ้ำซ้อนจำนวนมากเพื่อทำสิ่งง่ายๆ
เนื่องจากการเขียนโค้ดที่น่าเบื่อและซ้ำซ้อนนั้นไม่ได้อยู่ในรายชื่อสิ่งที่นักพัฒนามักจะชอบทำมากนักแม้จะมีโปรแกรมแก้ไขโค้ดที่ดีที่สุดและแล็ปท็อปที่ดีที่สุดสำหรับการเขียนโปรแกรม แต่ก็ยังมีไลบรารีหลายแห่งที่ช่วยให้คุณมีความต้องการในการวาดเบราว์เซอร์ทั้งหมดของคุณ
ในบทความนี้เราจะดูตัวเลือกบางส่วนที่มีให้ เราจะสำรวจไลบรารี JavaScript ที่เป็นที่นิยมมากที่สุดและพูดคุยเกี่ยวกับจุดแข็งและจุดอ่อนของพวกเขา นอกจากนี้เรากำลังจะทำการอธิบายเล็ก ๆ น้อย ๆ ในโครงการที่ไม่ค่อยมีคนรู้จักซึ่งจะเติมเต็มความต้องการเฉพาะกลุ่มที่น่าสนใจซึ่งเป็นสิ่งที่คุณไม่รู้ว่าต้องการจนกว่าคุณจะต้องการ เริ่มต้นจากศูนย์? ลองใช้เครื่องมือสร้างเว็บไซต์ชั้นนำและพิจารณาว่าบริการเว็บโฮสติ้งใดที่เหมาะกับคุณ
01. D3.js
D3.js เป็นบอสใหญ่ของไลบรารีกราฟิก JavaScript ด้วยการดาวน์โหลดมากกว่าหนึ่งล้านครั้งต่อสัปดาห์ใน npm อาจเป็นไลบรารีกราฟิกที่เป็นที่รู้จักและใช้กันอย่างแพร่หลายมากที่สุด มีหน้า Wikipedia ของตัวเองด้วย และเรามาดูกันดีกว่าว่าเมื่อคุณรู้ว่าได้ทำครั้งใหญ่แล้ว
D3 ช่วยให้คุณสร้างภาพข้อมูลได้ทุกชนิด คุณเพียงแค่มองผ่านหน้าตัวอย่างเพื่อดูโลกแห่งความเป็นไปได้ ยังดีกว่าไปที่การแสดงภาพเชิงโต้ตอบของ Shirley Wu ทุกบรรทัดในละครเพลงเรื่อง Hamilton หากคุณต้องการให้ใจของคุณกระปรี้กระเปร่า
D3 เป็นเครื่องมือที่ครอบคลุมทั้งหมด มีการเลือก DOM ของตัวเองความสามารถ AJAX และแม้แต่ตัวสร้างตัวเลขสุ่มที่เป็นกรรมสิทธิ์ ส่วนประกอบแต่ละส่วนของ D3 เป็นโมดูลโหนดของตัวเองที่ต้องนำเข้า ตัวอย่างเช่นโมดูลการเลือกเรียกว่า d3-selection นอกจากนี้ยังมีโมดูลสำหรับอาร์เรย์รูปร่างสีการลากแล้วปล่อยเวลาและอื่น ๆ อีกมากมาย
พลังของ D3 มาพร้อมกับการลดทอนความซับซ้อน เส้นโค้งการเรียนรู้อาจสูงชันและรหัสยังสามารถสัมผัสได้ การสร้างสิ่งที่เรียบง่ายอย่างแผนภูมิแท่งทำให้คุณต้องประกอบแกนสเกลขีดหรือแม้แต่วาดรูปสี่เหลี่ยมที่จะแทนแท่งด้วยตนเอง นักพัฒนามักจะบ่นเกี่ยวกับความเข้าใจระดับต่ำที่จำเป็นเพื่อให้ได้ผลกับ D3
ส่วนใหญ่เป็นเพราะการสร้างภาพข้อมูลที่ซับซ้อนทำให้คุณต้องมีความเข้าใจในระดับต่ำเกี่ยวกับการแสดงภาพที่คุณต้องการสร้าง D3 ไม่ใช่ตัวเลือกที่ดีที่สุดสำหรับแผนภูมิที่อบไว้ล่วงหน้า ด้วยเหตุนี้จึงมีทางเลือกอื่น ๆ อีกมากมายที่จะทำให้คุณพบกับ 'หลุมแห่งความสำเร็จ' ได้เร็วกว่ามาก
D3 สามารถแสดงผลเป็นผืนผ้าใบและ SVG อย่างไรก็ตามความมหัศจรรย์ที่แท้จริงของ D3 อยู่ที่ความสามารถในการ "เชื่อมโยงข้อมูล" กับกราฟิกที่สร้างขึ้น ลองนึกถึงแผนภูมิที่เปลี่ยนแปลงเมื่อข้อมูลที่เข้ามามีการเปลี่ยนแปลง ด้วย SVG รายการกราฟิกแต่ละรายการเป็นองค์ประกอบแต่ละรายการที่สามารถเลือกและอัปเดตได้ สิ่งนี้เป็นไปไม่ได้สำหรับแคนวาสและเนื่องจาก D3 เป็นพื้นฐานเกี่ยวกับการเปิดใช้งานการแสดงข้อมูลโดยทั่วไป SVG จึงเป็นรูปแบบผลลัพธ์ที่ต้องการ
02. แผนภูมิ js
Chart.js เป็นโครงการโอเพ่นซอร์สสำหรับการสร้างแผนภูมิที่มีประสิทธิภาพด้วย JavaScript ความแตกต่างอย่างมากระหว่าง Chart.js และ D3 ก็คือในขณะที่คุณสามารถสร้างอะไรก็ได้ด้วย D3 แต่ Chart.js จะ จำกัด ให้คุณสร้างแผนภูมิไว้ล่วงหน้าแปดประเภท ได้แก่ เส้น, แท่ง, วงกลม, เชิงขั้ว, ฟอง, กระจาย, พื้นที่และแบบผสม แม้ว่าจะดูเหมือน จำกัด แต่ก็เป็นสิ่งที่ทำให้ Chart.js ง่ายขึ้นในการเริ่มต้นใช้งาน โดยเฉพาะอย่างยิ่งสำหรับผู้ที่ไม่เชี่ยวชาญด้านข้อมูล แต่รู้วิธีการใช้แผนภูมิพื้นฐาน
ไวยากรณ์ถูกสร้างขึ้นจากประเภทแผนภูมิ คุณเริ่มต้นแผนภูมิใหม่บนองค์ประกอบผืนผ้าใบที่มีอยู่ตั้งค่าประเภทแผนภูมิจากนั้นตั้งค่าตัวเลือกแผนภูมิ Chart.js แสดงผลเป็นผืนผ้าใบเท่านั้น นี่ไม่ใช่ปัญหาเนื่องจากเบราว์เซอร์สมัยใหม่ทั้งหมดรองรับองค์ประกอบผ้าใบ HTML แต่อาจเป็นปัญหาสำหรับนักพัฒนาที่มีข้อกำหนดในการรองรับ SVG
นอกจากนี้ยังหมายความว่าคุณมีข้อ จำกัด ในภาพเคลื่อนไหวที่เป็นไปได้ Chart.js นอกกรอบมีการรองรับสมการการค่อยๆเปลี่ยนและภาพเคลื่อนไหวทั้งหมดที่ระบุด้วยการตั้งค่าคุณสมบัติเดียว แม้ว่าจะทำให้การรับแผนภูมิเคลื่อนไหวเป็นเรื่องง่ายและรวดเร็ว แต่การไม่มีองค์ประกอบ SVG แต่ละองค์ประกอบจะทำให้คุณไม่สามารถสร้างภาพเคลื่อนไหวที่ซับซ้อนโดยใช้การเปลี่ยนและภาพเคลื่อนไหว CSS3 ได้
แตกต่างจาก D3 ตรงที่ Chart.js ไม่ใช่แบบแยกส่วนดังนั้นจึงใช้ JavaScript เพียงอันเดียวเพื่อรับการสนับสนุนสำหรับฟังก์ชันและประเภทแผนภูมิทั้งหมด วิธีนี้ทำให้ง่ายต่อการเริ่มต้น แต่หมายความว่าเนื้อหาของคุณอาจมีขนาดใหญ่ขึ้นมาก โดยเฉพาะอย่างยิ่งถ้าคุณต้องการแกนเวลา - Chart.js ต้องใช้ Moment.js ซึ่งจะย่อขนาด ~ 51kb และบีบอัด การสร้างแผนภูมิแท่งด้วย Chart.js นั้นง่ายกว่า D3 อย่างไรก็ตามมีเพดานที่มาพร้อมกับความเรียบง่าย คุณอาจพบว่าคุณทำอะไรนอกกรอบได้ถึงขีด จำกัด บ่อยครั้งนักพัฒนาเริ่มต้นด้วยโซลูชันเช่น Chart.js จากนั้นเปลี่ยนเป็น D3
หากความเรียบง่ายของ Chart.js ดึงดูดใจคุณคุณอาจชอบตัวเลือกถัดไป: Chartist
03. นักชาร์ต
Chartist มุ่งหวังที่จะเป็นไลบรารีแผนภูมิที่เรียบง่ายและคล่องตัวซึ่งมีขนาดเล็กและง่ายต่อการเริ่มต้นใช้งาน นอกจากนี้ยังออกแบบมาให้ตอบสนองตามค่าเริ่มต้น นี่เป็นข้อตกลงที่ยิ่งใหญ่กว่าที่คิดเนื่องจากเฟรมเวิร์กเช่น D3 ไม่ได้ปรับขนาดแผนภูมิโดยอัตโนมัติ แต่ต้องการให้นักพัฒนาเชื่อมโยงกับเหตุการณ์และวาดภาพกราฟิกใหม่
Chartist ยังมีขนาดเล็กเมื่อเทียบกับ Chart.js มีน้ำหนักเพียง 10KB โดยมีการพึ่งพาเป็นศูนย์ นั่นอาจเป็นเพราะมีแผนภูมิเพียงสามประเภทเท่านั้น ได้แก่ เส้นแท่งและวงกลม มีรูปแบบต่างๆภายในประเภทเหล่านี้ (เช่น scatter plot เป็นประเภทเส้นใน Chartist) แต่ขนาดที่เล็กและความสะดวกในการกำหนดค่าจะถูกตอบโต้ด้วยการขาดประเภทแผนภูมิที่ไม่อยู่ในกรอบ
Chartist แสดงผลเป็น SVG แทนที่จะเป็นแคนวาสทำให้ปรับแต่งได้มากขึ้นทั้งในแง่ของรูปลักษณ์และความรู้สึกรวมทั้งให้การควบคุมการโต้ตอบและภาพเคลื่อนไหวได้มากขึ้น อย่างไรก็ตามการไม่มีการเข้าถึงพื้นที่แสดงผลหมายความว่าคุณอาจมีเวลาที่ยากขึ้นในการดำเนินการบางอย่าง ตัวอย่างเช่นมี API สำหรับการเรนเดอร์แคนวาสไปยังรูปภาพ (toDataURI) ไม่มีตัวเลือกนี้สำหรับ SVG ดังนั้นการส่งออกแผนภูมิเป็นรูปภาพจะพิสูจน์ได้ว่ายุ่งยากกว่ามาก ในโลกแห่งอุดมคติคุณจะมีตัวเลือกในการแสดงผลทั้งสองโหมด
แผนภูมิ Chartist กำหนดค่าได้ง่ายกว่า Chart.js เนื่องจากมีตัวเลือกน้อยกว่า แม้ว่าจะเป็นไปได้ที่จะขยายแผนภูมิเหล่านี้ด้วยฟังก์ชันที่ไม่มากนัก แต่การมุ่งเน้นไปที่ความเรียบง่ายหมายความว่าตามคำจำกัดความเรียบง่าย Chartist เป็นโซลูชันที่ยอดเยี่ยมสำหรับผู้ที่ต้องการโซลูชันการสร้างแผนภูมิขั้นพื้นฐาน แผนภูมินั้นยากที่จะกำหนดค่าโดยเนื้อแท้เนื่องจากต้องใช้ความรู้บางอย่างเกี่ยวกับวิธีตั้งค่าข้อมูลตามแกนที่กำหนดและจัดกลุ่มด้วยวิธีการบางอย่าง Chartist ทำให้ส่วนการสร้างแผนภูมิง่ายที่สุดเท่าที่จะเป็นไปได้ แต่คุณอาจพบว่าตัวเองต้องการโซลูชันที่มีประสิทธิภาพมากขึ้นเมื่อคุณคุ้นเคยกับการสร้างแผนภูมิของคุณมากขึ้น
Chartist ยังแสดงการสนับสนุนเฟรมเวิร์กโอเพนซอร์สรวมถึง React และ Angular ไม่มีการกล่าวถึงแพ็คเกจ Vue บนไซต์
04. บริเทคชาร์ต
Britecharts เป็นไลบรารีแผนภูมิที่รวม D3 สร้างโดย Eventbrite ซึ่งเป็นผู้เปิดโครงการภายใต้ใบอนุญาต Apache V2 ที่อนุญาต
มีชุดแผนภูมิที่เรียบง่าย แต่สวยงาม แม้ว่าการสร้างแผนภูมิแท่งด้วยวานิลลา D3 จะเป็นงานที่ค่อนข้างยุ่งยาก แต่การตัดของ Britecharts ทำให้ง่ายเหมือนการสร้างออบเจ็กต์ barChart ใหม่จากนั้นตั้งค่าความกว้างและความสูง
barChart.width (500) .height (500);
Britecharts รองรับแผนภูมิพื้นฐานทุกประเภท: เส้น, แท่ง, โดนัท, สัญลักษณ์แสดงหัวข้อย่อย, พล็อตการกระจาย, เส้นประกายและขั้นตอนซึ่งมากกว่าที่ห้องสมุดเสนอเช่น Chartist นอกจากนี้ยังมีคำแนะนำเครื่องมือพื้นฐานและฟังก์ชันตำนาน ภาพเคลื่อนไหวสำหรับแผนภูมิเป็นแบบในตัวและ Eventbrite ได้จัดเตรียมชุดสีที่สวยงามไว้ให้
ท้ายที่สุด Britecharts เป็นตัวเลือกที่ยอดเยี่ยมสำหรับฟังก์ชันการสร้างแผนภูมิขั้นพื้นฐาน วัตถุการกำหนดค่านั้นค่อนข้างง่ายและคุณยังคงได้รับพลังของ D3 ภายใต้ฝาครอบโดยไม่ต้องรู้อะไรเกี่ยวกับ D3 เลย นักพัฒนาหลายคนจะพบว่านี่เป็นตัวเลือกที่น่าสนใจมากกว่าการสร้างแผนภูมิที่สมบูรณ์ตั้งแต่เริ่มต้นด้วย D3
นอกจากนี้ยังให้ความสำคัญกับด้านการผูกข้อมูลของ D3 ทำให้ค่อนข้างดีสำหรับแผนภูมิที่ต้องเปลี่ยนแปลงเมื่อมีการเปลี่ยนแปลงข้อมูลพื้นฐาน แม้ว่าจะมีข้อ จำกัด ในประเภทที่มีอยู่ แต่ก็มีประเภทแผนภูมิพื้นฐานที่คุณสามารถขยายเพื่อสร้างประเภทแผนภูมิใหม่ของคุณเองได้
05. ตูชาร์ต
Taucharts เป็นอีกหนึ่งโซลูชันการสร้างแผนภูมิที่รวมความซับซ้อนของ D3 ไว้ใน API ที่ใช้งานง่าย สร้างขึ้นจากแนวคิดจาก The Grammar of Graphics ซึ่งเป็นหนังสือของผู้แต่ง Leland Wilkinson ให้ความเข้าใจว่าจะใช้การแสดงภาพข้อมูลเมื่อใดและอย่างไรเพื่อแสดงข้อมูลประเภทต่างๆ
นอกกรอบมันมีแผนภูมิเส้นแถบแผนภูมิกระจายพื้นที่และแง่มุม อย่างไรก็ตามมันได้นำแนวคิดจาก The Grammar of Graphics มาใช้เป็น "Taucharts Language" ซึ่งเป็นกรอบที่ใช้ในการสร้างภาพข้อมูลของคุณเอง
Taucharts ดูน่าสนใจทีเดียวและความจริงที่ว่ามันสร้างขึ้นจาก D3 ทำให้เป็นตัวเลือกที่น่าสนใจและทรงพลัง อย่างไรก็ตามมีความรู้สึกว่าผู้พัฒนาจำเป็นต้องอ่านไวยากรณ์ของกราฟิกด้วยเพื่อที่จะใช้ประโยชน์จากพลังของมันได้เต็มที่
จนถึงตอนนี้เราได้กล่าวถึงเฉพาะการสร้างแผนภูมิและการแสดงข้อมูลเท่านั้น เนื่องจากการวาดแผนภูมิเป็นกรณีการใช้งานที่พบบ่อยที่สุดสำหรับไลบรารีกราฟิกในเบราว์เซอร์ แต่มันไม่ได้เป็นเพียงคนเดียว อีกสถานการณ์หนึ่งที่พบบ่อยสำหรับกราฟิกคือแอนิเมชั่น
06. ทู js
เพื่อไม่ให้สับสนกับ D3.js two.js คือไลบรารี JavaScript แบบโอเพนซอร์สสำหรับการวาดภาพสองมิติบนเว็บ นอกจากนี้ยังสามารถกำหนดเป้าหมายตัวเลือกกราฟิกทั้งสามในเบราว์เซอร์สมัยใหม่ ได้แก่ SVG, Canvas และ WebGL
Two.js ค่อนข้างคล้ายกับ D3 ตรงที่เน้นการวาดอย่างเคร่งครัดและไม่มีแผนภูมิสำเร็จรูปหรือโครงสร้างแบบโต้ตอบให้เลือก ซึ่งหมายความว่าเช่นเดียวกับ D3 คุณต้องมีความเข้าใจพื้นฐานเกี่ยวกับประเภทของภาพวาดที่คุณพยายามทำและวิธีการบรรลุสิ่งนั้นด้วยโครงสร้างที่สอง js ให้ไว้ การวาดวงกลมนั้นค่อนข้างตรงไปตรงมา ในทางกลับกันการสร้างภาพเคลื่อนไหวที่มีรายละเอียดเป็นความพยายามที่ซับซ้อนกว่ามาก Two.js เป็นเพียงแค่ความน่าเบื่อหน่ายของรูปวาดเท่านั้นไม่ใช่ความน่าเบื่อของการวาดโดยรวม
Two.js ยังติดตามวัตถุทั้งหมดที่คุณสร้างดังนั้นคุณจึงสามารถอ้างอิงและทำให้เคลื่อนไหวได้ตลอดเวลา นี่เป็นสิ่งสำคัญอย่างยิ่งหากคุณกำลังพัฒนาเกมและคุณมีทรัพย์สินที่ต้องติดตามสำหรับสิ่งต่างๆเช่นการตรวจจับการชนกัน มีลูปแอนิเมชั่นในตัวซึ่งช่วยให้คุณไม่ต้องกังวลกับเฟรมภาพเคลื่อนไหวและทำให้ง่ายต่อการเชื่อมโยงในไลบรารีแอนิเมชั่นเช่น GreenSock
แม้ว่า two.js จะมีประสิทธิภาพ แต่ลักษณะอิสระอาจทำให้นักพัฒนาซอฟต์แวร์บางรายไม่แน่ใจว่าจะเริ่มต้นอย่างไรและเป็นเครื่องมือเฉพาะสำหรับการวาดภาพและภาพเคลื่อนไหว 2 มิติมากกว่า อีกตัวเลือกที่ยอดเยี่ยมคือ pts.js
07. Pts.js
Pts ยังเป็นไลบรารีภาพวาดสองมิติ อย่างไรก็ตามมีความแตกต่างกันโดยพื้นฐานกับ two.js เนื่องจากใช้วิธีการที่กำหนดไว้ล่วงหน้าสำหรับวิธีการประกอบภาพวาดและภาพเคลื่อนไหว: ช่องว่างรูปแบบและจุด การเปรียบเทียบที่นักพัฒนาใช้อธิบายว่านี่คือสิ่งที่มาจากโลกทางกายภาพ ช่องว่างคือกระดาษ แบบฟอร์มคือดินสอ และประเด็นคือความคิดของคุณ
ในแง่ของการนำไปใช้งานพื้นที่เป็นองค์ประกอบผ้าใบ เมื่อสร้างองค์ประกอบผ้าใบแล้วคุณสามารถเพิ่มผู้เล่นเข้าไปได้ สิ่งเหล่านี้สามารถเป็นได้ทั้งฟังก์ชันหรือวัตถุ ฟังก์ชันและอ็อบเจ็กต์เหล่านี้ต้องเป็นไปตามอินเทอร์เฟซที่กำหนดไว้ล่วงหน้าซึ่งมีช่องว่าง Pts สร้างขึ้นจาก TypeScript ดังนั้นจึงไม่จำเป็นต้องเดาว่าสิ่งเหล่านี้คืออะไรเนื่องจากเครื่องมือที่คุณใช้มักจะแนะนำผู้ที่มีการเติมข้อความอัตโนมัติ
ตัวอย่างเช่นช่องว่างมีฟังก์ชันเริ่มต้นที่คุณสามารถระบุได้ นี่คือรหัสที่เรียกใช้เมื่อพื้นที่พร้อม ภายในฟังก์ชันเหล่านี้การวาดไปยังช่องว่างจะเกิดขึ้นโดยใช้ออบเจ็กต์แบบฟอร์ม ออบเจ็กต์แบบฟอร์มสามารถวาดรูปร่างแบบใดก็ได้และจุดคือตำแหน่งที่รายการเหล่านี้อยู่ในช่องว่าง
Pts ดูเหมือนจะได้รับการออกแบบมาเพื่อสร้างภาพและภาพเคลื่อนไหวเชิงโต้ตอบเป็นหลัก การนำไปใช้นั้นน่าสนใจแม้ว่าจะค่อนข้างเป็นนามธรรม นักพัฒนาซอฟต์แวร์อาจมีปัญหาในการทำความเข้าใจโมเดล "พื้นที่รูปแบบจุด" ที่ Pts ต้องการ นี่เป็นอีกหนึ่งอุปสรรคทางจิตใจที่จะต้องถูกกำจัดนอกเหนือไปจากการวาดและสร้างภาพเคลื่อนไหว
08. อนิเมะ js
Anime.js เป็นไลบรารีแอนิเมชั่นเป็นหลัก มีระบบซวนเซในตัวเพื่อให้ง่ายขึ้นในการมีภาพเคลื่อนไหวที่ซับซ้อนที่ทับซ้อนกันหรือขึ้นอยู่กับการเกิดขึ้นของการดำเนินการอื่น เป็นเรื่องปกติที่ภาพเคลื่อนไหวจะถูกกำหนดเวลาร่วมกันหรือถูกกระตุ้นโดยกันและกัน ระบบที่ส่ายช่วยให้ใช้งานได้ง่ายขึ้นเนื่องจากช่วยลดค่าใช้จ่ายบางส่วนในการติดตามทุกสิ่งที่เกิดขึ้นบนหน้าเว็บและกำหนดค่าการกำหนดเวลาภาพเคลื่อนไหวด้วยตนเอง
ซึ่งแตกต่างจากไลบรารีภาพวาดที่ครอบคลุมจนถึงตอนนี้ anime.js ไม่มี API สำหรับการวาดรูปร่าง แต่จะถือว่ารูปร่างของคุณมีอยู่แล้วและคุณต้องการทำให้เคลื่อนไหว ทำให้เหมาะสำหรับใช้กับไลบรารีเช่น two.js Anime.js รองรับการสร้างภาพเคลื่อนไหวคุณสมบัติ CSS, SVG, DOM และแม้แต่ JavaScript
Anime.js เป็นตัวเลือกที่ดีสำหรับการสร้างภาพวาดที่มีอยู่ให้เคลื่อนไหวและมีแนวโน้มที่จะรวมกับไลบรารีอื่น ควรถือเป็นทางเลือกอื่นเช่น GreenSock และไม่ใช่สิ่งทดแทนสำหรับไลบรารีการวาดภาพอื่น ๆ Anime.js น่าจะถูกใช้สำหรับภาพเคลื่อนไหวที่ซับซ้อนมากขึ้นซึ่งจำเป็นต้องเกิดขึ้นโดยเป็นส่วนหนึ่งของประสบการณ์การใช้งานเว็บแบบอินเทอร์แอกทีฟ
09. PixiJS
PixiJS เป็นอีกหนึ่งไลบรารีภาพวาด 2 มิติ จุดประสงค์หลักคือทำให้ง่ายต่อการแสดงภาพเคลื่อนไหวและจัดการกราฟิก 2 มิติดังนั้นคุณจึงสามารถมุ่งเน้นไปที่การสร้างประสบการณ์หรือเกมของคุณได้โดยไม่ต้องกังวลกับการติดตามรูปร่างและรูปภาพทั้งหมดที่คุณต้องวาดและเคลื่อนไหว หากคุณกำลังสร้างเกมเนื้อหา (หรือสไปรท์) สามารถเพิ่มจำนวนขึ้นอย่างรวดเร็วซึ่งยากต่อการจัดการ (มีทรัพย์สินมากมายที่ต้องบันทึกหรือเก็บไว้ในที่เก็บข้อมูลบนคลาวด์ที่น่าเชื่อถือที่สุด)
ลักษณะที่น่าสนใจของ PixiJS คือมาจาก API ที่สร้างและใช้งานอย่างแพร่หลายใน Adobe Flash นี่เป็นประโยชน์อย่างมากสำหรับนักพัฒนาที่มาจากพื้นหลัง Flash เนื่องจากประสบการณ์จะรู้สึกคุ้นเคยนอกจากนี้ยังคล้ายกับ SpriteKit ของ Apple อีกด้วย
PixiJS ไม่ใช่เกมเอนจิ้นดังนั้นหากคุณใช้มันสำหรับเกมคุณจะไม่พบเครื่องมือหรือฟิสิกส์ใด ๆ ที่จะจัดการสิ่งต่างๆเช่นการตรวจจับการชนกัน คุณจะต้องรวมมันไว้ในเกมเอนจิ้นจริงหรือที่คุณสร้างขึ้นเองถ้าคุณรู้สึกไม่กล้า
PixiJS แสดงผลเป็น WebGL WebGL เป็นเอ็นจิ้นสำหรับการทำกราฟิกที่เร่งด้วย GPU ในเบราว์เซอร์ ซึ่งหมายความว่ามีประโยชน์สำหรับภาพเคลื่อนไหวและกราฟิกที่ใช้ทรัพยากรระบบจำนวนมากและจะทำงานได้ดีที่สุดเมื่อแสดงผลโดยหน่วยประมวลผลกราฟิกแยก (GPU) ใช้ OpenGL ซึ่งเทียบเท่ากับเดสก์ท็อปสำหรับการรันเกมและโปรแกรมกราฟิก 3 มิติ ภายใต้ฝากระโปรง WebGL ใช้องค์ประกอบผ้าใบ HTML
นักพัฒนากราฟิกที่จริงจังจะชื่นชมพลังของ WebGL อย่างไรก็ตามประสบการณ์เหล่านี้อาจลดลงในเครื่องที่ใช้พลังงานต่ำ แม้ว่าฉันจะรวบรวมบทความนี้ไว้ด้วยกันการสาธิต PixiJS หลายรายการทำให้ระบบของฉันชะลอตัวลงอย่างเห็นได้ชัดซึ่งไม่มีความสามารถระดับสูงที่จำเป็นสำหรับกราฟิกและภาพเคลื่อนไหวที่ซับซ้อน
10. ซด็อก
เครื่องมือวาดภาพส่วนใหญ่ที่เราได้พูดถึงไปแล้วนั้นเป็นสองมิติ เนื่องจากการโต้ตอบส่วนใหญ่ที่เรามีกับหน้าจอเกิดขึ้นในสองมิติ - ตามแกน X และ Y ภาพวาดและภาพเคลื่อนไหวสามมิติมักจะซับซ้อนกว่ามาก
Zdog เป็นไลบรารีสำหรับสร้างประสบการณ์หลอก 3D ที่ส่วนใหญ่เป็นธรรมชาติ เรียกว่า pseudo-3D เพราะในขณะที่วางแนวความคิดภาพวาดในพื้นที่ 3 มิติ แต่จะแสดงผลเป็นรูปทรงแบน ใช้เทคนิคภาพเพื่อทำให้วัตถุ 2 มิติปรากฏเป็น 3 มิติ เอฟเฟกต์น่าสนใจจริงๆ มันดูเป็นสามมิติอย่างสมบูรณ์เมื่อดูภาพเคลื่อนไหว แต่เมื่อถ่ายภาพหน้าจอจะเห็นได้ชัดว่าเป็นภาพแบน นี่คือตัวอย่างหนึ่ง: การสาธิตมาริโอแบบหมุนได้
เนื่องจากการแสดงผลเป็นแบบ 2 มิติ Zdog จึงสามารถแสดงผลเป็น Canvas หรือ SVG ได้ Zdog เป็นตัวเลือกที่ยอดเยี่ยมสำหรับภาพเคลื่อนไหว 3 มิติบนวัตถุธรรมดาโดยเฉพาะอย่างยิ่งหากเนื้อหาเหล่านั้นรวมเอาแง่มุมของการออกแบบที่เรียบ นักพัฒนาที่ต้องการแอนิเมชั่น 3 มิติ แต่ไม่ต้องการจมอยู่กับโลกที่ซับซ้อนของเอ็นจิ้นกราฟิก 3 มิติอาจคิดว่า Zdog เป็นวิธีแก้ปัญหาที่เพียงพอ นอกจากนี้ด้วยการมุ่งเน้นไปที่ภาพแบน Zdog สามารถจ่ายอินเทอร์เฟซที่เรียบง่ายกว่ามากและประสิทธิภาพที่สูงกว่าที่จำเป็นสำหรับการเรนเดอร์ภาพกราฟิก 3 มิติที่ซับซ้อน
มันไม่มีองค์ประกอบของเกมเอนจิ้นเช่นการจัดการสินทรัพย์และการตรวจจับการชนกันดังนั้นจึงจำเป็นต้องห่อหุ้มไว้ในเอ็นจิ้นเกมหรือการพิจารณาเหล่านั้นได้รับการดูแลด้วยตนเอง ซึ่งหมายความว่า Zdog น่าจะดีที่สุดสำหรับภาพเคลื่อนไหว 3 มิติที่แยกได้บนหน้า Landing Page
11. Snap.svg
Snap.svg กล่าวว่าทำให้ "การทำงานกับเนื้อหา SVG ของคุณง่ายเหมือนกับที่ jQuery ทำให้การทำงานกับ DOM" คุณอาจบอกได้จากข้อมูลอ้างอิงของ jQuery ว่า Snap.svg นั้นเก่ากว่าเล็กน้อย แต่ API ของมันให้ความรู้สึกง่ายเหมือนกับ jQuery และนั่นก็เป็นสิ่งที่ทรงพลัง
Snap.svg มี API ที่เรียบง่ายและสะอาดสำหรับการเลือกองค์ประกอบ SVG หลักของคุณจากนั้นวาดองค์ประกอบลงไป เหมาะที่สุดสำหรับนักพัฒนาที่กำลังมองหาวิธีแก้ปัญหาอย่างรวดเร็วสำหรับการสร้างภาพเคลื่อนไหว SVG เป็นตัวเลือกที่ดีอย่างยิ่งหากภาพเคลื่อนไหวของคุณเรียบง่ายและคุณไม่มีความรู้เกี่ยวกับเอ็นจินอนิเมชั่นมากนัก แม้ว่ามันจะค่อนข้างเชย แต่ก็ไม่ควรมองข้ามอย่างแน่นอนเนื่องจากอาจเป็นวิธีที่ง่ายที่สุดในการทำงานกับ SVG ของคุณ
Snap.svg สดชื่นในความเรียบง่าย ขอบเขตของงานในการเลือกและทำงานกับ SVG และไม่พยายามที่จะเป็นมากกว่านั้น สามารถใช้ Snap ร่วมกับไลบรารีกราฟิกอื่น ๆ ได้ที่นี่สำหรับการวาดและแสดงผลเป็น SVG นอกจากนี้ยังเป็นการดีหากคุณมี SVG อยู่แล้วและต้องการวิธีง่ายๆในการทำงานกับไฟล์เหล่านี้
บทความนี้ตีพิมพ์ครั้งแรกในนิตยสาร net
