เปิดตัว AnimeJs v4

• Anime.js เป็นไลบรารี JavaScript ที่รวดเร็วและยืดหยุ่นสำหรับทำให้ทุกอย่างบนเว็บเคลื่อนไหวได้
• V4 ได้เขียนโครงสร้างทั้งหมดขึ้นมาใหม่ ทำให้ประสิทธิภาพดีขึ้นอย่างมาก และปรับ API ให้ทันสมัยยิ่งขึ้น
• โดยเฉพาะการรองรับ ES Module, การปรับให้เหมาะกับ tree shaking และการปรับปรุงการผสานแอนิเมชันที่ซับซ้อน ซึ่งช่วยยกระดับประสบการณ์ของนักพัฒนา

สรุปการเปลี่ยนแปลงสำคัญใน Anime.js V4

• การเปลี่ยนเป็น ES Module และการเปลี่ยนแปลง API

  • ฟังก์ชันทั้งหมดถูกให้ใช้งานในรูปแบบ ES Module แล้ว (anime() → animate())
  • เหมาะกับการทำ tree shaking มากขึ้น จึงสามารถนำเข้าเฉพาะฟังก์ชันที่ต้องใช้ได้
  • รูปแบบเปลี่ยนจาก anime({ targets }) → animate(targets, params)

• การเปลี่ยนแปลง API หลัก

  • easeInOutQuad → 'inOutQuad' (ตัดคำนำหน้าออก)
  • เปลี่ยนชื่อฟังก์ชัน callback:
    • begin() → onBegin()
    • update() → onUpdate()
    • complete() → onComplete()
    • change() → onRender()
    • callback ที่เกี่ยวกับลูปถูกรวมเป็น onLoop() ตัวเดียว
  • เปลี่ยนรูปแบบการจัดการ Promise จาก .finished → .then()
  • เปลี่ยนรูปแบบการกำหนดค่าจาก { value: 100 } → { to: 100 }
  • เปลี่ยนจาก round: 100 → modifier: utils.round(2) เพื่อให้ปรับค่าตัวเลขได้ยืดหยุ่นขึ้น

• ปรับปรุงการประกอบและการผสานแอนิเมชัน

  • ค่า easing เริ่มต้นเปลี่ยนเป็น outQuad
  • เมื่อมีแอนิเมชันของ property เดียวกันบน target เดียวกันซ้ำกัน จะยกเลิก tween ก่อนหน้าโดยอัตโนมัติเป็นค่าเริ่มต้น (composition: 'replace')
    • composition: 'none' → แบบเดียวกับ V3 (อนุญาตให้ซ้อนกันได้)
    • composition: 'add' → ใช้แอนิเมชันแบบ additive ได้

• การเปลี่ยนแปลงเกี่ยวกับรูปแบบการเล่น

  • direction: 'reverse' หรือ 'alternate' → แยกเป็น reversed: true, alternate: true ทำให้ใช้พร้อมกันได้
  • loop: 1 → ค่าเริ่มต้นของลูปเปลี่ยนเป็น 0

• ปรับปรุงระบบ Timeline

  • anime.timeline() → createTimeline()
  • ใช้ loop, reversed ในแอนิเมชันลูกได้
  • ตั้งค่าตัวเลือกที่ใช้ร่วมกันของลูกได้ผ่าน property defaults
  • เพิ่มความสามารถควบคุมจังหวะเวลาได้ยืดหยุ่นขึ้น เช่น set(), label, stagger()
  • property ของ CSS transform เชื่อมต่อกันอย่างเป็นธรรมชาติมากขึ้นระหว่างแอนิเมชันลูก

• Stagger และแอนิเมชัน SVG

  • anime.stagger() → เรียกใช้ stagger() โดยตรง
  • anime.path() → ใช้ svg.createMotionPath()
  • property SVG อย่าง strokeDashoffset, points ก็จัดการได้ผ่าน svg.drawLine(), svg.morphTo() เป็นต้น

• แยกฟังก์ชัน utility ออกมา

  • anime.get() → utils.get()
  • anime.set() → utils.set()
  • anime.remove() → utils.remove()
  • anime.round() → utils.round()

• การเปลี่ยนแปลงการตั้งค่า engine

  • anime.suspendWhenDocumentHidden = false → engine.pauseWhenHidden = false
  • anime.speed = 0.5 → engine.playbackRate = 0.5

• การปรับปรุงด้านประสิทธิภาพและโครงสร้าง

  • รีแฟกเตอร์โค้ดทั้งหมดเพื่อลดการใช้หน่วยความจำและเพิ่มประสิทธิภาพ
  • เขียนระบบ Tween ใหม่เพื่อลดบั๊กเมื่อมีแอนิเมชันซ้ำซ้อน
  • รองรับแอนิเมชันแบบ additive ด้วย composition: 'add'
  • ปรับปรุงความต่อเนื่องตามธรรมชาติในการประกอบ CSS Transform

ฟีเจอร์ใหม่

• รองรับแอนิเมชัน CSS Variables: ตัวอย่าง animate('#target', { '--radius': '20px' })
• รองรับแอนิเมชัน from: ใช้รูปแบบ { from: 50, to: 100 } ได้
• รองรับ alpha ในสี hex: เช่น รองรับรูปแบบ #FF4433AA
• เพิ่มความสามารถ createTimer:
  • ใช้แทน setTimeout, setInterval
  • ใช้ onLoop, onUpdate, onComplete เป็นต้นได้
  • ปรับ frameRate เพื่อใช้กับ game loop และงานลักษณะเดียวกันได้
• รองรับอัตราเฟรมแบบแปรผัน: ตั้งค่าแยกได้ในแต่ละแอนิเมชัน, timeline และ timer

จุดเด่นของ Anime.js

• API ที่เข้าใจง่าย

  • มี API สำหรับแอนิเมชันที่ใช้งานง่ายแต่ทรงพลัง
  • รองรับพารามิเตอร์แยกตาม property และระบบ keyframe ที่ยืดหยุ่น
  • มีฟังก์ชัน easing ในตัวและความสามารถด้าน transform ที่ดีขึ้น

• ชุดเครื่องมือ SVG

  • มี utility สำหรับ SVG ในตัว ช่วยให้ทำ morphing ของรูปร่าง, ติดตาม motion path และวาดเส้นได้ง่าย
  • ครอบคลุมความสามารถอย่าง shape morphing, line drawing และ motion path

• Scroll Observer

  • มี Scroll Observer API สำหรับซิงก์และทริกเกอร์แอนิเมชันตามการเลื่อน
  • รองรับโหมดการซิงก์หลากหลายและ threshold ขั้นสูง

• Stagger ขั้นสูง

  • สร้างเอฟเฟกต์ที่โดดเด่นได้อย่างรวดเร็วด้วยฟังก์ชัน utility สำหรับ Stagger ที่มีมาในตัว
  • ครอบคลุมทั้ง time staggering, value staggering และ timeline position staggering

• ความสามารถด้านสปริงและการลาก

  • ผ่าน Draggable API สามารถลาก, snap, flick และโยนองค์ประกอบ HTML ได้
  • มีตัวเลือกการตั้งค่าหลากหลาย callback ที่ครอบคลุม และเมธอดที่มีประโยชน์

• Timeline API

  • ใช้ Timeline API ที่ทรงพลังเพื่อจัดลำดับแอนิเมชันและซิงก์ callback ได้
  • รองรับการซิงก์แอนิเมชัน, ตำแหน่งเวลาแบบขั้นสูง และการตั้งค่าการเล่น

• แอนิเมชันแบบ responsive

  • ใช้ Scope API เพื่อสร้างแอนิเมชันที่ตอบสนองต่อ media query ได้อย่างง่ายดาย
  • ครอบคลุม media query, root element แบบกำหนดเอง และเมธอดของ scope

[kaydash]

ว้าว สุดยอดมาก

[GN⁺]

ความคิดเห็นจาก Hacker News

• ตอนเลื่อนดูหน้าแลนดิ้งเพจนั้น ให้ความรู้สึกลื่นไหลและรวดเร็วกว่าที่คาดไว้มาก
• ทำออกมาได้ดีจนแทบไม่น่าเชื่อว่าสิ่งนี้มีอยู่จริง ให้ความรู้สึกเหมือนความสร้างสรรค์ของอินเทอร์เน็ตยุคต้นทศวรรษ 2000 มาพบกับมาตรฐานงานออกแบบอันเนี้ยบของปัจจุบัน
• โฮมเพจนั้นเป็นหนึ่งในแอนิเมชันอินเทอร์แอ็กทีฟที่ซับซ้อนและมีหลายเลเยอร์มากที่สุดที่เคยเห็น แต่กลับทำงานได้ลื่นมากบนเบราว์เซอร์มือถือ FPS ให้ความรู้สึกเหมือน Doom 2016 ที่รันบนพีซีแรง ๆ
• นี่เป็นครั้งแรกที่ไม่รู้สึกเกลียด scroll hijacking แถมมันลื่นมากจริง ๆ
• ตอนแรกก็คิดว่าเว็บหลักน่าทึ่งแล้ว แต่พอเห็นเอกสารแล้วก็ยิ่งทึ่งมาก ทำได้ดีมาก ตื่นเต้นมากที่จะได้ลอง WAAPI
• ชอบหน้านี้นะ แต่ถ้าเปิด ublock origin ไว้ใน Firefox (136.0.3) แล้วเข้าไปที่ <a href="https:&#x2F;&#x2F;animejs.com&#x2F;documentation&#x2F;scope&#x2F;" rel="nofollow">https://animejs.com/documentation/scope/</a>; แท็บจะล่มทันที เป็นประสบการณ์ที่แปลกดีหลังจากเพิ่งเลื่อนผ่านอินโทรแอนิเมชันที่น่าประทับใจมาก
• ชอบที่สามารถจับแถบเลื่อนของเบราว์เซอร์แล้วลากได้ และแอนิเมชันก็อัปเดตอย่างลื่นไหล (safari mobile)
• อาจเป็นเพราะ CPU ของผมเก่าเกินไป หรือผมใช้เบราว์เซอร์นอกกระแส (Microsoft Edge) แต่เว็บไซต์นี้ <i>ช้ามาก</i> (อัปเดตน้อยกว่าหนึ่งครั้งต่อวินาที) และแท็บก็เริ่มกิน CPU 80% ทันทีพร้อมกับพัดลมที่หมุนเสียงดังมาก ผมใช้ Intel i7 เจเนอเรชัน 8
• มันทำงานได้ดีมากบนเบราว์เซอร์ Android นอกกระแสที่ผมใช้ ขอชมตัวไลบรารีนี้เลย
• หน้าแลนดิ้งเพจน่าทึ่งมาก
  • ปัญหาเดียวคือเวลาเช็กตัวอย่าง responsive layout แล้วปรับขนาดหน้าต่างเบราว์เซอร์ ตำแหน่งการเลื่อนจะถูกรีเซ็ตกลับไปด้านบนสุด