तय करें कि ऐनिमेशन-कंपोज़िशन के साथ कई ऐनिमेशन इफ़ेक्ट को कैसे जोड़ा जाना चाहिए

बदलाव करना है, जोड़ना है या इकट्ठा करना है? सवाल यह है.

Bramus

कई ऐनिमेशन इफ़ेक्ट को एक साथ जोड़ना

animation-composition प्रॉपर्टी की मदद से यह कंट्रोल किया जा सकता है कि जब एक साथ कई ऐनिमेशन, एक ही प्रॉपर्टी पर असर डालते हैं, तो क्या होना चाहिए.

मान लें कि आपने किसी एलिमेंट पर यह मूल ट्रांसफ़ॉर्मेशन लागू किया है:

transform-origin: 50% 50%;
transform: translateX(50px) rotate(45deg);

साथ ही, आपके पास यह कीफ़्रेम सेट भी है:

@keyframes adjust {
  to {
    transform: translateX(100px);
  }
}

किसी एलिमेंट पर इन मुख्य फ़्रेम को लागू करने पर, to मुख्य फ़्रेम में मौजूद transform, मौजूदा transform की जगह ले लेता है. यह डिफ़ॉल्ट व्यवहार है.

animation-composition की मदद से, अब आपके पास यह कंट्रोल है कि डिफ़ॉल्ट replace के बजाय क्या होना चाहिए. इन वैल्यू का इस्तेमाल किया जा सकता है:

• replace: इफ़ेक्ट वैल्यू, ओरिजनल वैल्यू की जगह ले लेती है. (डिफ़ॉल्ट)
• add: इस ऑपरेटर का इस्तेमाल करने पर, इफ़ेक्ट वैल्यू को ओरिजनल वैल्यू में जोड़ दिया जाता है.
• accumulate: इफ़ेक्ट वैल्यू को ओरिजनल वैल्यू के साथ जोड़ा जाता है.

जोड़ने और इकट्ठा करने के बीच का अंतर बहुत कम होता है. उदाहरण के लिए, blur(2) और blur(3), दो वैल्यू लें. इन दोनों को जोड़ने पर blur(2) blur(3) मिलेगा, लेकिन इन्हें इकट्ठा करने पर blur(5) मिलेगा.

इसकी तुलना चाय से भरे कप से की जा सकती है. इसमें दूध डालने पर ऐसा होगा:

• replace: चाय को हटा दिया जाता है और उसकी जगह दूध डाल दिया जाता है.
• add: दूध को कप में डाला जाता है, लेकिन यह चाय के ऊपर ही रहता है.
• accumulate: चाय में दूध मिलाया जाता है. दोनों तरल होने की वजह से, ये आपस में अच्छी तरह से मिल जाते हैं.

डेमो

नीचे दिए गए डेमो में, तीन ग्रे बॉक्स हैं. इनमें transform और animation लागू किया गया है.

इन बॉक्स में एक जैसा ऐनिमेशन होने के बावजूद, इनके नतीजे अलग-अलग हैं. ऐसा इसलिए है, क्योंकि इनमें animation-composition का अलग-अलग सेट है:

पहला बॉक्स animation-composition: replace पर सेट है. यह डिफ़ॉल्ट व्यवहार है. आखिरी पोज़िशन में, transform के लिए translateX(50px) rotate(45deg) की मूल वैल्यू को translateX(100px) से बदल दिया जाता है.

दूसरा बॉक्स animation-composition: add पर सेट है. आखिरी पोज़िशन में, translateX(100px) को ओरिजनल translateX(50px) rotate(45deg) में जोड़ा जाता है. इससे translateX(50px) rotate(45deg) translateX(100px) बनता है. इससे बॉक्स को 50 पिक्सल तक ले जाया जाता है. इसके बाद, इसे 45 डिग्री तक घुमाया जाता है. इसके बाद, इसे 100 पिक्सल तक ले जाया जाता है.

तीसरे बॉक्स को animation-composition: accumulate पर सेट किया गया है. आखिरी पोज़िशन में, translateX(100px) को ओरिजनल ट्रांसफ़ॉर्म से translateX(50px) में गणितीय तरीके से जोड़ा जाएगा. इससे translateX(150px) rotate(45deg) ट्रांसफ़ॉर्मेशन मिलेगा.

Unsplash पर Alex Boyd की फ़ोटो