Anime.js - एक लाइटवेट जावास्क्रिप्ट एनिमेशन लाइब्रेरी

वेब एनीमेशन एक लंबा सफर तय किया है। न केवल डेवलपर्स सीएसएस / एसवीजी / जेएस के कॉम्बो का उपयोग करके कोई भी एनीमेशन बना सकते हैं, लेकिन हैं दर्जनों मुफ्त पुस्तकालय प्रक्रिया में समय बचाने के लिए.

मेरा एक पसंदीदा है Anime.js, एक पूरी तरह से मुक्त, खुला स्रोत जावास्क्रिप्ट एनीमेशन पुस्तकालय.

यह पुस्तकालय कर सकते हैं यह सब करें. आईटी इस जावास्क्रिप्ट पर बनाया गया लेकिन यह भी सीएसएस एनिमेशन पर बहुत निर्भर करता है. आप अलग-अलग पृष्ठ तत्वों को लक्षित कर सकते हैं DOM के माध्यम से या आप लक्ष्य भी कर सकते हैं कस्टम एसवीजी.

सभी प्रलेखन है GitHub पर स्व-होस्ट किया गया, इसलिए आपको वह ढूंढने की आवश्यकता होगी जो आप ढूंढ रहे हैं। लेकिन प्रत्येक एनीमेशन सुविधा कुछ मापदंडों के साथ आता है जैसे देरी, अवधि और सहजता.

इस लाइब्रेरी पर ध्यान दें नहीं आता है कई डिफ़ॉल्ट एनीमेशन शैलियों के साथ। Anime.js है डेवलपर्स के लिए बनाया गया है जो अपने एनिमेशन को अनुकूलित करना चाहते हैं वर्बोज़ कोड लिखे बिना.

के लिए जीवंत उदाहरण, नीचे दिए गए कोडपेन पेन को देखें। कोड है बहुत ही सरल लेकिन आप के साथ एक विश्वसनीय एनीमेशन मिलता है स्क्वैश और खिंचाव प्लस प्रत्याशा, एनीमेशन के दोनों बुनियादी बातों.

एक उचित चेतावनी: Anime.js पुस्तकालय है सघन. कस्टम एनीमेशन बनाने के लिए यह सब कठिन नहीं है, लेकिन आपको इसकी आवश्यकता है कुछ मूल बातें समझें कॉलबैक और विकल्पों के लिए सहजता और सामान्य जावास्क्रिप्ट सिंटैक्स की तरह.

परंतु सभी जानकारी जो आपको चाहिए उस पर रेपो पेज, समेत कोड नमूने के बहुत सारे तथा विस्तृत प्रलेखन टेबल. और आप खुली बग रिपोर्ट के माध्यम से ब्राउज़ कर सकते हैं या ब्राउज़र समर्थन की जांच कर सकते हैं जिसमें वर्तमान में शामिल हैं सभी प्रमुख ब्राउज़र और IE 10+.

यह आसानी से वेब डेवलपर्स के लिए सबसे अच्छा एनीमेशन पुस्तकालयों में से एक है और इसके लिए आपका समाधान होना चाहिए किसी भी जटिल वेब एनीमेशन.

का एक गुच्छा देखने के लिए जीवंत उदाहरण, CodePen पर होस्ट किए गए Anime.js डेमो के इस संग्रह को देखें। नीचे, मैंने अपने पसंदीदा को एम्बेड किया है पूरे लोगो को खरोंच से अलग करता है, वास्तविक जीवंतता के साथ.