Anime.js - ไลบรารีภาพเคลื่อนไหว JavaScript ที่มีน้ำหนักเบา

ภาพเคลื่อนไหวบนเว็บ ได้มาไกล นักพัฒนาสามารถสร้างภาพเคลื่อนไหวใด ๆ โดยใช้คอมโบของ CSS / SVG / JS แต่มี ห้องสมุดฟรีหลายสิบแห่ง เพื่อประหยัดเวลาในกระบวนการ.

หนึ่งในรายการโปรดของฉันคือ Anime.js, โอเพนซอร์สที่สมบูรณ์ฟรี ไลบรารีภาพเคลื่อนไหว JavaScript.

ห้องสมุดนี้สามารถ ทำมันทั้งหมด. มัน สร้างขึ้นบน JavaScript แต่มันก็ยัง อาศัยภาพเคลื่อนไหว CSS เป็นอย่างมาก. คุณสามารถกำหนดเป้าหมายองค์ประกอบของแต่ละหน้า ผ่าน DOM หรือคุณสามารถกำหนดเป้าหมายได้ SVG ที่กำหนดเอง.

เอกสารทั้งหมดคือ โฮสต์ด้วยตนเองใน GitHub, ดังนั้นคุณอาจต้องเลื่อนเพื่อค้นหาสิ่งที่คุณต้องการ แต่คุณสมบัติภาพเคลื่อนไหวแต่ละอัน มาพร้อมกับพารามิเตอร์บางอย่าง เช่นความล่าช้าระยะเวลาและการทำให้สบาย.

หมายเหตุไลบรารีนี้ ไม่มา ด้วยรูปแบบภาพเคลื่อนไหวเริ่มต้นมากมาย Anime.js คือ สร้างขึ้นสำหรับนักพัฒนา ผู้ที่ต้องการปรับแต่งภาพเคลื่อนไหวของพวกเขา โดยไม่ต้องเขียนโค้ด verbose.

สำหรับ ตัวอย่างสด, ตรวจสอบปากกา Codepen ด้านล่าง รหัสคือ เรียบง่ายเหลือเกิน แต่คุณจะได้ภาพเคลื่อนไหวที่น่าเชื่อถือด้วย สควอชและยืด บวก ความคาดหมาย, ทั้งพื้นฐานของการเคลื่อนไหว.

คำเตือนที่เป็นธรรม: ห้องสมุด Anime.js คือ หนาแน่น. การสร้างอนิเมชั่นที่กำหนดเองนั้นไม่ใช่เรื่องยาก แต่คุณต้องการ เข้าใจพื้นฐานบางอย่าง เช่นการทำให้สบายและไวยากรณ์ JavaScript ทั่วไปสำหรับการเรียกกลับและตัวเลือก.

แต่ ข้อมูลทั้งหมดที่คุณต้องการ อยู่บน หน้า repo, รวมไปถึง ตัวอย่างโค้ดจำนวนมาก และ ตารางเอกสารรายละเอียด. และคุณสามารถเรียกดูรายงานบั๊กที่เปิดอยู่หรือตรวจสอบการสนับสนุนเบราว์เซอร์ที่มีอยู่ในปัจจุบัน เบราว์เซอร์หลักและ IE 10 ทั้งหมด+.

นี่เป็นหนึ่งในห้องสมุดแอนิเมชันที่ดีที่สุดสำหรับนักพัฒนาเว็บและมันควรจะเป็นทางออกสำหรับคุณ ภาพเคลื่อนไหวบนเว็บใด ๆ ที่ซับซ้อน.

เพื่อดูพวงของ ตัวอย่างสด, ลองชมตัวอย่างของ Anime.js ที่โฮสต์ใน CodePen ด้านล่างฉันฝังสิ่งที่ฉันชอบ ทำให้โลโก้ทั้งหมดเคลื่อนไหวตั้งแต่เริ่มต้น, ด้วยความร่าเริงที่แท้จริง.