JavaScript Animation Libraries: 10 ตัวเลือกยอดนิยม

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

ข้อได้เปรียบหลักของการใช้ JavaScript สำหรับเอฟเฟกต์แอนิเมชั่นคือคุณสามารถควบคุมลอจิกแอนิเมชั่นได้มากขึ้น ซึ่งรวมถึงความลื่นไหลของการเปลี่ยนภาพ การควบคุมสถานะ DOM และการตอบสนอง แต่ยังรวมถึงการใช้กราฟิก 2D และ 3D ด้วย WebGL

ประเภทของไลบรารีแอนิเมชั่น JavaScript

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

สำหรับบทสรุปเฉพาะนี้ จุดเน้นของฉันอยู่ที่ไลบรารีที่ใช้บ่อยที่สุดในการพัฒนาส่วนหน้า ไม่ว่าจะด้วยตัวเองหรือร่วมกับเฟรมเวิร์กใดๆ ในปัจจุบัน

ในเวลาที่กำหนด ฉันจะพิจารณาเพิ่มไลบรารีเพิ่มเติมในรายการที่มีขนาดเล็กลง แต่ยังให้วิธีที่มีความหมายในการเพิ่มแอนิเมชั่นเชิงโต้ตอบให้กับโครงการของคุณ

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

#1 – Three.js

Three.js เป็นไลบรารี่สำหรับสร้างเอฟเฟกต์ภาพเคลื่อนไหว 3 มิติที่คุณใช้ในการพัฒนาเว็บไซต์ที่สร้างสรรค์ Three.js ทำให้นักพัฒนาไม่ต้องเรียนรู้เกี่ยวกับ WebGL และสามารถมุ่งเน้นไปที่การสร้างเอฟเฟกต์ 3D แบบโต้ตอบได้โดยไม่ซับซ้อน

ในระดับไฮเอนด์ Three.js ถูกใช้เพื่อสร้างประสบการณ์เสมือนจริงแบบโต้ตอบ เช่น Mozilla Hubs นอกจากนี้ ไลบรารียังมักใช้ในการสร้างประสบการณ์หน้า Landing Page ที่สมจริง ผู้เผยแพร่และบทบรรณาธิการระดับโลกใช้ Three.js มานานหลายปีเพื่อสร้างหน้าเว็บตามข้อมูลพร้อมการอัปเดตแบบไดนามิก

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

แอนิเมชั่นตัวอย่าง Three.js

ดูพื้นหลัง Pen Mesh Line Waves – THREE.js โดย CP Designer (@cpandya) บน CodePen

Three.js ทรัพยากรเพิ่มเติม

• เราสร้างโลก GitHub อย่างไร
• เอฟเฟกต์การบิดเบือนพิกเซลด้วย Three.js

#2 – Anime.js

Anime.js จาก Julian Garnier น่าจะเป็นห้องสมุดที่มีชื่อเสียงอันดับ 2 สำหรับการรวมแอนิเมชั่นเข้ากับโปรเจ็กต์บนเว็บ ความนิยมเกิดจากการมีเครื่องมือในตัวเพื่อช่วยเร่งกระบวนการสร้างองค์ประกอบ CSS, SVG และ DOM

ตัวอย่างเช่น คุณสามารถกำหนดเป้าหมายตัวเลือก CSS ที่เฉพาะเจาะจง แล้วใช้ตรรกะของแอนิเมชั่นที่ปรับปรุงแล้วผ่าน JavaScript แทนที่จะเขียน @keyframes ด้วยตัวคุณเอง

 anime({ targets: '.staggering-axis-grid-demo .el', translateX: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'x'}), translateY: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'y'}), rotateZ: anime.stagger([0, 90], {grid: [14, 5], from: 'center', axis: 'x'}), delay: anime.stagger(200, {grid: [14, 5], from: 'center'}), easing: 'easeInOutQuad' });

เพียงแค่ใช้ตัวอย่างด้านบนเพียงอย่างเดียว คุณสามารถสร้างเอฟเฟกต์ที่มีลักษณะดังนี้:

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

Anime.js ตัวอย่างแอนิเมชั่น

ดูอนิเมชั่นโลโก้ Pen anime.js โดย Julian Garnier (@juliangarnier) บน CodePen

Anime.js แหล่งข้อมูลเพิ่มเติม

• Anime.js Tutorial – JavaScript Animation Engine ใน 10 นาที
• แอนิเมชั่นส่วนต่อประสานผู้ใช้กับ Anime.js

#3 – Popmotion

Popmotion เป็นไลบรารีแอนิเมชั่นระดับต่ำที่เขียนด้วย TypeScript นอกจากนี้ยังเป็นไลบรารีที่ขับเคลื่อนไลบรารี Framer Motion ยอดนิยม (เรามีอยู่ในบทความนี้) ที่ใช้ในโครงการ React หากไม่มีความคิดเห็น คุณสามารถใช้ Popmotion เพื่อรวมเอฟเฟกต์แบบกำหนดเองโดยการเขียนฟังก์ชันเพิ่มเติมที่คุณต้องการใช้

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

แอนิเมชั่นตัวอย่าง Popmotion

ดูการสาธิต Pen Popmotion โดย Arden (@aderaaij) บน CodePen

Popmotion แหล่งข้อมูลเพิ่มเติม

• เห็นภาพอัลกอริทึมของแพนเค้กด้วย React และ Popmotion.io
• เพิ่มแอนิเมชั่นสปริงให้กับแอพเชิงมุมของคุณด้วย popmotion

#4 – mo.js

Mo.js มุ่งเน้นไปที่กราฟิกเคลื่อนไหวและมีความเป็นเลิศในการจัดหาโครงสร้างโค้ดอย่างง่ายที่คุณสามารถนำไปใช้ในโปรเจ็กต์ที่มีในตัวเองได้ แต่ยังรวมถึงเฟรมเวิร์กต่างๆ เช่น React

และเนื่องจาก Mo.js มาพร้อมกับ API การประกาศของตัวเอง คุณจึงสามารถควบคุมแต่ละขั้นตอนของแอนิเมชั่นได้ ซึ่งรวมถึงการกำหนดไม่เพียงแต่ตรรกะสำหรับสิ่งที่คุณต้องการบรรลุ แต่ยังรวมถึงวิธีที่คุณจะไปถึงที่นั่นด้วย ไลบรารีนี้ประกอบด้วยส่วนประกอบและตัวอย่างที่สร้างไว้ล่วงหน้าซึ่งได้รับการปรับแต่งเพื่อประสบการณ์การใช้งานที่สมบูรณ์ของผู้ใช้งาน

นี่คือตัวอย่างข้อมูลโค้ด:

 const travelCircleExpand = new mojs.Shape({ fill: COLORS.BLACK, radius: 126, scale: { .1: 1 }, opacity: { 0 : 1 }, easing: 'cubic.out', duration: 400, isForce3d: true, isTimelineLess: true, });

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

mo.js ตัวอย่างแอนิเมชั่น

ดู Pen Link Hover Effects w/ mo.js โดย Mike Quinn (@mprquinn) บน CodePen

mo.js แหล่งข้อมูลเพิ่มเติม

• วิธีใช้ MoJS กับ React
• ทำความรู้จักกับ MoJS

#5 – p5.js

p5.js คือการนำ JavaScript ไปใช้ในการประมวลผล ซึ่งเป็น "ภาษา" ที่แยกต่างหากซึ่งมีไว้สำหรับใช้งานโดยศิลปินทัศนศิลป์ ไม่เหมือนกับตัวอย่างบางส่วนที่เราเคยเห็นมา p5.js เป็นไลบรารีแอนิเมชั่นสากล ซึ่งไม่เพียงแต่มอบโซลูชันสำหรับแอปพลิเคชันที่ใช้งานได้จริงเท่านั้น แต่ยังสำหรับโปรเจ็กต์ที่แข็งแกร่งและซับซ้อนกว่าด้วย ซึ่งรวมถึงการสนับสนุนเต็มรูปแบบสำหรับเอฟเฟกต์ 2D และ 2D

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

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

p5.js ตัวอย่างแอนิเมชั่น

ดู Pen P5.JS Twist and Turn โดย Sdsmnc (@supastrocat) บน CodePen

p5.js แหล่งข้อมูลเพิ่มเติม

• กำลังประมวลผลและ p5.js
• พระอาทิตย์ตกและดาวตกใน p5.js

#6 – การเคลื่อนไหว

React เป็นที่นิยมมากจนสมเหตุสมผลที่จะมีไลบรารีแอนิเมชั่นของตัวเอง Framer Motion มาพร้อมกับ API ที่สร้างไว้ล่วงหน้าที่ช่วยให้นักพัฒนา React ลดความซับซ้อนของกระบวนการสร้างส่วนประกอบแอนิเมชั่น แต่ยังช่วยลดอุปสรรคบางประการของความต้องการในการเรียนรู้ CSS และคุณสมบัติแอนิเมชั่นอิสระ และใช้งานได้ง่ายมาก

ตัวอย่างข้อมูลโค้ด:

 import { motion } from "framer-motion" export const MyComponent = () => ( <motion.div animate={{ rotate: 360 }} transition={{ duration: 2 }} /> )

แอนิเมชั่นใน Framer ถูกกำหนดโดยคุณสมบัติ motion และการ animate วิธีนี้ช่วยให้คุณเลือกส่วนประกอบทั้งหมดและองค์ประกอบภายใน จากนั้นคุณสามารถเพิ่มตรรกะของแอนิเมชั่นที่กำหนดเองได้ บทความ ยอดเยี่ยม จาก Nefe Emadamerho-Atori ในส่วนแหล่งข้อมูลเป็นจุดเริ่มต้นที่ดีในการดูว่า Framer Motion ทำงานอย่างไร

ภาพเคลื่อนไหวตัวอย่างแอนิเมชั่น

ดูปุ่ม Pen Laser Sight โดย codebro (@codebro) บน CodePen

แหล่งข้อมูลเพิ่มเติมเกี่ยวกับการเคลื่อนไหว

• ขอแนะนำ Framer Motion
• ภาพเคลื่อนไหวที่ตอบสนองด้วย Framer Motion

#7 – GSAP

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

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

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

ส่วน Showcase มีตัวอย่างโครงการหลายร้อยโครงการที่นักพัฒนาได้ดำเนินการ ลองดูทั้งสองแรงบันดาลใจ แต่เพื่อดูว่าห้องสมุดนี้ทำอะไรได้บ้าง

แอนิเมชั่นตัวอย่าง GSAP

ดู Pen Hulu Originals Intro โดย Hyperplexed (@Hyperplexed) บน CodePen

GSAP แหล่งข้อมูลเพิ่มเติม

• เทคนิคการทำแอนิเมชั่นที่น่าทึ่งด้วย GSAP
• การสร้างลำดับแอนิเมชั่นเว็บไซต์อย่างละเอียด – GSAP 3 Tutorial

#8 – Paper.js

Paper.js เป็นไลบรารีแอนิเมชั่นที่เน้นการสร้างกราฟิกแบบเวกเตอร์แอนิเมชั่นอย่างเคร่งครัด วิธีนี้ช่วยให้คุณไม่เพียงแค่เอฟเฟกต์แบบคงที่ แต่ยังรวมถึงประสบการณ์ไดนามิกเชิงโต้ตอบด้วย โดยเฉพาะอย่างยิ่ง Paper.js เป็นที่นิยมในหมู่โปรเจ็กต์แอนิเมชั่นที่ผู้ใช้สามารถลากวัตถุ จัดเรียงใหม่ และป้อนข้อมูลที่กำหนดเองได้

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

Paper.js ตัวอย่างแอนิเมชั่น

ดูแว่นตาใส่ปากกา – Paper.js โดย Fiorald Ismaili (@Fiorald) บน CodePen

Paper.js ทรัพยากรเพิ่มเติม

• Paper.js Vector Erase
• คลื่นใน Paper.js

#9 – แอนิเมชั่นเว็บ

ไลบรารีนี้เป็นพอร์ต JavaScript โดยตรงของ Web Animation API ไลบรารีรวมเข้ากับข้อกำหนด Element.animate() โดยตรง ช่วยให้คุณใช้คุณลักษณะแอนิเมชั่นที่เขียนโดยใช้ตรรกะ CSS ได้ ผู้เขียนอธิบายโดยกล่าวว่า:

“การใช้งาน JavaScript ของ Web Animations API ที่มีฟีเจอร์ Web Animation ในเบราว์เซอร์ที่ไม่รองรับโดยกำเนิด polyfill กลับไปสู่การใช้งานแบบเนทีฟเมื่อมีให้ใช้งาน”

แอนิเมชั่นเว็บ แอนิเมชั่นตัวอย่าง

ดูแอนิเมชั่น Pen Imperative โดย Sam Thorogood (@samthor) บน CodePen

เว็บแอนิเมชั่นทรัพยากรเพิ่มเติม

• Web Animations API – Web APIs | MDN
• เว็บแอนิเมชั่นระดับ 2 | W3C

#10 – โปรตอน

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

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

แอนิเมชั่นตัวอย่างของโปรตอน

ดู Pen my-emitter โดย matsu7089 (@matsu7089) บน CodePen

โปรตอน แหล่งข้อมูลเพิ่มเติม

• ตัวอย่างเครื่องยนต์โปรตอน
• องค์ประกอบปฏิกิริยาสำหรับพื้นหลังอนุภาค

สรุป

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

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

กล่าวอีกนัยหนึ่งไม่มีสิ่งที่ ดีที่สุด ห้องสมุดแต่ละแห่งมีจุดแข็งและจุดอ่อนของตัวเอง สำหรับฉัน ฉันน่าจะใช้ GSAP เพราะมันได้รับการปรับให้เหมาะสมอย่างดีสำหรับการใช้งานในโปรเจ็กต์ส่วนหน้าแทบทุกแบบเท่าที่จะจินตนาการได้

แต่ถ้าฉันทำโครงการที่ไม่ทะเยอทะยานน้อยกว่า ห้องสมุดอย่าง Popmotion ก็เพียงพอแล้ว