एनिमेशन एक शक्तिशाली उपकरण है जो वेबसाइट पर उपयोगकर्ता के अनुभव को बढ़ा सकता है। जब सही तरीके से उपयोग किया जाता है, तो वे वेबसाइट को अधिक आकर्षक, संवादात्मक और सहज ज्ञान युक्त बना सकते हैं। इस लेख में, हम SwifWeb के लिए एनिमेशन लाइब्रेरी की खोज करेंगे।

मैं सबसे प्रसिद्ध एनिमेट.सीएसएस लाइब्रेरी के बारे में बात कर रहा हूं। आइए इसे स्थापित करें और देखें कि इसका उपयोग कैसे करना है!

इंस्टालेशन

यदि आप SwifWeb में नए हैं तो कृपया इस लेख में देखें कि नया प्रोजेक्ट कैसे बनाया जाता है।

प्रोजेक्ट में Package.swift खोलें और dependencies सेक्शन को इस तरह दिखने के लिए संपादित करें:

 dependencies: [ // the rest of the other dependencies including swifweb/web .package( url: "https://github.com/swifweb/animate", from: "1.0.0" ), ]

इसे इस तरह दिखने के लिए अगला executableTarget संपादित करें:

 .executableTarget(name: "App", dependencies: [ .product(name: "Web", package: "web"), .product(name: "Animate", package: "animate") ]),

फिर App.swift import Animate खोलें और इसे didFinishLaunching मेथड में इस तरह कॉन्फ़िगर करें:

 Lifecycle.didFinishLaunching { Animate.configure() }

प्रयोग

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

कोई भी तत्व लें और उसमें एक एनीमेशन जोड़ें जो DOM में जुड़ते ही लॉन्च हो जाएगा।

 @DOM override var body: DOM.Content { Img() .src("https://i.ytimg.com/vi/1Ne1hqOXKKI/maxresdefault.jpg") .width(400.px) .animate(.jello) // <- here we added jello animation }

या स्क्रीन पर कोई भी तत्व लें और उसमें तुरंत एक एनीमेशन जोड़ें:

 lazy var img = Img() @DOM override var body: DOM.Content { self.img .src("https://i.ytimg.com/vi/1Ne1hqOXKKI/maxresdefault.jpg") .width(400.px) Button("Animate").onClick { self.img.animate(.jello) // <- here we animate } }

इसके अतिरिक्त, आप duration , delay , और सेटिंग repeat सकते हैं।

 .animate(.jello, delay: 0, duration: 1, repeat: 0)

ये सभी पैरामीटर वैकल्पिक हैं। एनिमेशन समाप्त होने पर मान स्वचालित रूप से हटा दिए जाएंगे।

वैकल्पिक रूप से इन विकल्पों को अलग तरीकों का उपयोग करके सेट किया जा सकता है:

 .animateDelay(0) .animateDuration(1) .animateRepeat(0)

और आपको इन मानों को मैन्युअल रूप से भी निकालना चाहिए:

 .removeAnimateDelay() .removeAnimateDuration() .removeAnimateRepeat()

आइए प्रत्येक विकल्प के बारे में अधिक बात करें।

देरी

पूर्वनिर्धारित सुविधा मान:

 .delay0s // animation starts immediately .delay1s // adds a 1-second delay .delay2s // adds a 2-second delay .delay3s // adds a 3-second delay .delay4s // adds a 4-second delay .delay5s // adds a 5-second delay

विस्तार में अपना स्वयं का सुविधा मूल्य बनाएँ:

 extension DelayValue { static var delay10s: Self { 10 } // adds a 10-second delay }

या आप उपरोक्त उदाहरणों की तरह किसी भी Float या Int मान का उपयोग कर सकते हैं।

अवधि

पूर्वनिर्धारित सुविधा मान:

 .slow // executes animation for 2 seconds .slower // executes animation for 3 seconds .fast // executes animation for 0.8 seconds .faster // executes animation for 0.5 seconds

विस्तार में अपना स्वयं का सुविधा मूल्य बनाएँ:

 extension DurationValue { static var verySlow: Self { 5 } // executes animation for 5s }

या आप उपरोक्त उदाहरणों की तरह किसी भी फ़्लोट या इंट मान का उपयोग कर सकते हैं।

दोहराना

पूर्वनिर्धारित सुविधा मान:

 .repeat1 // repeats animation once .repeat2 // repeats animation twice .repeat3 // repeats animation three times .infinite // repeats animation infinitely

विस्तार में अपना स्वयं का सुविधा मूल्य बनाएँ:

 extension RepeatValue { static var repeat5: Self { 5 } // repeats animation five times }

या आप उपरोक्त उदाहरणों के अनुसार किसी भी Int मान का उपयोग कर सकते हैं।

सुविधा मूल्यों के साथ उदाहरण

 .animate(.jello, delay: .delay0s, duration: .slower, repeat: .repeat2)

और अलग तरीके:

 .animateDelay(.delay0s) .animateDuration(.slower) .animateRepeat(.repeat2)

सर्वोत्तम प्रथाएं

एनिमेशन वेब इंटरफ़ेस के साथ उपयोगकर्ता के अनुभव को महत्वपूर्ण रूप से बढ़ा सकते हैं। हालांकि, यह सुनिश्चित करने के लिए कुछ दिशानिर्देशों का पालन करना आवश्यक है कि अनुभव नकारात्मक रूप से प्रभावित न हो। निम्नलिखित नियमों का पालन करके आप एक सकारात्मक शुरुआत कर सकते हैं।

सार्थक एनिमेशन का प्रयोग करें

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

चंचलता अच्छी है, लेकिन सावधान रहें

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

बड़े तत्वों को एनिमेट करने से बचें

बड़े तत्वों को एनिमेट करने से खराब उपयोगकर्ता अनुभव हो सकता है, जिससे भ्रम पैदा हो सकता है और एनिमेशन परेशान दिखाई दे सकते हैं। इसलिए, बड़े तत्वों को एनिमेट करने से बचने की सलाह दी जाती है, क्योंकि वे उपयोगकर्ता के लिए बहुत कम मूल्य जोड़ते हैं।

अनंत एनिमेशन से बचें

जबकि animate.css असीमित एनिमेशन सहित दोहराए जाने वाले एनिमेशन के लिए उपयोगिता कक्षाएं प्रदान करता है, यह अंतहीन एनिमेशन से बचने के लिए अनुशंसित है। ये एनिमेशन उपयोगकर्ताओं को विचलित कर सकते हैं और उन्हें परेशान कर सकते हैं, जिसके परिणामस्वरूप नकारात्मक अनुभव होता है। इसलिए, उनका बुद्धिमानी से उपयोग करें!

पकड़ लिया

आप इनलाइन तत्वों को एनिमेट नहीं कर सकते हैं

सीएसएस एनीमेशन विनिर्देशों के अनुसार इनलाइन तत्वों को एनिमेट करने की अनुशंसा नहीं की जाती है और यह सभी ब्राउज़रों पर काम नहीं कर सकता है। इसके बजाय grid और flex कंटेनर और उनके बच्चों सहित block या inline-block स्तर के तत्व एनिमेटेड होने चाहिए। इनलाइन-लेवल एलिमेंट को एनिमेट करने के लिए, आप इसके डिस्प्ले प्रॉपर्टी को इनलाइन-ब्लॉक पर सेट कर सकते हैं।

बाढ़

स्क्रीन पर तत्वों को एनिमेट करते समय, कुछ Animate.css एनिमेशन आपके वेबपेज पर स्क्रॉलबार बना सकते हैं। इससे बचने के लिए, आप अतिप्रवाह का उपयोग कर सकते हैं: एनिमेटेड तत्व वाले मूल तत्व में छिपी हुई संपत्ति। हालाँकि, इसका उपयोग कब या कैसे करना है, इसका कोई निश्चित नुस्खा नहीं है।

दोहराव के बीच अंतराल

शुद्ध CSS का उपयोग करके दोहराव के बीच अंतराल सेट करना वर्तमान में संभव नहीं है।

लेकिन `.animationEnd` ईवेंट श्रोता का उपयोग करना संभव है:

 Img() .src("https://i.ytimg.com/vi/1Ne1hqOXKKI/maxresdefault.jpg") .width(400.px) .animate(.jello, delay: 0, duration: 2) .addEventListener( .animationEnd, options: .init(once: true) ) { event, element in Dispatch.asyncAfter(0.5) { element.animate(.jello, delay: 0, duration: 2) } }

या इससे भी अधिक सुविधाजनक:

 Img() .src("https://i.ytimg.com/vi/1Ne1hqOXKKI/maxresdefault.jpg") .width(400.px) .animate(.jello, delay: 0, duration: 2) { element in Dispatch.asyncAfter(0.5) { element.animate(.jello, delay: 0, duration: 2) } }

बस इतना ही

हाँ, वह लाइब्रेरी कॉम्पैक्ट लेकिन शक्तिशाली है!

और जानना चाहते हैं? आने वाले लेखों के लिए बने रहें!