AnimeJs v4 रिलीज़

 (animejs.com)
9 पॉइंट द्वारा GN⁺ 2025-04-04 | 2 टिप्पणियां | WhatsApp पर शेयर करें
  • Anime.js वेब पर किसी भी चीज़ को animate करने के लिए एक तेज़ और बहुउपयोगी JavaScript लाइब्रेरी है
  • V4 में पूरे ढांचे को फिर से लिखा गया है, जिससे performance में बड़ा सुधार हुआ है, और API को भी अधिक आधुनिक तरीके से पुनर्गठित किया गया है
  • खास तौर पर ES Module सपोर्ट, tree shaking optimization, और जटिल animation composition में सुधार के जरिए developer experience बेहतर हुआ है

Anime.js V4 के मुख्य बदलावों का सारांश

  • ES मॉड्यूलाइजेशन और API बदलाव

    • अब सभी फीचर ES modules के रूप में उपलब्ध हैं (anime() → animate())
    • यह tree shaking के लिए बेहतर है, इसलिए केवल ज़रूरी फीचर import करके इस्तेमाल किए जा सकते हैं
    • anime({ targets }) → animate(targets, params) के रूप में बदला गया है

  • मुख्य API बदलाव

    • easeInOutQuad → 'inOutQuad' (prefix हटाया गया)
    • callback function नाम बदले गए हैं:
      • begin() → onBegin()
      • update() → onUpdate()
      • complete() → onComplete()
      • change() → onRender()
      • loop से जुड़े callback अब onLoop() एक ही नाम में एकीकृत कर दिए गए हैं
    • .finished → .then() के साथ Promise handling का तरीका बदला गया है
    • { value: 100 } → { to: 100 } के रूप में value expression बदला गया है
    • round: 100 → modifier: utils.round(2) के जरिए संख्यात्मक बदलाव अब अधिक लचीले तरीके से किए जा सकते हैं

  • animation configuration और composition में सुधार

    • default easing value अब outQuad है
    • एक ही target पर एक ही property की animation दोहराने पर डिफ़ॉल्ट रूप से पिछला tween cancel हो जाता है (composition: 'replace')
      • composition: 'none' → V3 वाला तरीका (nesting की अनुमति)
      • composition: 'add' → additive animation लागू की जा सकती है

  • playback method से जुड़े बदलाव

    • direction: 'reverse' या 'alternate' → reversed: true, alternate: true में अलग किया गया है, इसलिए अब इन्हें साथ में इस्तेमाल किया जा सकता है
    • loop: 1 → default loop अब 0 कर दिया गया है

  • Timeline सिस्टम में सुधार

    • anime.timeline() → createTimeline() में बदला गया है
    • child animations में loop, reversed का उपयोग किया जा सकता है
    • defaults property से child animations के लिए common options सेट किए जा सकते हैं
    • set(), label, stagger() जैसी अधिक लचीली timing control सुविधाएँ जोड़ी गई हैं
    • CSS transform properties अब child animations के बीच अधिक स्वाभाविक रूप से जुड़ती हैं

  • Stagger और SVG animation

    • anime.stagger() → stagger() को सीधे import करके इस्तेमाल करें
    • anime.path() → svg.createMotionPath() का उपयोग
    • strokeDashoffset, points जैसी SVG properties को भी svg.drawLine(), svg.morphTo() आदि से handle किया जाता है

  • utility functions का विभाजन

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

  • engine settings में बदलाव

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

  • performance और structure में सुधार

    • पूरे code refactoring से memory usage कम हुआ है और performance बेहतर हुई है
    • Tween सिस्टम को फिर से लिखने से duplicate animation के समय bugs कम हुए हैं
    • composition: 'add' के साथ additive animation सपोर्ट
    • CSS Transform compose करते समय स्वाभाविक continuity बेहतर हुई है

नए फीचर

  • CSS variable animation support: उदाहरण animate('#target', { '--radius': '20px' })
  • from animation support: { from: 50, to: 100 } फ़ॉर्म का उपयोग संभव
  • hex color में alpha support: उदाहरण #FF4433AA फ़ॉर्मेट सपोर्ट
  • createTimer फीचर जोड़ा गया:
    • setTimeout, setInterval का विकल्प
    • onLoop, onUpdate, onComplete आदि का उपयोग संभव
    • frameRate control के जरिए game loop जैसी स्थितियों में उपयोग संभव
  • variable frame rate support: animation, timeline और timer के लिए अलग-अलग सेटिंग संभव

Anime.js की विशेषताएँ

  • सहज API

    • यह उपयोग में आसान लेकिन शक्तिशाली animation API प्रदान करता है।
    • यह property-specific parameters और लचीले keyframe सिस्टम को सपोर्ट करता है।
    • यह built-in easing functions और बेहतर transform capabilities प्रदान करता है।

  • SVG toolset

    • built-in SVG utilities के जरिए shape morphing, motion path tracking, और line drawing आसानी से की जा सकती है।
    • इसमें shape morphing, line drawing, और motion path फीचर शामिल हैं।

  • scroll observer

    • यह Scroll Observer API प्रदान करता है, जिससे scroll के अनुसार animation को sync और trigger किया जा सकता है।
    • यह कई sync modes और advanced thresholds को सपोर्ट करता है।

  • advanced staggering

    • built-in Stagger utility function के जरिए कुछ ही सेकंड में शानदार effects बनाए जा सकते हैं।
    • इसमें time staggering, value staggering, और timeline position staggering शामिल हैं।

  • spring और drag फीचर

    • Draggable API के जरिए HTML elements को drag, snap, flick, और throw किया जा सकता है।
    • यह कई settings, व्यापक callbacks, और उपयोगी methods प्रदान करता है।

  • Timeline API

    • शक्तिशाली Timeline API के जरिए animation sequence को व्यवस्थित किया जा सकता है और callbacks को sync किया जा सकता है।
    • यह animation synchronization, advanced time positions, और playback settings को सपोर्ट करता है।

  • responsive animation

    • Scope API का उपयोग करके media query पर आसानी से प्रतिक्रिया देने वाली animations बनाई जा सकती हैं।
    • इसमें media queries, custom root elements, और scope methods शामिल हैं।

संबंधित पढ़ाई

2 टिप्पणियां

 
kaydash 2025-04-06

वाह, कमाल है
 
GN⁺ 2025-04-04
Hacker News की राय
  • उस landing page को scroll करते समय यह उम्मीद से कहीं ज़्यादा smooth और तेज़ लगा
  • यह इतनी अच्छी तरह बनाया गया था कि यक़ीन करना मुश्किल था कि यह सच में मौजूद है। ऐसा लगा जैसे 2000 के शुरुआती दौर के इंटरनेट की creativity आज के polished design standards से मिल गई हो
  • वह homepage mobile browser में बेहद smooth चलने वाले सबसे complex और multi-layered interactive animations में से एक था। FPS ऐसा लग रहा था जैसे किसी powerful PC पर Doom 2016 चल रहा हो
  • यह पहली बार था जब मुझे scroll hijacking बुरी नहीं लगी। सच में बहुत smooth था
  • मुझे main site शानदार लगी थी, लेकिन documentation देखने के बाद मैं सच में प्रभावित हो गया। बढ़िया काम। WAAPI आज़माने के लिए बहुत उत्साहित हूँ
  • मुझे यह page पसंद है, लेकिन Firefox(136.0.3) में ublock origin enabled होने पर https://animejs.com/documentation/scope/ पर जाने से tab तुरंत crash हो जाता है। बहुत प्रभावशाली intro animation scroll करने के ठीक बाद यह एक दिलचस्प अनुभव था
  • मुझे यह अच्छा लगा कि browser के scroll indicator को पकड़कर drag किया जा सकता है और animation smoothly update होता रहता है (safari mobile)
  • हो सकता है मेरा CPU बहुत पुराना हो या मैं कोई non-traditional browser (Microsoft Edge) इस्तेमाल कर रहा हूँ, लेकिन website बहुत slow है (प्रति सेकंड 1 बार से भी कम update), और tab तुरंत CPU का 80% इस्तेमाल करने लगता है, साथ ही fan ज़ोर से चलने लगता है। मैं 8th-gen Intel i7 इस्तेमाल कर रहा हूँ
  • मेरे non-traditional Android browser में यह सच में बहुत अच्छा काम करता है। library के बारे में मैं अच्छी राय दे सकता हूँ
  • landing page शानदार था
    • बस एक ही समस्या थी: responsive layout example देखते समय browser window का size बदलने पर scroll वापस सबसे ऊपर reset हो जाता है