👩🏽‍🚒 🤦🏽 👉🏾 Vue में स्प्रिंग एनिमेशन 🤽🏿 🐘 🚧

हेलो, हेब्र!

मैं लंबे समय से किसी भी प्रोजेक्ट में स्प्रिंग एनिमेशन जोड़ना चाहता हूं। लेकिन मैंने केवल रिएक्ट-स्प्रिंग का उपयोग करके रिएक्ट परियोजनाओं के लिए ऐसा किया, क्योंकि मुझे कुछ और नहीं पता था।

लेकिन आखिरकार, मैंने यह पता लगाने का फैसला किया कि यह सब कैसे काम करता है और मेरे कार्यान्वयन को लिखता है!

यदि आप भी हर जगह स्प्रिंग-एनिमेशन का उपयोग करना चाहते हैं, तो बिल्ली के नीचे जाएं। वहां आपको कुछ सिद्धांत मिलेंगे, स्प्रिंग को शुद्ध जेएस में लागू करना, और घटकों और रचना-एपीआई का उपयोग करके वीयू में स्प्रिंग एनीमेशन को लागू करना।

टीएल, डॉ

जेएस में स्प्रिंग एनीमेशन लागू करना: https://playcode.io/590645/ ।

आपको अपनी परियोजना में स्प्रिंग एनिमेशन जोड़ने की आवश्यकता है - पॉपमोशन लाइब्रेरी से स्प्रिंग लें ।

आपको अपने Vue प्रोजेक्ट में स्प्रिंग एनिमेशन जोड़ने की ज़रूरत है - स्प्रिंग को पॉपमोशन लाइब्रेरी से लें और उस पर एक आवरण लिखें।

स्प्रिंग एनिमेशन किसके लिए हैं?

वेब पर पारंपरिक सीएसएस एनिमेशन समय-समय पर स्थिति की गणना के लिए एक अवधि और एक फ़ंक्शन का उपयोग करते हैं।

स्प्रिंग एनिमेशन एक अलग दृष्टिकोण का उपयोग करते हैं - स्प्रिंग भौतिकी।

एनीमेशन के लिए, हम सिस्टम के भौतिक गुणों को निर्धारित करते हैं: वसंत का द्रव्यमान, वसंत की लोच का गुणांक, मध्यम के घर्षण का गुणांक। तब हम वसंत को उस दूरी तक खींचते हैं, जिसे हमें चेतन करने की आवश्यकता होती है, और उसे छोड़ देते हैं।

फ्रंट-एंड प्रोजेक्ट्स में, मुझे स्प्रिंग एनिमेशन में इस तरह के फायदे दिखाई देते हैं:

1. आप प्रारंभिक एनीमेशन गति सेट कर सकते हैं।

यदि साइट प्रक्रियाएं आपकी उंगलियों से स्वाइप करती हैं या माउस के साथ घसीटती हैं, तो ऑब्जेक्ट एनिमेशन अधिक स्वाभाविक दिखेंगे यदि आप उन्हें स्वाइप स्पीड या माउस स्पीड के साथ प्रारंभिक गति के साथ सेट करते हैं।

सीएसएस एनीमेशन जो माउस की गति को बनाए नहीं रखता है

स्प्रिंग-एनीमेशन, जिसमें माउस की गति को स्प्रिंग

2 में प्रेषित किया जाता है । आप एनीमेशन के समापन बिंदु को बदल सकते हैं।

उदाहरण के लिए, यदि आप माउस कर्सर के लिए एक ऑब्जेक्ट को एनिमेट करना चाहते हैं, तो आप CSS की मदद नहीं कर सकते - जब आप कर्सर की स्थिति को अपडेट करते हैं, तो एनीमेशन को फिर से शुरू किया जाता है, जो कारण होगा झटके लग रहे हैं।

स्प्रिंग-एनिमेशन के साथ ऐसी कोई समस्या नहीं है - यदि आपको एनीमेशन के समापन बिंदु को बदलने की आवश्यकता है, तो हम वसंत को वांछित इंडेंट में खिंचाव या संपीड़ित करते हैं।

एक तत्व को माउस कर्सर को एनिमेट करने का एक उदाहरण; शीर्ष - सीएसएस एनीमेशन, नीचे - स्प्रिंग एनीमेशन

वसंत भौतिकी

एक लोड के साथ एक साधारण वसंत लें। वह अब भी आराम कर रही है।

उसे थोड़ा नीचे खींचो। एक लोचदार बल (

\vec{F_{у п}} = - k Δ \vec{X}

$\vec{F_{}} = -k\Delta \vec{X}$ ), जो वसंत को उसकी मूल स्थिति में लौटाना चाहता है। जब हम वसंत जारी करते हैं, तो यह साइनसॉइड के साथ स्विंग करना शुरू कर देगा:

घर्षण बल जोड़ें। इसे सीधे वसंत की गति के लिए आनुपातिक होने दें (

\vec{F_{т р}} = - α \vec{V}

$\vec{F_{}} = -\alpha\vec{V}$ ) इस मामले में, समय के साथ दोलनों का क्षय होगा:

हम चाहते हैं कि हमारा स्प्रिंग-एनिमेशन उसी तरह एनिमेटेड हो, जिस तरह एक स्प्रिंग लोच और घर्षण के संपर्क में आता है।

हम एनीमेशन के लिए वसंत की स्थिति पर विचार करते हैं

एनिमेशन के संदर्भ में, एनीमेशन के प्रारंभिक और अंतिम मूल्य के बीच का अंतर वसंत का प्रारंभिक तनाव है

\vec{X_{0}}

$\vec{X_0}$ ।

एनीमेशन की शुरुआत से पहले, हमें दिया जाता है: वसंत द्रव्यमान

m

$m$ , लोच का वसंत गुणांक

k

$k$ , माध्यम का घर्षण गुणांक

α

$\alpha$ तनाव फूटता है

\vec{X_{0}}

$\vec{X_0}$ , शुरू करने की गति

\vec{V_{0}}

$\vec{V_0}$ ।

एनीमेशन स्थिति की गणना प्रति सेकंड कई बार दसियों बार की जाती है। एनीमेशन गणनाओं के बीच का समय अंतराल कहा जाता है

Δ t

$\Delta t$ ।

प्रत्येक नई गणना के दौरान, हमारे पास वसंत की गति है

\vec{V_{п р}}

$\vec{V_{}}$ और वसंत तनाव

\vec{X_{п р}}

$\vec{X_{}}$ अंतिम एनीमेशन अंतराल पर। एनीमेशन की पहली गणना के लिए

\vec{X_{п р}} = \vec{X_{0}}

$\vec{X_{}}=\vec{X_0}$ ,

\vec{V_{п р}} = \vec{V_{0}}

$\vec{V_{}}=\vec{V_0}$ ।

हम अंतराल के लिए एनीमेशन की स्थिति की गणना करना शुरू करते हैं!

न्यूटन के दूसरे नियम के अनुसार, सभी लागू बलों का योग इसके त्वरण द्वारा गुणा किए गए शरीर के द्रव्यमान के बराबर है:

\vec{F} = m \vec{a}

$\vec{F}=m\vec{a}$

दो बल एक वसंत पर कार्य करते हैं - लोचदार बल और घर्षण बल:

\vec{F_{у п}} + \vec{F_{т р}} = m \vec{a}

$\vec{F_{}} + \vec{F_{}}=m\vec{a}$

हम बलों को और विस्तार से लिखेंगे और त्वरण ज्ञात करेंगे:

- k \vec{X_{п р}} - α \vec{V_{п р}} = m \vec{a}

$-k\vec{X_{}} - \alpha\vec{V_{}}=m\vec{a}$

\vec{a} = \frac{- k \vec{X_{п р}} - α \vec{V_{п р}}}{m}

$\vec{a} = \dfrac{-k\vec{X_{}} - \alpha\vec{V_{}}}{m}$

उसके बाद हम एक नई गति पा सकते हैं। यह पिछले एनीमेशन अंतराल में गति के योग और समय अंतराल से गुणा के बराबर है:

\vec{V_{н в}} = \vec{V_{п р}} + \vec{a} * Δ t

$\vec{V_{}}=\vec{V_{}} + \vec{a}*\Delta t$

गति जानने के बाद, आप वसंत की नई स्थिति पा सकते हैं:

\vec{X_{н в}} = \vec{X_{п р}} + \vec{V_{н в}} * Δ t

$\vec{X_{}}=\vec{X_{}} + \vec{V_{}}*\Delta t$

हमें सही स्थिति मिली, इसे उपयोगकर्ता को दिखाएं!

प्रदर्शित होने के बाद, एक नया एनीमेशन अंतराल शुरू करें। एक नए अंतराल के लिए

\vec{X_{п р}} = \vec{X_{н в}}

$\vec{X_{}}=\vec{X_{}}$ ,

\vec{V_{п р}} = \vec{V_{н в}}

$\vec{V_{}}=\vec{V_{}}$ ।

एनीमेशन कब बंद होने लायक है

‖ \vec{X_{н в}} ‖

$\|\vec{X_{}}\|$ तथा

‖ \vec{V_{н в}} ‖

$\|\vec{V_{}}\|$ बहुत छोटा हो जाता है - इस समय वसंत के दोलन लगभग अदृश्य हो जाते हैं।

जेएस वसंत एनिमेशन

हमारे पास आवश्यक सूत्र हैं, यह हमारे कार्यान्वयन को लिखने के लिए बना हुआ है:

class Spring {
  constructor({ mass, tension, friction, initVelocity, from, to, onUpdate }) {
    this.mass = mass;                 //  
    this.tension = tension;           //  
    this.friction = friction;         //  
    this.initVelocity = initVelocity; //  

    this.from = from;                 //    
    this.to = to;                     //    
    this.onUpdate = onUpdate;         // ,    
  }

  startAnimation() {
    const callDoAnimationTick = () => {
      const isFinished = this.doAnimationTick();

      if (isFinished) {
        return;
      }

      this.nextTick = window.requestAnimationFrame(callDoAnimationTick);
    };

    callDoAnimationTick();
  }

  stopAnimation() {
    const { nextTick } = this;

    if (nextTick) {
      window.cancelAnimationFrame(nextTick);
    }

    this.isFinished = true;
  }

  doAnimationTick() {
    const {
      mass, tension, friction, initVelocity, from, to,
      previousTimestamp, prevVelocity, prevValue, onUpdate,
    } = this;

    //  Δt
    const currentTimestamp = performance.now();
    const deltaT = (currentTimestamp - (previousTimestamp || currentTimestamp))
      / 1000;
    //   Δt 46 
    const normalizedDeltaT = Math.min(deltaT, 0.046);

    let prevSafeVelocity = prevVelocity || initVelocity || 0;
    let prevSafeValue = prevValue || from;

    //   ,    
    const springRestoringForce = -1 * tension * (prevSafeValue - to);
    const dampingForce = -1 * prevSafeVelocity * friction;
    const acceleration = (springRestoringForce + dampingForce) / mass;

    //       
    const newVelocity = prevSafeVelocity + acceleration * normalizedDeltaT;
    const newValue  = prevSafeValue + newVelocity * normalizedDeltaT;

    //    
    const precision = 0.001;
    const isFinished = Math.abs(newVelocity) < precision
      && Math.abs(newValue - to) < precision;

    onUpdate({ value: newValue, isFinished });

    this.previousTimestamp = currentTimestamp;
    this.prevValue = newValue;
    this.prevVelocity = newVelocity;
    this.isFinished = isFinished;

    return isFinished;
  }
}

स्प्रिंग क्लास कोड वाला सैंडबॉक्स और इसके उपयोग का एक उदाहरण:
https://playcode.io/590645

माइनर स्प्रिंग एनिमेशन इम्प्रूवमेंट

हमारे वसंत वर्ग के साथ एक छोटी सी समस्या है -

Δ t

$\Delta t$ एनीमेशन की नई शुरुआत के साथ हर बार अलग होगा।

पुराने सेल फोन पर खोलें -

Δ t

$\Delta t$ हमारी अधिकतम सीमा 46 मिलीसेकंड के बराबर होगी। शक्तिशाली कंप्यूटर पर खोलें -

Δ t

$\Delta t$ 16-17 मिलीसेकंड होगा।

बदलना

Δ t

$\Delta t$ इसका मतलब है कि एनीमेशन की अवधि और एनिमेटेड मूल्य में परिवर्तन हर बार थोड़ा अलग होगा।

ऐसा होने से रोकने के लिए, हम यह कर सकते हैं:

लो

Δ t

$\Delta t$ निश्चित मूल्य के रूप में। एक नए एनीमेशन अंतराल के साथ, हमें गणना करनी होगी कि अंतिम अंतराल के बाद कितना समय बीत चुका है और इसमें कितने निश्चित मान हैं

Δ t

$\Delta t$ । यदि समय से विभाज्य नहीं है

Δ t

$\Delta t$ , फिर शेष को अगले एनीमेशन अंतराल पर स्थानांतरित करें।

फिर हम गणना करते हैं

\vec{X_{н в}}

$\vec{X_{}}$ तथा

\vec{V_{н в}}

$\vec{V_{}}$ जितनी बार हमने तय किया, मान लिया। अंतिम मूल्य

\vec{X_{н в}}

$\vec{X_{}}$ उपयोगकर्ता को दिखा रहा है।

उदाहरण:

Δ t

$\Delta t$ चलो 1 मिलीसेकंड के रूप में लेते हैं, 32 मिलीसेकंड अंतिम और नए एनीमेशन अंतराल के बीच पारित हुआ।

हमें 32 बार भौतिकी की गणना करनी है,

\vec{X_{н в}}

$\vec{X_{}}$ तथा

\vec{V_{н в}}

$\vec{V_{}}$ ; अंतिम

\vec{X_{н в}}

$\vec{X_{}}$ उपयोगकर्ता को दिखाया जाना चाहिए।

यह वही है जो DoAnimationTick विधि की तरह दिखेगा:

class Spring {
  /* ... */

  doAnimationTick() {
    const {
      mass, tension, friction, initVelocity, from, to,
      previousTimestamp, prevVelocity, prevValue, onUpdate,
    } = this;

    const currentTimestamp = performance.now();
    const fractionalDiff = currentTimestamp - (previousTimestamp || currentTimestamp);
    const naturalDiffPart = Math.floor(fractionalDiff);
    const decimalDiffPart = fractionalDiff % 1;
    const normalizedDiff = Math.min(naturalDiffPart, 46);

    let safeVelocity = prevVelocity || initVelocity || 0;
    let safeValue = prevValue || from;

    //     1-  
    for (let i = 0; i < normalizedDiff; i++) {
      const springRestoringForce = -1 * tension * (safeValue - to);
      const dampingForce = -1 * safeVelocity * friction;
      const acceleration = (springRestoringForce + dampingForce) / mass;

      safeVelocity = safeVelocity + acceleration / 1000;
      safeValue  = safeValue + safeVelocity / 1000;
    }

    const precision = 0.001;
    const isFinished = Math.abs(safeVelocity) < precision
      && Math.abs(safeValue - to) < precision;

    onUpdate({ value: safeValue, isFinished });

    //       ,
    //      
    this.previousTimestamp = currentTimestamp - decimalDiffPart;
    this.prevValue = safeValue;
    this.prevVelocity = safeVelocity;
    this.isFinished = isFinished;

    return isFinished;
  }
}

भौतिकी की गणना करने की यह विधि प्रतिक्रिया-वसंत का उपयोग करती है, इस लेख में आप अधिक पढ़ सकते हैं।

क्षीणन गुणांक और आंतरिक दोलन अवधि के बारे में

सिस्टम के गुणों को देखते हुए - भार का द्रव्यमान, लोच का गुणांक और माध्यम के घर्षण के गुणांक - यह पूरी तरह से अस्पष्ट है कि वसंत कैसे व्यवहार करता है। स्प्रिंग-एनिमेशन बनाते समय, इन चर को यादृच्छिक रूप से तब तक चुना जाता है जब तक कि प्रोग्रामर एनिमेशन के "स्प्रिंगनेस" से संतुष्ट न हो जाए।

हालांकि, भौतिकी में एक नम वसंत के लिए कुछ चर हैं, उन्हें देखकर आप बता सकते हैं कि वसंत कैसे व्यवहार करता है।

उन्हें खोजने के लिए, आइए न्यूटन के दूसरे नियम के हमारे समीकरण पर लौटते हैं:

- k \vec{X_{п р}} - α \vec{V_{п р}} = m \vec{a}

$-k\vec{X_{}} - \alpha\vec{V_{}}=m\vec{a}$

हम इसे एक विभेदक समीकरण के रूप में लिखते हैं:

- k x - α \frac{d x}{d t} = m \frac{d^{2} x}{d t^{2}}

$-kx - \alpha\frac{dx}{dt}=m\frac{d^2x}{dt^2}$

इसे फिर से लिखा जा सकता है:

\frac{d^{2} x}{d t^{2}} + 2 ζ ω_{0} \frac{d x}{d t} + ω_{0}^{2} x = 0,

$\frac{d^2x}{dt^2} + 2\zeta\omega_{0}\frac{dx}{dt} + \omega_{0}^2x = 0,$

कहाँ पे

ω_{0} = \sqrt{\frac{k}{m}}

$\omega_{0} = \sqrt\frac{k}{m}$ घर्षण बल को ध्यान में रखे बिना वसंत के दोलन की आवृत्ति,

ζ = \frac{α}{2 \sqrt{m k}}

$\zeta = \frac{\alpha}{2\sqrt{mk}}$ - क्षीणन गुणांक।

यदि हम इस समीकरण को हल करते हैं, तो हमें कई कार्य मिलते हैं

x (t)

$x(t)$ कि वसंत बनाम समय की स्थिति निर्धारित करते हैं। मैंने स्पॉइलर के नीचे समाधान डाल दिया, ताकि लेख को बहुत अधिक न खींचा जाए, हम सीधे परिणाम पर जाएंगे।

समीकरण समाधान

, :
https://www.youtube.com/watch?v=uI2xt8nTOlQ

:

x^{″} + 2 ζ ω_{0} x^{'} + ω_{0}^{2} x = 0, ω_{0} > 0, ζ \geq 0

$x'' + 2 \zeta\omega_0x' + \omega_0^2x = 0, \omega_0 >0, \zeta \geq 0$

g^{2} + 2 ζ ω_{0} g + ω_{0}^{2} = 0

$g^2 + 2 \zeta\omega_0g + \omega_0^2 = 0$

D = (2 ζ ω_{0})^{2} - 4 ω_{0}^{2} = 4 ω_{0}^{2} (ζ^{2} - 1)

$D = (2\zeta\omega_0)^2 - 4\omega_0^2 = 4\omega_0^2(\zeta^2 - 1)$

:

1.

D > 0

$D > 0$

D > 0

$D > 0$

ζ > 1

$\zeta > 1$ .

D > 0

$D > 0$ :

x (t) = C_{1} e^{r_{1} t} + C_{2} e^{r_{2} t},

$x(t) = C_1e^{r_1t} + C_2e^{r_2t},$

r_{1, 2}

$r_{1,2}$ — , :

r_{1, 2} = \frac{- 2 ζ ω_{0} \pm \sqrt{4 ω_{0}^{2} (ζ^{2} - 1)}}{2} = - ω_{0} (ζ \pm \sqrt{ζ^{2} - 1})

$r_{1,2} = \frac{-2\zeta\omega_0 \pm \sqrt{4\omega_0^2(\zeta^2 - 1)}}{2} = -\omega_0(\zeta \pm \sqrt{\zeta^2 - 1})$

x (t) = C_{1} e^{- ω_{0} β_{1} t} + C_{2} e^{- ω_{0} β_{2} t},

$x(t) = C_1e^{-\omega_0\beta_1t} + C_2e^{-\omega_0\beta_2t},$

β_{1, 2} = ζ \pm \sqrt{ζ_{2} - 1}

$\beta_{1, 2} = \zeta \pm \sqrt{\zeta_2 - 1}$ .

, 0.

2.

D = 0

$D = 0$

D = 0

$D = 0$

ζ = 1

$\zeta = 1$ .

D = 0

$D = 0$ :

x (t) = (C_{1} + C_{2} t) e^{r t},

$x(t) = (C_1 + C_2t)e^{rt},$

r

$r$ — , :

r = - ζ ω_{0}

$r = - \zeta\omega_0$

x (t) = (C_{1} + C_{2} t) e^{- ζ ω_{0} t}

$x(t) = (C_1 + C_2t)e^{- \zeta\omega_0t}$

, 0. ,

D > 0

$D > 0$ .

, , , 0 ,

D > 0

$D > 0$ . , ?

3.

D < 0

$D < 0$

D < 0

$D < 0$

ζ < 1

$\zeta < 1$ .

D < 0

$D < 0$ :

x (t) = e^{α t} (C_{1} c o s (β t) + C_{2} * s i n (β t))

$x(t) = e^{\alpha t}(C_1cos(\beta t) + C_2 * sin(\beta t))$

α

$\alpha$

β

$\beta$ — , :

r 1, 2 = α \pm β i = - ω_{0} ζ \pm ω_{0} \sqrt{ζ^{2} - 1}) = - ω_{0} ζ \pm ω_{0} \sqrt{1 - ζ^{2}} i

$r{1,2} = \alpha \pm \beta i = -\omega_0\zeta \pm\omega_0\sqrt{\zeta^2 - 1}) = -\omega_0\zeta \pm \omega_0\sqrt{1 - \zeta^2}i$

α = - ω_{0} ζ, β = ω_{0} \sqrt{1 - ζ^{2}}

$\alpha = -\omega_0\zeta, \beta = \omega_0\sqrt{1 - \zeta^2}$

x (t) = e^{- ω_{0} ζ t} (C_{1} c o s (ω_{0} \sqrt{1 - ζ^{2}} t) + C_{2} s i n (ω_{0} \sqrt{1 - ζ^{2}} t))

$x(t) = e^{-\omega_0\zeta t}(C_1cos(\omega_0\sqrt{1 - \zeta^2} t) + C_2sin(\omega_0\sqrt{1 - \zeta^2} t))$

, 0.

ζ

$\zeta$ ,

e^{- ω_{0} ζ t}

$e^{-\omega_0\zeta t}$ 0, .. .

ζ = 0

$\zeta = 0$ .

पर

ζ < 1

$\zeta < 1$ हमें एक समीकरण मिलता है जो एक वसंत के कंपित कंपन का वर्णन करता है। कम

ζ

$\zeta$ , घर्षण बल कम और अधिक दृश्य कंपन।

पर

ζ = 1

$\zeta = 1$ हम महत्वपूर्ण घर्षण के साथ समीकरण प्राप्त करते हैं, अर्थात्। वह समीकरण जिसमें सिस्टम बिना किसी हिचकिचाहट के सबसे तेज़ तरीके से संतुलन की स्थिति में लौटता है।

पर

ζ > 1

$\zeta > 1$ हमें एक समीकरण मिलता है जिसमें सिस्टम बिना किसी हिचकिचाहट के संतुलन की स्थिति में लौटता है। यह साथ की तुलना में धीमी होगी

ζ = 1

$\zeta = 1$ ; वृद्धि के साथ

ζ

$\zeta$ संतुलन की स्थिति में अभिसरण की दर घट जाती है।

विभिन्न के लिए एनिमेशन के उदाहरण $\zeta$ । एनिमेशन स्पीड 4 गुना कम हो गई।

इसके अलावा

ζ

$\zeta$ , वसंत दोलनों की एक और समझने योग्य विशेषता है - बिना घर्षण को ध्यान में रखे वसंत दोलनों की अवधि:

T = 2 π \sqrt{\frac{m}{k}}

$T = 2\pi\sqrt{\frac{m}{k}}$

हमें दो पैरामीटर मिले:

→

ζ

$\zeta$ , जो निर्धारित करता है कि एनीमेशन में कितना उतार-चढ़ाव होगा।

संभावित मान

ζ

$\zeta$ 0 से 1.

कम

ζ

$\zeta$ , वसंत दिखाई देगा अधिक कंपन। 0 पर, सिस्टम में घर्षण नहीं होगा, वसंत क्षीणन के बिना दोलन करेगा; 1 पर, वसंत बिना किसी हिचकिचाहट के संतुलन की स्थिति में परिवर्तित हो जाएगा।

1 से अधिक मूल्य हमारे लिए आवश्यक नहीं हैं - वे 1 के रूप में काम करते हैं, केवल व्यर्थ में हमारे एनीमेशन को बाहर निकालते हैं।

→

T

$T$ जो कहेगा कि एनीमेशन कितने समय तक चलेगा।

यह पैरामीटर को ध्यान में रखना चाहिए

T

$T$ घर्षण बल को ध्यान में रखते हुए वसंत के एक कंपन की अवधि के बारे में बात करता है, और एनीमेशन की कुल अवधि के बारे में नहीं।

अब हम लोच के गुणांक और माध्यम के घर्षण के गुणांक को जान सकते हैं

ζ

$\zeta$ तथा

T

$T$ और यह मानते हुए

m = 1

$m=1$ :

ζ = \frac{α}{2 \sqrt{m k}}, T = 2 π \sqrt{\frac{m}{k}}

$\zeta = \frac{\alpha}{2\sqrt{mk}}, T = 2\pi\sqrt{\frac{m}{k}}$

k = (\frac{2 π}{T})^{2}, α = \frac{4 π ζ}{T}

$k = (\frac{2\pi}{T})^2, \alpha = \frac{4\pi\zeta}{T}$

हम इस तर्क को कोड में लागू करते हैं:

const getSpringValues = ({ dampingRatio, period }) => {
  const mass = 1;
  const tension = Math.pow(2 * Math.PI / period, 2);
  const friction = 4 * Math.PI * dampingRatio / period;

  return {
    mass,
    tension,
    friction,
  };
};

//  

new Spring({
  ...getSpringValues({
    dampingRatio: 0.3, //   - 
    period: 0.6, //   600 
  }),
  from: 0,
  to: 20,
  onUpdate: () => { /* ... */ },
});

new Spring({
  ...getSpringValues({
    dampingRatio: 1, //   
    period: 0.2, //   200 
  }),
  from: 0,
  to: 20,
  onUpdate: () => { /* ... */ },
});

अब हमारे पास एक getSpringValues तरीका है जो मानव-पठनीय क्षीणन गुणांक को स्वीकार करता है

ζ

$\zeta$ और दोलन की अवधि

T

$T$ और वसंत का द्रव्यमान, घर्षण का गुणांक और लोच का गुणांक लौटाता है।

यह विधि नीचे दिए गए लिंक पर सैंडबॉक्स में है, आप सामान्य सिस्टम गुणों के बजाय इसका उपयोग करने का प्रयास कर सकते हैं:
https://playcode.io/590645

Vue स्प्रिंग एनीमेशन

Vue में स्प्रिंग एनिमेशन का उपयोग आसानी से करने के लिए, आप दो काम कर सकते हैं: एक आवरण घटक या रचना-एपी विधि लिखें ।

घटक के माध्यम से स्प्रिंग एनीमेशन

आइए एक घटक लिखें जो स्प्रिंग क्लास के उपयोग को रोकता है।

इसे लिखने से पहले, कल्पना करें कि हम इसका उपयोग कैसे करना चाहते हैं:

<template>
  <div>
    <SpringWrapper
      :mass="1"
      :tension="170"
      :friction="14"
      :animationProps="{ x, y }" 
      :animate="true" 
      v-slot="{ x: newX, y: newY }"
    >
      <div :style="{ transform: `translate(${newX}px, ${newY}px)` }" />
    </SpringWrapper>
  </div>
</template>

<script>
import SpringWrapper from 'path/to/SpringWrapper';

export default {
  components: {
    SpringWrapper,
  },

  data() {
    return {
      x: 0,
      y: 0,
    };
  },

  mounted() {
    setTimeout(() => {
      this.x = 100;
      this.y = 100;
    }, 1000);
  },
};
</script>

हम पसंद करेंगे:

आप वसंत के गुणों को निर्धारित कर सकते हैं
एनिमेशनप्रॉप्स पैरामीटर में, उन क्षेत्रों को निर्दिष्ट करना संभव था जिन्हें हम चेतन करना चाहते हैं
चेतन पैरामीटर ने मान पास किया कि क्या एनीमेशनप्रॉप्स को एनिमेटेड होना चाहिए
जब भी फ़ील्ड एनीमेशनप्रॉप्स में बदलते हैं, तो उन्हें स्प्रिंग एनीमेशन का उपयोग करके बदल दिया जाता है और स्कोप स्लॉट में स्थानांतरित कर दिया जाता है

पूर्ण कार्यक्षमता के लिए, घटक को अभी भी वसंत की गति को बदलने में सक्षम होना चाहिए, लेकिन कोड को जटिल नहीं करने के लिए हम ऐसा नहीं करेंगे।

हम विकास शुरू करते हैं:

const SpringWrapper = {
  props: {
    friction: { type: Number, default: 10 },
    tension: { type: Number, default: 270 },
    mass: { type: Number, default: 1 },
    animationProps: { type: Object, required: true },
    animate: { type: Boolean, required: true },
  },

  data: () => ({
    //    
    actualAnimationProps: null,
  }),

  created() {
    this.actualAnimationProps = this.animationProps;
    // ,     Spring-
    this._springs = {};
  },

  watch: {
    animationProps: {
      deep: true,

      //    animationProps
      handler(animationProps) {
        const {
          friction, tension, mass,
          animate, actualAnimationProps, _springs,
        } = this;

        //     ,    
        if (!animate) {
          this.actualAnimationProps = animationProps;

          return;
        }

        //      
        Object.entries(animationProps).forEach((([key, value]) => {
          const _spring = _springs[key];
          const actualValue = actualAnimationProps[key];

          //      Spring-,
          //      
          if (_spring && !_spring.isFinished) {
            _spring.to = value;

            return;
          }

          const spring = new Spring({
            friction,
            tension,
            mass,
            initVelocity: 0,
            from: actualValue,
            to: value,
            onUpdate: ({ value }) => {
              actualAnimationProps[key] = value;
            },
          });

          spring.startAnimation();

          _springs[key] = spring;
        }));
      }
    },

    animate(val) {
      const { _springs } = this;

      //     ,
      //    Spring-
      if (!val) {
        Object.values(_springs).forEach((spring) => {
          spring.stopAnimation();
        })

        this.actualAnimationProps = this.animationProps;
      }
    },
  },

  render() {
    const { $scopedSlots, actualAnimationProps } = this;

    //     scopedSlot
    return $scopedSlots.default(actualAnimationProps)[0];
  },
};

एक घटक के साथ सैंडबॉक्स और इसके उपयोग का एक उदाहरण:
https://playcode.io/591686/

रचना-एपीआई विधि के माध्यम से वसंत एनीमेशन

कंपोजीशन-एपीआई का उपयोग करने के लिए, जो Vue 3.0 में दिखाई देगा, हमें कंपोजीशन-एपी पैकेज की आवश्यकता है ।

इसे खुद से जोड़ें:

npm i @vue/composition-api

import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api';

Vue.use(VueCompositionApi);

अब आइए सोचते हैं कि हम अपनी एनीमेशन विधि को कैसे देखना चाहेंगे:

<template>
  <div>
    <div :style="{ transform: `translate(${x}px, ${y}px)` }" />
  </div>
</template>

<script>
import useSpring from 'path/to/useSpring';

export default {
  setup() {
    const { x, y, animate } = useSpring({
      mass: 1, 
      tension: 170, 
      friction: 10,
      x: 0,
      y: 0,
    });

    setTimeout(() => {
      x.value = 100;
      y.value = 100;
    }, 1000);

    return {
      x,
      y,
      animate,
    };
  },
};
</script>

हम पसंद करेंगे:

आप वसंत के गुणों को निर्धारित कर सकते हैं
फ़ंक्शन उन क्षेत्रों के साथ एक ऑब्जेक्ट लेता है जिन्हें हम इनपुट के रूप में एनिमेट करना चाहते हैं।
फ़ंक्शन परिकलित रैपर वापस आ गया। सेटर्स उन मूल्यों को स्वीकार करेंगे जिन्हें हम इनपुट के रूप में चेतन करना चाहते हैं; गेट्स एक एनिमेटेड मान लौटाएगा
फ़ंक्शन ने चेतन चर लौटाया, जो इस बात के लिए ज़िम्मेदार होगा कि हमें एनीमेशन को चलाने की आवश्यकता है या नहीं।

जैसा कि घटक के मामले में, हम वसंत गति के अनुकूलन को नहीं जोड़ेंगे ताकि कोड को जटिल न करें।

हम एक विधि बनाना शुरू करते हैं:

import { reactive, computed, ref, watch } from '@vue/composition-api';
import { Spring } from '@cag-animate/core';

const useSpring = (initialProps) => {
  const {
    mass, tension, friction,
    animate: initialAnimate,
    ...restInitialProps
  } = initialProps;

  //  ,      
  const actualProps = reactive(restInitialProps);

  const springs = {};
  const mirrorProps = {};

  Object.keys(initialProps).forEach(key => {
    //     computed-
    // 
    // Getter     actualProps
    // Setter  Spring-
    mirrorProps[key] = computed({
      get: () => actualProps[key],
      set: val => {
        const _spring = springs[key];
        const actualValue = actualProps[key];

        if (!mirrorProps.animate.value) {
          actualProps[key] = val;

          return
        }

        if (_spring && !_spring.isFinished) {
          _spring.to = val;

          return;
        }

        const spring = new Spring({
          friction,
          tension,
          mass,
          initVelocity: 0,
          from: actualValue,
          to: val,
          onUpdate: ({ value }) => {
            actualProps[key] = value;
          },
        });

        spring.startAnimation();

        springs[key] = spring;
      },
    });
  });

  mirrorProps.animate = ref(initialAnimate || true);

  watch(() => mirrorProps.animate.value, (val) => {
    if (!val) {
      Object.entries(springs).forEach(([key, spring]) => {
        spring.stopAnimation();
        actualProps[key] = spring.to;
      });
    }
  });

  return mirrorProps;
};

export default useSpring;

सैंडबॉक्स कम्पोजीशन-एपी विधि और इसके उपयोग का एक उदाहरण:
https://playcode.io/591812/

आख़िरी शब्द

लेख में, हमने स्प्रिंग एनिमेशन की बुनियादी विशेषताओं की जांच की और उन्हें Vue में लागू किया। लेकिन हमारे पास अभी भी सुधार के लिए जगह है - Vue- घटकों में आप आरंभीकरण के बाद नए क्षेत्रों को जोड़ने की क्षमता जोड़ सकते हैं, वसंत की गति में बदलाव जोड़ सकते हैं।

सच है, वास्तविक परियोजनाओं में अपने स्प्रिंग को लिखना बिल्कुल भी आवश्यक नहीं है: पॉपमोशन लाइब्रेरी में पहले से ही तैयार स्प्रिंग कार्यान्वयन है । आप Vue के लिए एक आवरण लिख सकते हैं, जैसा कि हमने ऊपर किया था।

अंत तक पढ़ने के लिए धन्यवाद!

Vue में स्प्रिंग एनिमेशन