याचे चित्रण करा: तुम्ही एका नवीन प्रकल्पात सामील व्हाल, कोडबेसमध्ये डुबकी मारता आणि पहिल्या काही तासांत तुम्हाला निराशाजनकपणे परिचित काहीतरी सापडते. स्टाईलशीटमध्ये विखुरलेल्या, तुम्हाला समान मूलभूत ॲनिमेशनसाठी अनेक @keyframes व्याख्या सापडतील. तीन भिन्न फेड-इन प्रभाव, दोन किंवा तीन स्लाइड भिन्नता, मूठभर झूम ॲनिमेशन आणि किमान दोन भिन्न स्पिन ॲनिमेशन कारण, ठीक आहे, का नाही? @keyframes नाडी { कडून { स्केल: 1; } ते { स्केल: 1.1; } }
@keyframes बिगर-पल्स { 0%, 20%, 100% { स्केल: 1; } १०%, ४०% { स्केल: 1.2; } }
ही परिस्थिती परिचित वाटत असल्यास, तुम्ही एकटे नाही आहात. विविध प्रकल्पांवरील माझ्या अनुभवानुसार, मी वितरीत करू शकणाऱ्या सर्वात सातत्यपूर्ण झटपट विजयांपैकी एक म्हणजे कीफ्रेम एकत्र करणे आणि प्रमाणित करणे. हा इतका विश्वासार्ह नमुना बनला आहे की आता मी कोणत्याही नवीन कोडबेसवरील माझ्या पहिल्या कार्यांपैकी एक म्हणून या साफसफाईची वाट पाहत आहे. अराजकता मागे तर्क जेव्हा तुम्ही त्याबद्दल विचार करता तेव्हा या रिडंडंसीला योग्य अर्थ प्राप्त होतो. आम्ही सर्व आमच्या दैनंदिन कामात समान मूलभूत ॲनिमेशन वापरतो: फेड, स्लाइड्स, झूम, स्पिन आणि इतर सामान्य प्रभाव. हे ॲनिमेशन अगदी सरळ आहेत आणि काम पूर्ण करण्यासाठी त्वरित @keyframes व्याख्या तयार करणे सोपे आहे. केंद्रीकृत ॲनिमेशन सिस्टीमशिवाय, विकसक स्वाभाविकपणे या कीफ्रेम्स स्क्रॅचमधून लिहितात, कोडबेसमध्ये तत्सम ॲनिमेशन आधीपासूनच इतरत्र अस्तित्वात आहेत हे माहीत नाही. घटक-आधारित आर्किटेक्चर्समध्ये काम करताना हे विशेषतः सामान्य आहे (जे आजकाल आपल्यापैकी बहुतेक करतात), कारण कार्यसंघ सहसा अनुप्रयोगाच्या वेगवेगळ्या भागांमध्ये समांतरपणे कार्य करतात. परिणाम? ॲनिमेशन गोंधळ. लहान समस्या कीफ्रेम डुप्लिकेशनसह सर्वात स्पष्ट समस्या म्हणजे वाया जाणारा विकास वेळ आणि अनावश्यक कोड ब्लोट. एकाधिक कीफ्रेम परिभाषा म्हणजे आवश्यकता बदलल्यावर अपडेट करण्यासाठी एकाधिक ठिकाणे. आपल्या फेड ॲनिमेशनची वेळ समायोजित करण्याची आवश्यकता आहे? तुम्हाला तुमच्या कोडबेसवर प्रत्येक प्रसंग शोधण्याची आवश्यकता असेल. सुलभ कार्ये प्रमाणित करू इच्छिता? सर्व भिन्नता शोधण्यासाठी शुभेच्छा. देखभाल बिंदूंचा हा गुणाकार अगदी साध्या ॲनिमेशन अद्यतनांना वेळ घेणारे कार्य बनवते. मोठी समस्या हे कीफ्रेम्स डुप्लिकेशन पृष्ठभागाच्या खाली लपलेली एक अधिक कपटी समस्या निर्माण करते: जागतिक व्याप्ती सापळा. घटक-आधारित आर्किटेक्चरसह कार्य करत असताना, CSS कीफ्रेम नेहमी जागतिक व्याप्तीमध्ये परिभाषित केल्या जातात. याचा अर्थ सर्व कीफ्रेम सर्व घटकांना लागू होतात. नेहमी. होय, तुमचे ॲनिमेशन तुम्ही तुमच्या घटकामध्ये परिभाषित केलेल्या कीफ्रेम वापरत नाही. हे जागतिक व्याप्तीमध्ये लोड केलेल्या नेमक्या त्याच नावाशी जुळणारे शेवटचे कीफ्रेम वापरतात. जोपर्यंत तुमचे सर्व कीफ्रेम एकसारखे आहेत, तोपर्यंत ही एक किरकोळ समस्या वाटू शकते. परंतु ज्या क्षणी तुम्ही विशिष्ट वापराच्या केससाठी ॲनिमेशन सानुकूलित करू इच्छित असाल, तेव्हा तुम्ही अडचणीत असाल किंवा त्याहून वाईट, तुम्हीच त्यांना कारणीभूत असाल. एकतर तुमचे ॲनिमेशन कार्य करणार नाही कारण तुमच्या नंतर लोड केलेला दुसरा घटक, तुमचे कीफ्रेम ओव्हरराईट करत आहे किंवा तुमचा घटक शेवटचा लोड होतो आणि चुकून त्या कीफ्रेमचे नाव वापरून प्रत्येक इतर घटकासाठी ॲनिमेशन वर्तन बदलते आणि तुम्हाला कदाचित ते लक्षातही येत नाही. येथे एक साधे उदाहरण आहे जे समस्या दर्शवते: .component-one { /* घटक शैली */ ॲनिमेशन: पल्स 1s सहज-इन-आउट अनंत पर्यायी; }
/* ही @keyframes व्याख्या कार्य करणार नाही */ @keyframes नाडी { कडून { स्केल: 1; } ते { स्केल: 1.1; } }
/* नंतर कोडमध्ये... */
.component-दोन { /* घटक शैली */ ॲनिमेशन: पल्स 1s सहज-इन-आउट अनंत; }
/* हे कीफ्रेम दोन्ही घटकांना लागू होतील */ @keyframes नाडी { 0%, 20%, 100% { स्केल: 1; } १०%, ४०% { स्केल: 1.2; } }
दोन्ही घटक समान ॲनिमेशन नाव वापरतात, परंतु दुसरी @keyframes व्याख्या पहिल्याला ओव्हरराइट करते. आता दोन्ही घटक-एक आणि घटक-दोन दुसऱ्या कीफ्रेमचा वापर करतील, कोणता घटक कोणता कीफ्रेम परिभाषित करतो याची पर्वा न करता. पेन कीफ्रेम टोकन्स पहा - डेमो 1 [फोर्क केलेले] अमित शीन. सर्वात वाईट भाग? हे बऱ्याचदा स्थानिक विकासामध्ये उत्तम प्रकारे कार्य करते परंतु जेव्हा बिल्ड प्रक्रिया तुमच्या स्टाईलशीटचा लोडिंग क्रम बदलतात तेव्हा उत्पादनात गूढपणे खंडित होते. तुम्हाला ॲनिमेशन्स मिळतात जे कोणते घटक लोड केले जातात आणि कोणत्या क्रमाने आहेत यावर अवलंबून वेगळ्या पद्धतीने वागतात. उपाय: युनिफाइड कीफ्रेम्स या गोंधळाचे उत्तर आश्चर्यकारकपणे सोपे आहे: पूर्वनिर्धारित डायनॅमिक कीफ्रेम सामायिक केलेल्या स्टाईलशीटमध्ये संग्रहित आहेत. प्रत्येक घटकाला त्याचे स्वतःचे ॲनिमेशन परिभाषित करू देण्याऐवजी, आम्ही केंद्रीकृत कीफ्रेम तयार करतो जे चांगले-दस्तऐवजीकरण आहेत, सोपे आहेतवापरा, देखरेख करण्यायोग्य आणि तुमच्या प्रकल्पाच्या विशिष्ट गरजांनुसार तयार केलेले. कीफ्रेम टोकन्स म्हणून याचा विचार करा. जसे आपण कलर आणि स्पेसिंगसाठी टोकन वापरतो आणि आपल्यापैकी बरेच जण आधीच ॲनिमेशन गुणधर्मांसाठी टोकन वापरतात, जसे की कालावधी आणि सुलभ फंक्शन्स, त्याचप्रमाणे कीफ्रेमसाठी देखील टोकन का वापरत नाहीत? लहान समस्या (कोड डुप्लिकेशन) आणि मोठ्या समस्या (जागतिक व्याप्ती संघर्ष) दोन्ही एकाच वेळी सोडवताना हा दृष्टिकोन नैसर्गिकरित्या तुम्ही वापरत असलेल्या कोणत्याही वर्तमान डिझाइन टोकन वर्कफ्लोसह एकत्रित होऊ शकतो. कल्पना सरळ आहे: आमच्या सर्व सामान्य ॲनिमेशनसाठी सत्याचा एकच स्रोत तयार करा. या शेअर केलेल्या स्टाइलशीटमध्ये काळजीपूर्वक तयार केलेल्या कीफ्रेम्स आहेत ज्यात आमचा प्रकल्प प्रत्यक्षात वापरत असलेल्या ॲनिमेशन पॅटर्नचा समावेश आहे. आमच्या कोडबेसमध्ये फेड ॲनिमेशन आधीपासून अस्तित्वात आहे की नाही याचा अंदाज लावू नका. इतर घटकांवरील ॲनिमेशन्स यापुढे चुकून ओव्हरराईट होणार नाहीत. परंतु येथे मुख्य गोष्ट आहे: हे केवळ स्थिर कॉपी-पेस्ट ॲनिमेशन नाहीत. ते CSS सानुकूल गुणधर्मांद्वारे डायनॅमिक आणि सानुकूल करण्यायोग्य असण्यासाठी डिझाइन केलेले आहेत, जे आपल्याला विशिष्ट वापराच्या प्रकरणांमध्ये ॲनिमेशन स्वीकारण्याची लवचिकता असतानाही सातत्य राखण्याची परवानगी देतात, जसे की तुम्हाला एकाच ठिकाणी थोडेसे मोठे "पल्स" ॲनिमेशन हवे असल्यास. प्रथम कीफ्रेम टोकन तयार करणे आपण हाताळले पाहिजे असे पहिले कमी-हँगिंग फळांपैकी एक म्हणजे “फेड-इन” ॲनिमेशन. माझ्या अलीकडील प्रकल्पांपैकी एकामध्ये, मला डझनभर वेगळ्या फेड-इन व्याख्या आढळल्या आणि होय, त्या सर्वांनी 0 ते 1 पर्यंतची अस्पष्टता ॲनिमेटेड केली. तर, चला एक नवीन स्टाइलशीट तयार करूया, त्याला kf-tokens.css म्हणूया, ती आमच्या प्रोजेक्टमध्ये इंपोर्ट करूया आणि त्यामध्ये योग्य टिप्पण्यांसह आमचे कीफ्रेम्स ठेवू. /* keyframes-tokens.css */
/* * फेड इन - फेड एंट्रन्स ॲनिमेशन * वापर: ॲनिमेशन: kf-fade-in 0.3s ease-out; */ @keyframes kf-fade-in { कडून { अस्पष्टता: 0; } ते { अस्पष्टता: 1; } }
ही एकल @keyframes घोषणा आमच्या कोडबेसवर सर्व विखुरलेल्या फेड-इन ॲनिमेशनची जागा घेते. स्वच्छ, साधे आणि जागतिक स्तरावर लागू. आणि आता आमच्याकडे हे टोकन परिभाषित केले आहे, आम्ही आमच्या संपूर्ण प्रोजेक्टमध्ये कोणत्याही घटकातून ते वापरू शकतो: .modal { ॲनिमेशन: kf-fade-in 0.3s इझी-आउट; }
.टूलटिप { ॲनिमेशन: kf-fade-in 0.2s इझी-इन-आउट; }
.सूचना { ॲनिमेशन: kf-fade-in 0.5s इझी-आउट; }
पेन कीफ्रेम टोकन्स पहा - डेमो 2 [फोर्क केलेले] अमित शीन. टीप: आम्ही आमच्या सर्व @keyframes नावांमध्ये kf- उपसर्ग वापरत आहोत. हा उपसर्ग नेमस्पेस म्हणून काम करतो जो प्रकल्पातील विद्यमान ॲनिमेशनसह नामकरण विरोधाभास प्रतिबंधित करतो आणि हे कीफ्रेम आमच्या कीफ्रेम टोकन फाइलमधून आल्याचे लगेच स्पष्ट करते. डायनॅमिक स्लाइड बनवणे kf-fade-in keyframes छान काम करतात कारण ते सोपे आहे आणि त्यात गोंधळ घालायला जागा नाही. इतर ॲनिमेशनमध्ये, तथापि, आम्हाला अधिक गतिमान असणे आवश्यक आहे आणि येथे आम्ही CSS सानुकूल गुणधर्मांच्या प्रचंड शक्तीचा लाभ घेऊ शकतो. विखुरलेल्या स्थिर ॲनिमेशनच्या तुलनेत कीफ्रेम टोकन खरोखरच चमकतात. चला एक सामान्य परिस्थिती घेऊ: "स्लाइड-इन" ॲनिमेशन. पण कुठून आत सरकायचे? उजवीकडून 100px? डावीकडून ५०%? ते स्क्रीनच्या शीर्षस्थानावरून प्रविष्ट केले पाहिजे? किंवा कदाचित तळापासून आत फ्लोट? बऱ्याच शक्यता, परंतु प्रत्येक दिशा आणि प्रत्येक भिन्नतेसाठी स्वतंत्र कीफ्रेम तयार करण्याऐवजी, आम्ही एक लवचिक टोकन तयार करू शकतो जो सर्व परिस्थितींशी जुळवून घेतो: /* * स्लाइड इन - दिशात्मक स्लाइड ॲनिमेशन * दिशा नियंत्रित करण्यासाठी --kf-slide-from वापरा * डीफॉल्ट: डावीकडून स्लाइड करा (-100%) *वापर: * ॲनिमेशन: kf-स्लाइड-इन 0.3s इझी-आउट; * --kf-slide-from: -100px 0; // डावीकडून स्लाइड करा * --kf-slide-from: 100px 0; // उजवीकडून स्लाइड करा * --kf-slide-from: 0 -50px; // वरून स्लाइड करा */
@keyframes kf-slide-in { कडून { भाषांतर करा: var(--kf-slide-from, -100% 0); } ते { भाषांतर: 0 0; } }
आता आम्ही हे सिंगल @keyframes टोकन कोणत्याही स्लाइड दिशानिर्देशासाठी वापरु शकतो --kf-slide-from सानुकूल गुणधर्म बदलून: साइडबार { ॲनिमेशन: kf-स्लाइड-इन 0.3s इझी-आउट; /* डीफॉल्ट मूल्य वापरते: डावीकडून स्लाइड */ }
.सूचना { ॲनिमेशन: kf-slide-in 0.4s इझी-आउट; --kf-slide-from: 0 -50px; /* वरून स्लाइड */ }
.modal { ॲनिमेशन: kf-fade-in 0.5s, kf-स्लाइड-इन 0.5s क्यूबिक-बेझियर(0.34, 1.56, 0.64, 1); --kf-slide-from: 50px 50px; /* तळापासून उजवीकडे स्लाइड करा */ }
सातत्य राखताना हा दृष्टिकोन आम्हाला अविश्वसनीय लवचिकता देतो. एक कीफ्रेम घोषणा, अनंत शक्यता. पेन कीफ्रेम टोकन्स पहा - डेमो 3 [फोर्क केलेले] अमित शीन. आणि जर आम्हाला आमची ॲनिमेशन आणखी लवचिक बनवायची असेल, "स्लाइड-आउट" प्रभावांना देखील अनुमती देऊन, आम्ही करू शकतोसानुकूल मालमत्तेमध्ये फक्त --kf-slide-जोडा, जे आपण पुढील विभागात पाहणार आहोत. द्विदिशात्मक झूम कीफ्रेम्स आणखी एक सामान्य ॲनिमेशन जे सर्व प्रकल्पांमध्ये डुप्लिकेट केले जाते ते म्हणजे "झूम" प्रभाव. टोस्ट मेसेजसाठी सूक्ष्म स्केल-अप असो, मॉडेल्ससाठी नाट्यमय झूम-इन असो किंवा हेडिंगसाठी सौम्य स्केल-डाउन इफेक्ट असो, झूम ॲनिमेशन सर्वत्र असतात. प्रत्येक स्केल व्हॅल्यूसाठी स्वतंत्र कीफ्रेम तयार करण्याऐवजी, kf-झूम कीफ्रेमचा एक लवचिक संच तयार करूया:
/* * झूम - स्केल ॲनिमेशन * स्केल व्हॅल्यू नियंत्रित करण्यासाठी --kf-zoom-from आणि --kf-zoom-to वापरा * डीफॉल्ट: 80% ते 100% (0.8 ते 1) पर्यंत झूम *वापर: * ॲनिमेशन: kf-झूम 0.2s इझी-आउट; * --kf-झूम-पासून: 0.5; --kf-झूम-टू: 1; // 50% ते 100% पर्यंत झूम करा * --kf-झूम-प्रेम: 1; --kf-झूम-टू: 0; // 100% ते 0% पर्यंत झूम करा * --kf-झूम-प्रेम: 1; --kf-झूम-टू: 1.1; // 100% ते 110% पर्यंत झूम करा */
@keyframes kf-झूम { कडून { स्केल: var(-kf-zoom-from, 0.8); } ते { स्केल: var(-kf-झूम-टू, 1); } }
एका व्याख्येसह, आम्ही आवश्यक असलेली कोणतीही झूम विविधता प्राप्त करू शकतो: .टोस्ट { ॲनिमेशन: kf-slide-in 0.2s, kf-झूम 0.4s इझी-आउट; --kf-slide-from: 0 100%; /* वरून स्लाइड */ /* डीफॉल्ट झूम वापरते: 80% ते 100% पर्यंत स्केल */ }
.modal { ॲनिमेशन: kf-zoom 0.3s क्यूबिक-बेझियर(0.34, 1.56, 0.64, 1); --kf-zoom-from: 0; /* 0% ते 100% पर्यंत नाट्यमय झूम */ }
.शीर्षक { ॲनिमेशन: kf-fade-in 2s, kf-zoom 2s सहज-इन; --kf-झूम-पासून: 1.2; --kf-झूम-टू: 0.8; /* सौम्य स्केल खाली */ }
0.8 (80%) चे डीफॉल्ट बहुतेक UI घटकांसाठी उत्तम प्रकारे कार्य करते, जसे की टोस्ट संदेश आणि कार्ड, तरीही विशेष प्रकरणांसाठी सानुकूलित करणे सोपे आहे. पेन कीफ्रेम टोकन्स पहा - डेमो 4 [फोर्क केलेले] अमित शीन. आपण अलीकडील उदाहरणांमध्ये काहीतरी मनोरंजक लक्षात घेतले असेल: आम्ही ॲनिमेशन एकत्र करत आहोत. @keyframes टोकन्ससह काम करण्याचा एक महत्त्वाचा फायदा म्हणजे ते एकमेकांशी अखंडपणे समाकलित करण्यासाठी डिझाइन केलेले आहेत. ही गुळगुळीत रचना हेतुपुरस्सर आहे, अपघाती नाही. आम्ही ॲनिमेशन रचनेवर नंतर अधिक तपशीलवार चर्चा करू, ज्यात ते समस्याप्रधान होऊ शकतात, परंतु बहुतेक संयोजन सरळ आणि अंमलबजावणीसाठी सोपे आहेत. टीप: हा लेख लिहिताना, आणि कदाचित तो लिहिल्यामुळे, मी स्वतःला प्रवेश ॲनिमेशनच्या संपूर्ण कल्पनेवर पुनर्विचार करताना आढळले. CSS मधील सर्व अलीकडील प्रगतीसह, आम्हाला अद्याप त्यांची गरज आहे का? सुदैवाने, ॲडम अर्गिलने त्याच प्रश्नांचा शोध घेतला आणि ते त्याच्या ब्लॉगमध्ये उत्कृष्टपणे व्यक्त केले. हे येथे लिहिलेल्या गोष्टींचा विरोध करत नाही, परंतु हे विचारात घेण्यासारखे एक दृष्टीकोन सादर करते, विशेषत: जर तुमचे प्रकल्प प्रवेशद्वार ॲनिमेशनवर जास्त अवलंबून असतील. सतत ॲनिमेशन प्रवेशद्वार ॲनिमेशन्स, जसे की “फेड”, “स्लाइड” आणि “झूम” एकदा होतात आणि नंतर थांबतात, सतत ॲनिमेशन लक्ष वेधण्यासाठी किंवा चालू क्रियाकलाप सूचित करण्यासाठी अनिश्चित काळासाठी लूप करतात. मला आढळणारे दोन सर्वात सामान्य सतत ॲनिमेशन म्हणजे “स्पिन” (इंडिकेटर लोड करण्यासाठी) आणि “पल्स” (महत्त्वाचे घटक हायलाइट करण्यासाठी). जेव्हा कीफ्रेम टोकन तयार करण्याची वेळ येते तेव्हा हे ॲनिमेशन अद्वितीय आव्हाने सादर करतात. प्रवेशद्वार ॲनिमेशनच्या विपरीत जे सामान्यत: एका राज्यातून दुसऱ्या राज्यात जातात, सतत ॲनिमेशन त्यांच्या वर्तन पद्धतींमध्ये अत्यंत सानुकूलित असणे आवश्यक आहे. स्पिन डॉक्टर प्रत्येक प्रकल्प एकाधिक स्पिन ॲनिमेशन वापरत असल्याचे दिसते. काही घड्याळाच्या दिशेने फिरतात तर काही घड्याळाच्या उलट दिशेने. काही एकच 360-डिग्री रोटेशन करतात, तर काही वेगवान प्रभावासाठी अनेक वळण करतात. प्रत्येक भिन्नतेसाठी स्वतंत्र कीफ्रेम तयार करण्याऐवजी, सर्व परिस्थिती हाताळणारी एक लवचिक फिरकी तयार करूया:
/* * स्पिन - रोटेशन ॲनिमेशन * रोटेशन रेंज नियंत्रित करण्यासाठी --kf-spin-from आणि --kf-spin-to वापरा * रोटेशन रक्कम नियंत्रित करण्यासाठी --kf-स्पिन-वळण वापरा * डीफॉल्ट: 0deg ते 360deg फिरते (1 पूर्ण रोटेशन) *वापर: * ॲनिमेशन: kf-स्पिन 1s रेखीय अनंत; * --kf-स्पिन-वळण: 2; // 2 पूर्ण रोटेशन * --kf-स्पिन-प्रेम: 0deg; --kf-स्पिन-टू: 180deg; // अर्धा रोटेशन * --kf-स्पिन-प्रेम: 0deg; --kf-स्पिन-टू: -360deg; // घड्याळाच्या उलट दिशेने */
@keyframes kf-स्पिन { कडून { फिरवा: var(--kf-स्पिन-from, 0deg); } ते { फिरवा: कॅल्क(var(--kf-स्पिन-पासून, 0deg) + var(--kf-स्पिन-टू, 360deg) * var(--kf-स्पिन-वळण, 1)); } }
आता आम्हाला आवडणारी कोणतीही फिरकी विविधता तयार करू शकतो:
.लोडिंग-स्पिनर { ॲनिमेशन: kf-स्पिन 1s रेखीय अनंत; /* डीफॉल्ट वापरते: 0deg ते 360deg फिरते */ }
.फास्ट-लोडर { ॲनिमेशन: kf-स्पिन 1.2s सहज-इन-आउट अनंत पर्यायी; --kf-स्पिन-वळण: 3; /* प्रति चक्र प्रत्येक दिशेसाठी 3 पूर्ण रोटेशन*/ }
.स्टेपेड-रिव्हर्स { ॲनिमेशन: kf-स्पिन 1.5s चरण(8) अनंत; --kf-स्पिन-टू: -360deg; /* घड्याळाच्या उलट दिशेने */ }
.सूक्ष्म वळवळ { ॲनिमेशन: kf-स्पिन 2s सहज-इन-आउट अनंत पर्यायी; --kf-स्पिन-पासून: -16deg; --kf-स्पिन-ते: 32deg; /* 36 डिग्री हलवा: -18 डिग्री आणि +18 डिग्री दरम्यान */ }
पेन कीफ्रेम टोकन्स पहा - डेमो 5 [फोर्क केलेले] अमित शीन. या दृष्टिकोनाचे सौंदर्य हे आहे की समान कीफ्रेम्स स्पिनर लोड करण्यासाठी, फिरणारे चिन्ह, विगल इफेक्ट्स आणि अगदी जटिल मल्टी-टर्न ॲनिमेशनसाठी कार्य करतात. पल्स विरोधाभास पल्स ॲनिमेशन अधिक अवघड आहेत कारण ते भिन्न गुणधर्म "पल्स" करू शकतात. काही स्केल पल्स करतात, काही अपारदर्शकता आणि काही नाडी रंग गुणधर्म जसे की चमक किंवा संपृक्तता. प्रत्येक मालमत्तेसाठी स्वतंत्र कीफ्रेम तयार करण्याऐवजी, आम्ही कोणत्याही CSS गुणधर्मासह कार्य करणाऱ्या कीफ्रेम तयार करू शकतो. स्केल आणि अपारदर्शकता पर्यायांसह पल्स कीफ्रेमचे उदाहरण येथे आहे:
/* * पल्स - स्पंदन ॲनिमेशन * स्केल श्रेणी नियंत्रित करण्यासाठी --kf-pulse-scale-from आणि --kf-pulse-scale-to वापरा अपारदर्शकता श्रेणी नियंत्रित करण्यासाठी --kf-pulse-opacity-from आणि --kf-pulse-opacity-to वापरा * डीफॉल्ट: नाडी नाही (सर्व मूल्ये 1) *वापर: * ॲनिमेशन: kf-pulse 2s सहज-इन-आउट अनंत पर्यायी; * --kf-पल्स-स्केल-प्रेम: 0.95; --kf-पल्स-स्केल-टू: 1.05; // स्केल पल्स * --kf-पल्स-अपारदर्शकता-पासून: 0.7; --kf-पल्स-अपारदर्शकता-ते: 1; // अपारदर्शकता नाडी */
@keyframes केएफ-पल्स { कडून { स्केल: var(-kf-नाडी-स्केल-फ्रॉम, 1); अपारदर्शकता: var(--kf-पल्स-अपारदर्शकता-from, 1); } ते { स्केल: var(--kf-पल्स-स्केल-टू, 1); अपारदर्शकता: var(--kf-पल्स-अपारदर्शकता-ते, 1); } }
हे एक लवचिक नाडी तयार करते जे एकाधिक गुणधर्मांना सजीव करू शकते: .कॉल-टू-ऍक्शन { ॲनिमेशन: kf-pulse 0.6s infinite alternate; --kf-पल्स-अपारदर्शकता-पासून: 0.5; /* अपारदर्शकता पल्स */ }
.notification-dot { ॲनिमेशन: kf-pulse 0.6s सहज-इन-आउट अनंत पर्यायी; --kf-पल्स-स्केल-पासून: 0.9; --kf-पल्स-स्केल-टू: 1.1; /* स्केल पल्स */ }
.text-हायलाइट { ॲनिमेशन: kf-pulse 1.5s सहज-आउट अनंत; --kf-पल्स-स्केल-पासून: 0.8; --kf-पल्स-अपारदर्शकता-पासून: 0.2; /* स्केल आणि अपारदर्शकता पल्स */ }
पेन कीफ्रेम टोकन्स पहा - डेमो 6 [फोर्क केलेले] अमित शीन. ही एकल kf-पल्स कीफ्रेम सानुकूलित करणे सोपे असताना सूक्ष्म लक्ष वेधण्यापासून ते नाट्यमय हायलाइट्सपर्यंत सर्वकाही हाताळू शकते. प्रगत सुलभता कीफ्रेम टोकन्स वापरण्याबद्दलची एक उत्तम गोष्ट म्हणजे आमची ॲनिमेशन लायब्ररी विस्तृत करणे आणि प्रभाव प्रदान करणे किती सोपे आहे जे बहुतेक विकसक सुरवातीपासून लिहिण्यास त्रास देत नाहीत, जसे की लवचिक किंवा बाउन्स. येथे साध्या “बाउन्स” कीफ्रेम टोकनचे उदाहरण आहे जे जंप उंची नियंत्रित करण्यासाठी कस्टम गुणधर्मातून --kf-bounce- वापरते. /* * बाऊन्स - बाऊन्सिंग एंट्रन्स ॲनिमेशन * जंप उंची नियंत्रित करण्यासाठी --kf-bounce-from वापरा * डीफॉल्ट: 100vh वरून उडी (स्क्रीन बंद) *वापर: * ॲनिमेशन: kf-bounce 3s सहज-इन; * --kf-bounce-from: 200px; // 200px उंचीवरून उडी */
@keyframes kf-bounce { 0% { भाषांतर करा: 0 calc(var(-kf-bounce-from, 100vh) * -1); }
३४% { भाषांतर करा: 0 calc(var(-kf-bounce-from, 100vh) * -0.4); }
५५% { भाषांतर करा: 0 calc(var(-kf-bounce-from, 100vh) * -0.2); }
७२% { भाषांतर करा: 0 calc(var(-kf-bounce-from, 100vh) * -0.1); }
८५% { भाषांतर करा: 0 calc(var(-kf-bounce-from, 100vh) * -0.05); }
९४% { भाषांतर करा: 0 calc(var(-kf-bounce-from, 100vh) * -0.025); }
९९% { भाषांतर करा: 0 calc(var(-kf-bounce-from, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { भाषांतर: 0 0; ॲनिमेशन-टाइमिंग-फंक्शन: सहज-आऊट; } }
कीफ्रेममधील गणनेमुळे “लवचिक” सारखे ॲनिमेशन थोडे अवघड आहेत. आपल्याला --kf-elastic-from-X आणि --kf-elastic-from-Y स्वतंत्रपणे परिभाषित करणे आवश्यक आहे (दोन्ही पर्यायी आहेत), आणि ते एकत्रितपणे आपल्याला स्क्रीनवरील कोणत्याही बिंदूपासून एक लवचिक प्रवेशद्वार तयार करू देतात.
/* * लवचिक इन - लवचिक प्रवेश ॲनिमेशन * प्रारंभ स्थिती नियंत्रित करण्यासाठी --kf-elastic-from-X आणि --kf-elastic-from-Y वापरा * डीफॉल्ट: शीर्ष केंद्रातून प्रवेश करते (0, -100vh) *वापर: * ॲनिमेशन: kf-eastic-in 2s इझी-इन-आउट दोन्ही; * --kf-eastic-from-X: -50px; * --kf-eastic-from-Y: -200px; // (-50px, -200px) पासून प्रविष्ट करा */
@keyframes kf-elastic-in { 0% { भाषांतर करा: calc(var(-kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
१६% { भाषांतर करा: calc(var(-kf-elastic-from-X, -50vw) * -0.3227) calc(var(--kf-elastic-from-Y, 0px) * -0.3227); }
२८% { भाषांतर: calc(var(-kf-elastic-from-X, -50vw) * ०.१३१२)calc(var(-kf-eastic-from-Y, 0px) * 0.1312); }
४४% { भाषांतर करा: calc(var(-kf-elastic-from-X, -50vw) * -0.0463) calc(var(--kf-elastic-from-Y, 0px) * -0.0463); }
५९% { भाषांतर करा: calc(var(-kf-elastic-from-X, -50vw) * 0.0164) calc(var(--kf-elastic-from-Y, 0px) * 0.0164); }
७३% { भाषांतर करा: calc(var(-kf-elastic-from-X, -50vw) * -0.0058) calc(var(--kf-elastic-from-Y, 0px) * -0.0058); }
८८% { भाषांतर करा: calc(var(-kf-elastic-from-X, -50vw) * 0.0020) calc(var(--kf-elastic-from-Y, 0px) * 0.0020); }
100% { भाषांतर: 0 0; } }
हा दृष्टीकोन केवळ एकच सानुकूल गुणधर्म बदलून, आमच्या संपूर्ण प्रोजेक्टमध्ये प्रगत कीफ्रेम्स पुन्हा वापरणे आणि सानुकूलित करणे सोपे करते.
.बाउन्स-आणि-झूम { ॲनिमेशन: kf-bounce 3s सहज-इन, kf-zoom 3s रेखीय; --kf-zoom-from: 0; }
.बाउन्स आणि स्लाइड { animation-composition: जोडा; /* दोन्ही ॲनिमेशन भाषांतर वापरतात */ ॲनिमेशन: kf-bounce 3s सहज-इन, kf-slide-in 3s इझी-आउट; --kf-slide-from: -200px; }
.लवचिक-इन { ॲनिमेशन: kf-eastic-in 2s इझी-इन-आउट दोन्ही; }
पेन कीफ्रेम टोकन्स पहा - डेमो 7 [फोर्क केलेले] अमित शीन. या क्षणापर्यंत, आम्ही स्मार्ट आणि कार्यक्षम मार्गाने कीफ्रेम कसे एकत्र करू शकतो हे आम्ही पाहिले आहे. अर्थात, तुम्हाला तुमच्या प्रोजेक्टच्या गरजा अधिक चांगल्या प्रकारे बसवण्यासाठी गोष्टी बदलण्याची इच्छा असू शकते, परंतु आम्ही अनेक सामान्य ॲनिमेशन आणि दैनंदिन वापरातील उदाहरणे कव्हर केली आहेत. आणि या कीफ्रेम टोकन्ससह, आमच्याकडे आता संपूर्ण प्रोजेक्टमध्ये सातत्यपूर्ण, देखरेख करण्यायोग्य ॲनिमेशन तयार करण्यासाठी शक्तिशाली बिल्डिंग ब्लॉक्स आहेत. यापुढे डुप्लिकेट केलेल्या कीफ्रेम नाहीत, यापुढे जागतिक व्याप्ती संघर्ष नाहीत. आमच्या सर्व ॲनिमेशन गरजा हाताळण्यासाठी फक्त एक स्वच्छ, सोयीस्कर मार्ग. पण खरा प्रश्न आहे: आपण हे बिल्डिंग ब्लॉक्स एकत्र कसे तयार करू? हे सर्व एकत्र ठेवणे आम्ही पाहिले आहे की मूलभूत कीफ्रेम टोकन एकत्र करणे सोपे आहे. आम्हाला पहिल्या ॲनिमेशनची व्याख्या करण्यासाठी, दुसरे ॲनिमेशन परिभाषित करण्यासाठी, आवश्यकतेनुसार व्हेरिएबल्स सेट करण्यासाठी काही विशेष गरज नाही, आणि तेच. /* फेड इन + स्लाइड इन */ .टोस्ट { ॲनिमेशन: kf-fade-in 0.4s, kf-स्लाइड-इन 0.4s क्यूबिक-बेझियर(0.34, 1.56, 0.64, 1); --kf-slide-from: 0 40px; }
/* झूम इन + फेड इन */ .modal { ॲनिमेशन: kf-fade-in 0.3s, kf-झूम 0.3s क्यूबिक-बेझियर(0.34, 1.56, 0.64, 1); --kf-झूम-प्रेम: ०.७; --kf-झूम-टू: 1; }
/* स्लाइड इन + पल्स */ .सूचना { ॲनिमेशन: kf-slide-in 0.5s, kf-pulse 1.2s सहज-इन-आउट अनंत पर्यायी; --kf-slide-from: -100px 0; --kf-पल्स-स्केल-पासून: 0.95; --kf-पल्स-स्केल-टू: 1.05; }
हे संयोजन सुंदरपणे कार्य करतात कारण प्रत्येक ॲनिमेशन वेगळ्या गुणधर्मांना लक्ष्य करते: अपारदर्शकता, रूपांतर (अनुवाद/स्केल), इ. परंतु काहीवेळा संघर्ष होतात आणि त्यांना का आणि कसे सामोरे जावे हे आम्हाला माहित असणे आवश्यक आहे. जेव्हा दोन ॲनिमेशन समान गुणधर्म ॲनिमेट करण्याचा प्रयत्न करतात — उदाहरणार्थ, दोन्ही ॲनिमेटिंग स्केल किंवा दोन्ही ॲनिमेटिंग अपारदर्शकता — परिणाम तुमच्या अपेक्षेप्रमाणे होणार नाही. डीफॉल्टनुसार, त्या मालमत्तेवर प्रत्यक्षात फक्त एक ॲनिमेशन लागू केले जाते, जे ॲनिमेशन सूचीमधील शेवटचे असते. CSS एकाच मालमत्तेवर एकाधिक ॲनिमेशन कसे हाताळते याची ही मर्यादा आहे. उदाहरणार्थ, हे हेतूनुसार कार्य करणार नाही कारण फक्त kf-pulse ॲनिमेशन लागू होईल. .खराब कॉम्बो { ॲनिमेशन: kf-झूम 0.5s फॉरवर्ड, केएफ-पल्स 1.2s अनंत पर्यायी; --kf-झूम-पासून: 0.5; --kf-झूम-टू: 1.2; --kf-पल्स-स्केल-पासून: 0.8; --kf-पल्स-स्केल-टू: 1.1; }
ॲनिमेशन ॲडिशन एकाच मालमत्तेवर परिणाम करणारे एकाधिक ॲनिमेशन हाताळण्याचा सर्वात सोपा आणि थेट मार्ग म्हणजे ॲनिमेशन-रचना गुणधर्म वापरणे. वरील शेवटच्या उदाहरणात, kf-pulse ॲनिमेशन kf-zoom ॲनिमेशनची जागा घेते, त्यामुळे आम्हाला प्रारंभिक झूम दिसणार नाही आणि 1.2 चे अपेक्षित स्केल मिळणार नाही. ॲनिमेशन-रचना जोडण्यासाठी सेट करून, आम्ही ब्राउझरला दोन्ही ॲनिमेशन एकत्र करण्यास सांगतो. हे आम्हाला हवे ते परिणाम देते. .component-दोन { animation-composition: जोडा; }
पेन कीफ्रेम टोकन्स पहा - डेमो 8 [फोर्क केलेले] अमित शीन. हा दृष्टीकोन बऱ्याच प्रकरणांसाठी चांगला कार्य करतो जेथे आम्ही समान मालमत्तेवर प्रभाव एकत्र करू इच्छितो. जेव्हा आपल्याला स्थिर गुणधर्म मूल्यांसह ॲनिमेशन एकत्र करण्याची आवश्यकता असते तेव्हा हे देखील उपयुक्त आहे. उदाहरणार्थ, आमच्याकडे एखादे घटक असल्यास जे भाषांतर गुणधर्म वापरते ते आम्हाला पाहिजे तेथे ठेवण्यासाठी, आणि नंतर आम्ही ते kf-slide-in keyframes सह ॲनिमेट करू इच्छित असल्यास, आम्हाला ॲनिमेशन-कंपोझिशनशिवाय एक ओंगळ दृश्यमान उडी मिळते. पेन कीफ्रेम टोकन्स पहा - डेमो 9 [फोर्क केलेले] अमित शीन. ॲनिमेशन-रचना जोडण्यासाठी सेट केल्यामुळे, ॲनिमेशन विद्यमान सह सहजतेने एकत्र केले जातेट्रान्सफॉर्म, त्यामुळे घटक जागेवर राहतो आणि अपेक्षेप्रमाणे ॲनिमेट करतो. ॲनिमेशन स्टॅगर एकापेक्षा जास्त ॲनिमेशन हाताळण्याचा आणखी एक मार्ग म्हणजे त्यांना "स्टॅगर" करणे — म्हणजे, पहिले ॲनिमेशन पूर्ण झाल्यानंतर थोडेसे दुसरे ॲनिमेशन सुरू करा. प्रत्येक बाबतीत काम करणारा हा उपाय नाही, परंतु जेव्हा आपल्याकडे प्रवेशद्वार ॲनिमेशन आणि त्यानंतर सतत ॲनिमेशन असेल तेव्हा ते उपयुक्त ठरते. /* फेड इन + अपारदर्शकता पल्स */ .सूचना { ॲनिमेशन: kf-fade-in 2s इझी-आउट, kf-नाडी 0.5s 2s सहज-इन-आउट अनंत पर्यायी; --kf-पल्स-अपारदर्शकता-ते: 0.5; }
पेन कीफ्रेम टोकन्स पहा - डेमो 10 [फोर्क केलेले] अमित शीन. ऑर्डर मॅटर्स आम्ही ज्या ॲनिमेशनसह काम करतो त्याचा मोठा भाग ट्रान्सफॉर्म गुणधर्म वापरतो. बर्याच बाबतीत, हे फक्त अधिक सोयीस्कर आहे. ट्रान्सफॉर्म ॲनिमेशन्स GPU-प्रवेगक असू शकतात म्हणून त्याचा कार्यप्रदर्शन फायदा देखील आहे. परंतु जर आपण परिवर्तनांचा वापर केला तर आपण हे स्वीकारले पाहिजे की आपण आपले परिवर्तन ज्या क्रमाने करतो ते महत्त्वाचे आहे. भरपूर. आतापर्यंत आमच्या कीफ्रेममध्ये, आम्ही वैयक्तिक रूपांतरे वापरली आहेत. चष्म्यानुसार, हे नेहमी एका निश्चित क्रमाने लागू केले जातात: प्रथम, घटक अनुवादित होतो, नंतर फिरवा, नंतर स्केल. हे अर्थपूर्ण आहे आणि आपल्यापैकी बहुतेकांची अपेक्षा आहे. तथापि, जर आपण ट्रान्सफॉर्म गुणधर्माचा वापर केला, तर फंक्शन्स ज्या क्रमाने लिहिल्या जातात त्या क्रमाने ते लागू केले जातात. या प्रकरणात, जर आपण X-अक्षावर 100 पिक्सेल एखादी गोष्ट हलवली आणि नंतर ती 45 अंशांनी फिरवली, तर ते प्रथम 45 अंशांनी फिरवून नंतर 100 पिक्सेल हलविण्यासारखे नाही. /* गुलाबी चौरस: प्रथम भाषांतर करा, नंतर फिरवा */ .example-one { ट्रान्सफॉर्म: translateX(100px) rotate(45deg); }
/* हिरवा चौकोन: प्रथम फिरवा, नंतर भाषांतर करा */ .example-दोन { ट्रान्सफॉर्म: फिरवा(45deg) translateX(100px); }
पेन कीफ्रेम टोकन्स पहा - डेमो 11 [फोर्क केलेले] अमित शीन. परंतु ट्रान्सफॉर्म ऑर्डरनुसार, सर्व वैयक्तिक ट्रान्सफॉर्म्स — कीफ्रेम टोकन्ससाठी आम्ही वापरलेली प्रत्येक गोष्ट — ट्रान्सफॉर्म फंक्शन्सच्या आधी घडते. याचा अर्थ तुम्ही ट्रान्सफॉर्म प्रॉपर्टीमध्ये जे काही सेट केले आहे ते ॲनिमेशननंतर होईल. परंतु तुम्ही सेट केल्यास, उदाहरणार्थ, kf-स्पिन कीफ्रेमसह भाषांतर करा, भाषांतर ॲनिमेशनच्या आधी होईल. अजून गोंधळलेला?! यामुळे अशा परिस्थिती उद्भवतात जेथे स्थिर मूल्ये समान ॲनिमेशनसाठी भिन्न परिणाम देऊ शकतात, जसे की खालील बाबतीत:
/* दोन्ही फिरकीपटूंसाठी सामान्य ॲनिमेशन */ .स्पिनर { ॲनिमेशन: kf-स्पिन 1s रेखीय अनंत; }
/* गुलाबी स्पिनर: फिरण्यापूर्वी भाषांतर करा (वैयक्तिक रूपांतर) */ .स्पिनर-गुलाबी { भाषांतर: 100% 50%; }
/* हिरवा स्पिनर: फिरवा नंतर भाषांतर करा (कार्य क्रम) */ .स्पिनर-हिरवा { रूपांतर: भाषांतर (100%, 50%); }
पेन कीफ्रेम टोकन्स पहा - डेमो 12 [फोर्क केलेले] अमित शीन. तुम्ही पाहू शकता की पहिल्या स्पिनरला (गुलाबी) भाषांतर मिळते जे kf-स्पिनच्या फिरण्याआधी घडते, म्हणून तो प्रथम त्याच्या जागी फिरतो आणि नंतर फिरतो. दुसऱ्या स्पिनरला (हिरव्या) एक translate() फंक्शन मिळते जे वैयक्तिक रूपांतरानंतर होते, म्हणून घटक प्रथम फिरतो, नंतर त्याच्या वर्तमान कोनाच्या सापेक्ष हलतो आणि आम्हाला तो विस्तृत ऑर्बिट प्रभाव मिळतो. नाही, हा बग नाही. CSS बद्दल आपल्याला माहित असणे आवश्यक असलेल्या गोष्टींपैकी ही एक आहे आणि एकाधिक ॲनिमेशन किंवा एकाधिक परिवर्तनांसह कार्य करताना लक्षात ठेवा. आवश्यक असल्यास, तुम्ही kf-spin-alt keyframes चा अतिरिक्त संच देखील तयार करू शकता जे rotate() फंक्शन वापरून घटक फिरवतात. कमी गती आणि आम्ही पर्यायी कीफ्रेम्सबद्दल बोलत असताना, आम्ही "नो ॲनिमेशन" पर्यायाकडे दुर्लक्ष करू शकत नाही. कीफ्रेम टोकन्स वापरण्याचा सर्वात मोठा फायदा म्हणजे प्रवेशयोग्यता बेक केली जाऊ शकते आणि ते प्रत्यक्षात करणे खूप सोपे आहे. प्रवेशयोग्यता लक्षात घेऊन आमचे कीफ्रेम डिझाइन करून, आम्ही हे सुनिश्चित करू शकतो की जे वापरकर्ते कमी गतीला प्राधान्य देतात त्यांना अतिरिक्त काम किंवा कोड डुप्लिकेशन न करता नितळ, कमी विचलित करणारा अनुभव मिळेल. "रिड्युस्ड मोशन" चा अचूक अर्थ एका ॲनिमेशनमधून दुसऱ्या ॲनिमेशनमध्ये आणि प्रोजेक्टपासून प्रोजेक्टमध्ये थोडा बदलू शकतो, परंतु लक्षात ठेवण्यासाठी येथे काही महत्त्वाचे मुद्दे आहेत: कीफ्रेम नि:शब्द करत आहे काही ॲनिमेशन मऊ केले जाऊ शकतात किंवा मंद केले जाऊ शकतात, तर इतर काही आहेत जे कमी गतीची विनंती केल्यावर पूर्णपणे अदृश्य व्हायला हवे. पल्स ॲनिमेशन हे एक उत्तम उदाहरण आहे. हे ॲनिमेशन कमी गतीच्या मोडमध्ये चालत नाहीत याची खात्री करण्यासाठी, आम्ही त्यांना योग्य मीडिया क्वेरीमध्ये गुंडाळू शकतो.
@media (prefers-reduced-motion: no-preference) { @keyfrmaes kf-नाडी { कडून { स्केल: var(-kf-नाडी-स्केल-फ्रॉम, 1); अपारदर्शकता: var(--kf-पल्स-अपारदर्शकता-from, 1); } ते { स्केल: var(--kf-पल्स-स्केल-टू, 1); अपारदर्शकता:var(-kf-पल्स-अपारदर्शकता-ते, 1); } } }
हे सुनिश्चित करते की ज्या वापरकर्त्यांनी prefers-reduced-motion कमी करण्यासाठी सेट केले आहे त्यांना ॲनिमेशन दिसणार नाही आणि त्यांना त्यांच्या प्राधान्यांशी जुळणारा अनुभव मिळेल. झटपट इन काही कीफ्रेम्स आहेत ज्या आम्ही फक्त काढू शकत नाही, जसे की प्रवेशद्वार ॲनिमेशन. मूल्य बदलले पाहिजे, सजीव होणे आवश्यक आहे; अन्यथा, घटकाची योग्य मूल्ये नसतील. परंतु कमी गतीमध्ये, प्रारंभिक मूल्यापासून हे संक्रमण त्वरित असावे. हे साध्य करण्यासाठी, आम्ही कीफ्रेमचा अतिरिक्त संच परिभाषित करू जिथे मूल्य ताबडतोब शेवटच्या स्थितीत जाईल. हे आमचे डीफॉल्ट कीफ्रेम बनतात. त्यानंतर, आम्ही मागील उदाहरणाप्रमाणेच prefers-reduced-motion साठी no-preference वर सेट केलेल्या मीडिया क्वेरीमध्ये नियमित कीफ्रेम जोडू. /* कमी गतीसाठी त्वरित पॉप इन करा */ @keyframes kf-झूम { पासून, { पर्यंत स्केल: var(-kf-झूम-टू, 1); } }
@media (prefers-reduced-motion: no-preference) { /* मूळ झूम कीफ्रेम */ @keyframes kf-झूम { कडून { स्केल: var(-kf-zoom-from, 0.8); } ते { स्केल: var(-kf-झूम-टू, 1); } } }
अशा प्रकारे, जे वापरकर्ते कमी गतीला प्राधान्य देतात ते घटक त्याच्या अंतिम स्थितीत त्वरित दिसून येतील, तर इतर प्रत्येकाला ॲनिमेटेड संक्रमण मिळते. मऊ दृष्टीकोन अशी काही प्रकरणे आहेत जिथे आम्हाला काही हालचाल ठेवायची आहे, परंतु मूळ ॲनिमेशनपेक्षा खूपच मऊ आणि शांत. उदाहरणार्थ, आम्ही हलक्या फेड-इनसह बाउन्स प्रवेशद्वार बदलू शकतो.
@keyframes kf-bounce { /* कमी गतीसाठी सॉफ्ट फेड-इन */ }
@media (prefers-reduced-motion: no-preference) { @keyframes kf-bounce { /* मूळ बाउंस कीफ्रेम */ } }
आता, कमी हालचाल सक्षम असलेल्या वापरकर्त्यांना अजूनही देखावा जाणवतो, परंतु बाउन्स किंवा लवचिक ॲनिमेशनच्या तीव्र हालचालीशिवाय. बिल्डिंग ब्लॉक्सच्या ठिकाणी, त्यांना प्रत्यक्ष कार्यप्रवाहाचा भाग कसा बनवायचा हा पुढील प्रश्न आहे. लवचिक कीफ्रेम लिहिणे ही एक गोष्ट आहे, परंतु एका मोठ्या प्रकल्पात त्यांना विश्वासार्ह बनवण्यासाठी काही धोरणे आवश्यक आहेत जी मला कठीण मार्गाने शिकायची होती. अंमलबजावणी धोरणे आणि सर्वोत्तम पद्धती एकदा आमच्याकडे कीफ्रेम टोकन्सची ठोस लायब्ररी आली की, त्यांना रोजच्या कामात कसे आणायचे हे खरे आव्हान आहे.
सर्व कीफ्रेम एकाच वेळी टाकण्याचा आणि समस्येचे निराकरण झाल्याचे घोषित करण्याचा मोह आहे, परंतु सराव मध्ये मला असे आढळले आहे की सर्वोत्तम परिणाम हळूहळू अवलंब केल्याने येतात. सर्वात सामान्य ॲनिमेशनसह प्रारंभ करा, जसे की फिकट किंवा स्लाइड. हे सोपे विजय आहेत जे मोठ्या पुनर्लेखनाशिवाय त्वरित मूल्य दर्शवतात. नामकरण हा आणखी एक मुद्दा आहे जो लक्ष देण्यास पात्र आहे. एक सुसंगत उपसर्ग किंवा नेमस्पेस हे स्पष्ट करते की कोणते ॲनिमेशन टोकन आहेत आणि कोणते स्थानिक वन-ऑफ आहेत. हे अपघाती टक्कर देखील प्रतिबंधित करते आणि नवीन कार्यसंघ सदस्यांना एका दृष्टीक्षेपात सामायिक केलेली प्रणाली ओळखण्यात मदत करते. दस्तऐवजीकरण कोड इतकेच महत्त्वाचे आहे. प्रत्येक कीफ्रेम टोकनवरील एक छोटी टिप्पणी देखील नंतर अंदाज लावण्याचे तास वाचवू शकते. विकसक टोकन फाइल उघडण्यास सक्षम असावा, त्यांना आवश्यक असलेल्या प्रभावासाठी स्कॅन करू शकतो आणि वापर पॅटर्न थेट त्यांच्या घटकामध्ये कॉपी करू शकतो. लवचिकता या दृष्टिकोनामुळे प्रयत्न करणे योग्य ठरते. समजूतदार सानुकूल गुणधर्म उघड करून, आम्ही सिस्टीम खंडित न करता ॲनिमेशनशी जुळवून घेण्यासाठी संघांना जागा देतो. त्याच वेळी, जास्त गुंतागुंत न करण्याचा प्रयत्न करा. महत्त्वाचे नॉब्स द्या आणि बाकीचे मत ठेवा. शेवटी, प्रवेशयोग्यता लक्षात ठेवा. प्रत्येक ॲनिमेशनला कमी गतीच्या पर्यायाची आवश्यकता नसते, परंतु बरेच जण करतात. या ऍडजस्टमेंटमध्ये लवकर बेक करणे म्हणजे आम्हाला ते नंतर कधीच रिट्रोफिट करावे लागणार नाही आणि ते आमच्या वापरकर्त्यांनी कधीही उल्लेख केला तरीही लक्षात येईल अशी काळजीची पातळी दर्शवते.
माझ्या अनुभवानुसार, आमच्या डिझाईन टोकन वर्कफ्लोचा एक भाग म्हणून कीफ्रेम टोकन हाताळणे त्यांना चिकटवते. एकदा ते जागेवर आल्यानंतर, ते विशेष प्रभाव वाटणे थांबवतात आणि डिझाइन भाषेचा भाग बनतात, उत्पादन कसे हलते आणि प्रतिसाद देते याचा नैसर्गिक विस्तार. गुंडाळणे ॲनिमेशन हे बिल्डिंग इंटरफेसच्या सर्वात आनंददायक भागांपैकी एक असू शकतात, परंतु संरचनेशिवाय, ते निराशेचे सर्वात मोठे स्त्रोत बनू शकतात. कीफ्रेमला टोकन म्हणून हाताळून, तुम्ही असे काहीतरी घेता जे सहसा गोंधळलेले आणि व्यवस्थापित करणे कठीण असते आणि ते स्पष्ट, अंदाज लावता येण्याजोगे प्रणालीमध्ये बदलते. वास्तविक मूल्य फक्त कोडच्या काही ओळी जतन करण्यात नाही. जेव्हा तुम्ही फेड, स्लाइड, झूम किंवा स्पिन वापरता तेव्हा ते संपूर्ण प्रोजेक्टमध्ये कसे वागेल हे तुम्हाला ठाऊक असते. हे लवचिकतेमध्ये आहे जे अंतहीन भिन्नतेच्या गोंधळाशिवाय सानुकूल गुणधर्मांमधून येते. आणि हे म्हणून जोडण्याऐवजी फाउंडेशनमध्ये तयार केलेल्या प्रवेशयोग्यतेमध्ये आहेएक नंतरचा विचार. मी या कल्पना वेगवेगळ्या संघात आणि वेगवेगळ्या कोडबेसमध्ये काम करताना पाहिल्या आहेत आणि नमुना नेहमी सारखाच असतो. टोकन्स बसल्यावर, कीफ्रेम्स युक्तीचा विखुरलेला संग्रह बनणे थांबवतात आणि डिझाइन भाषेचा भाग बनतात. ते उत्पादन अधिक हेतुपुरस्सर, अधिक सुसंगत आणि अधिक जिवंत वाटतात. जर तुम्ही या लेखातून एक गोष्ट घेतली असेल तर ती अशी असू द्या: ॲनिमेशन्स रंग, टायपोग्राफी आणि स्पेसिंगला आम्ही आधीपासून देत असलेल्या काळजी आणि संरचनेसाठी पात्र आहेत. प्रत्येक वेळी जेव्हा तुमचा इंटरफेस हलतो तेव्हा कीफ्रेम टोकनमधील एक छोटी गुंतवणूक फेडते.
