यसलाई चित्रण गर्नुहोस्: तपाईं एउटा नयाँ परियोजनामा सामेल हुनुभयो, कोडबेसमा डुब्नुभयो, र सुरुको केही घण्टा भित्र, तपाईंले निराशाजनक रूपमा परिचित कुरा पत्ता लगाउनुहुन्छ। स्टाइलसिटहरूमा छरिएका, तपाईंले एउटै आधारभूत एनिमेसनको लागि धेरै @keyframes परिभाषाहरू फेला पार्नुहुन्छ। तीन फरक फेड-इन प्रभावहरू, दुई वा तीन स्लाइड भिन्नताहरू, मुट्ठीभर जुम एनिमेसनहरू, र कम्तिमा दुई फरक स्पिन एनिमेसनहरू किनभने, ठीक छ, किन होइन? @keyframes पल्स { बाट { स्केल: 1; } प्रति { स्केल: 1.1; } }
@keyframes ठूलो पल्स { ०%, २०%, १००% { स्केल: 1; } १०%, ४०% { स्केल: 1.2; } }
यदि यो परिदृश्य परिचित छ भने, तपाईं एक्लै हुनुहुन्न। विभिन्न परियोजनाहरूमा मेरो अनुभवमा, मैले डेलिभर गर्न सक्ने सबैभन्दा लगातार द्रुत जीतहरू मध्ये एक किफ्रेमहरू समेकित र मानकीकरण हो। यो यस्तो भरपर्दो ढाँचा भएको छ कि म अब कुनै पनि नयाँ कोडबेसमा मेरो पहिलो कार्यको रूपमा यो सफाईको लागि तत्पर छु। अराजकता पछाडि तर्क जब तपाईं यसको बारेमा सोच्नुहुन्छ यो रिडन्डन्सीले सही अर्थ दिन्छ। हामी सबैले हाम्रो दैनिक काममा समान आधारभूत एनिमेसनहरू प्रयोग गर्छौं: फेडहरू, स्लाइडहरू, जुमहरू, स्पिनहरू, र अन्य सामान्य प्रभावहरू। यी एनिमेसनहरू एकदमै सरल छन्, र काम गर्नको लागि द्रुत @keyframes परिभाषालाई ह्विप गर्न सजिलो छ। केन्द्रीकृत एनिमेसन प्रणाली बिना, विकासकर्ताहरूले स्वाभाविक रूपमा यी किफ्रेमहरू स्क्र्याचबाट लेख्छन्, अनजान कि समान एनिमेसनहरू कोडबेसमा अन्यत्र अवस्थित छन्। यो विशेष गरी सामान्य हुन्छ जब कम्पोनेन्ट-आधारित आर्किटेक्चरहरूमा काम गर्दछ (जुन हामीमध्ये धेरैले यी दिनहरू गर्छौं), किनकि टोलीहरू प्राय: अनुप्रयोगको विभिन्न भागहरूमा समानान्तर रूपमा काम गर्छन्। नतिजा? एनिमेसन अराजकता। सानो समस्या कुञ्जीफ्रेम डुप्लिकेशनको साथ सबैभन्दा स्पष्ट मुद्दाहरू विकास समय बर्बाद र अनावश्यक कोड ब्लोट हुन्। बहु किफ्रेम परिभाषाहरू भनेको आवश्यकताहरू परिवर्तन हुँदा अद्यावधिक गर्न धेरै ठाउँहरू हो। तपाईको फेड एनिमेसनको समय समायोजन गर्न आवश्यक छ? तपाईंले आफ्नो कोडबेसमा प्रत्येक उदाहरण खोज्न आवश्यक छ। सहज कार्यहरू मानकीकरण गर्न चाहनुहुन्छ? सबै विविधताहरू फेला पार्ने शुभकामना। मर्मत बिन्दुहरूको यो गुणनले पनि साधारण एनिमेसन अद्यावधिकहरूलाई समय-उपभोग गर्ने कार्य बनाउँछ। सबैभन्दा ठूलो समस्या यो कीफ्रेम डुप्लिकेशनले सतह मुनि लुकेको धेरै कपटी समस्या सिर्जना गर्दछ: ग्लोबल स्कोप ट्र्याप। कम्पोनेन्ट-आधारित आर्किटेक्चरहरूसँग काम गर्दा पनि, CSS कीफ्रेमहरू सधैं विश्वव्यापी दायरामा परिभाषित हुन्छन्। यसको मतलब सबै किफ्रेमहरू सबै कम्पोनेन्टहरूमा लागू हुन्छन्। सधैं। हो, तपाइँको एनिमेसनले तपाइँको कम्पोनेन्टमा परिभाषित गरेको मुख्य फ्रेमहरू प्रयोग गर्दैन। यसले अन्तिम कुञ्जीफ्रेमहरू प्रयोग गर्दछ जुन ठ्याक्कै उही नामसँग मेल खान्छ जुन ग्लोबल स्कोपमा लोड गरिएको थियो। जबसम्म तपाईंका सबै कुञ्जीफ्रेमहरू समान छन्, यो सानो समस्या जस्तो लाग्न सक्छ। तर जुन क्षण तपाइँ एक विशिष्ट प्रयोग केसको लागि एनिमेसन अनुकूलित गर्न चाहानुहुन्छ, तपाइँ समस्यामा हुनुहुन्छ, वा खराब, तपाइँ तिनीहरूलाई निम्त्याउने एक हुनुहुनेछ। या त तपाइँको एनिमेसनले काम गर्दैन किनकि तपाइँको पछि लोड भएको अर्को कम्पोनेन्ट, तपाइँको किफ्रेमहरू अधिलेखन गर्दै, वा तपाइँको कम्पोनेन्ट अन्तिम लोड हुन्छ र संयोगवश त्यो किफ्रेमको नाम प्रयोग गरेर प्रत्येक अन्य कम्पोनेन्टको लागि एनिमेसन व्यवहार परिवर्तन गर्दछ, र तपाइँले यो महसुस गर्न सक्नुहुन्न। यहाँ एउटा साधारण उदाहरण हो जसले समस्या देखाउँछ: .component-one { /* घटक शैलीहरू */ एनिमेसन: पल्स 1s सहज-इन-आउट अनन्त वैकल्पिक; }
/* यो @keyframes परिभाषाले काम गर्दैन */ @keyframes पल्स { बाट { स्केल: 1; } प्रति { स्केल: 1.1; } }
/* पछि कोडमा... */
.component-2 { /* घटक शैलीहरू */ एनिमेसन: पल्स 1s सहज-इन-आउट अनन्त; }
/* यो कुञ्जीफ्रेमहरू दुवै घटकहरूमा लागू हुनेछ */ @keyframes पल्स { ०%, २०%, १००% { स्केल: 1; } १०%, ४०% { स्केल: 1.2; } }
दुबै कम्पोनेन्टहरूले एउटै एनिमेसन नाम प्रयोग गर्छन्, तर दोस्रो @keyframes परिभाषाले पहिलोलाई ओभरराइट गर्दछ। अब कम्पोनेन्ट-एक र कम्पोनेन्ट-टू दुवैले दोस्रो कीफ्रेमहरू प्रयोग गर्नेछन्, कुन कम्पोनेन्टले कुन कुञ्जीफ्रेमहरू परिभाषित गरे पनि। अमित शीन द्वारा पेन कीफ्रेम टोकनहरू - डेमो १ [फोर्क गरिएको] हेर्नुहोस्। सबैभन्दा खराब भाग? यो प्रायः स्थानीय विकासमा पूर्ण रूपमा काम गर्दछ तर निर्माण प्रक्रियाहरूले तपाईंको स्टाइलसिटहरूको लोडिङ क्रम परिवर्तन गर्दा उत्पादनमा रहस्यमय रूपमा तोड्छ। तपाइँ एनिमेसनको साथ समाप्त हुन्छ जुन कुन कम्पोनेन्टहरू लोड गरिएको छ र कुन अनुक्रममा फरक फरक व्यवहार गर्दछ। समाधान: एकीकृत कीफ्रेमहरू यस अराजकताको जवाफ आश्चर्यजनक रूपमा सरल छ: पूर्वनिर्धारित गतिशील कीफ्रेमहरू साझा स्टाइलसिटमा भण्डारण गरिएका छन्। प्रत्येक कम्पोनेन्टलाई यसको आफ्नै एनिमेसनहरू परिभाषित गर्न दिनुको सट्टा, हामी केन्द्रीकृत कीफ्रेमहरू सिर्जना गर्छौं जुन राम्रोसँग कागजात, सजिलो छ।प्रयोग, मर्मत योग्य, र तपाइँको परियोजना को विशिष्ट आवश्यकताहरु अनुरूप। यसलाई किफ्रेम टोकनको रूपमा सोच्नुहोस्। जसरी हामी रङ र स्पेसिङका लागि टोकनहरू प्रयोग गर्छौं, र हामीमध्ये धेरैले पहिले नै एनिमेसन गुणहरूको लागि टोकनहरू प्रयोग गर्छौं, जस्तै अवधि र सहज कार्यहरू, किन किफ्रेमहरूका लागि टोकनहरू पनि प्रयोग नगर्ने? यो दृष्टिकोणले तपाईले प्रयोग गरिरहनु भएको कुनै पनि हालको डिजाइन टोकन कार्यप्रवाहसँग स्वाभाविक रूपमा एकीकृत हुन सक्छ, दुबै सानो समस्या (कोड डुप्लिकेशन) र ठूला समस्या (ग्लोबल स्कोप द्वन्द्व) लाई एकै पटक समाधान गर्दै। विचार सीधा छ: हाम्रा सबै साझा एनिमेसनहरूको लागि सत्यको एकल स्रोत सिर्जना गर्नुहोस्। यो साझा स्टाइलसिटले हाम्रो परियोजनाले वास्तवमा प्रयोग गर्ने एनिमेसन ढाँचाहरू समावेश गर्ने सावधानीपूर्वक बनाइएको किफ्रेमहरू समावेश गर्दछ। फेड एनिमेसन पहिले नै हाम्रो कोडबेसमा कतै अवस्थित छ कि छैन भनेर अनुमान लगाउनु पर्दैन। अन्य कम्पोनेन्टहरूबाट संयोगवश ओभरराइट गर्ने एनिमेसनहरू छैनन्। तर यहाँ कुञ्जी छ: यी केवल स्थिर प्रतिलिपि-पेस्ट एनिमेसनहरू होइनन्। तिनीहरू CSS अनुकूलन गुणहरू मार्फत गतिशील र अनुकूलन योग्य हुनको लागि डिजाइन गरिएका छन्, हामीलाई स्थिरता कायम राख्न अनुमति दिँदै एनिमेसनहरूलाई विशिष्ट प्रयोगका केसहरूमा अनुकूलन गर्न लचिलोपन भएको अवस्थामा, जस्तै यदि तपाईंलाई एक ठाउँमा थोरै ठूलो "पल्स" एनिमेसन चाहिन्छ भने। पहिलो कीफ्रेम टोकन निर्माण गर्दै हामीले सामना गर्नुपर्ने पहिलो कम झुण्डिएको फलहरू मध्ये एक "फेड-इन" एनिमेसन हो। मेरो भर्खरको परियोजनाहरूमा, मैले एक दर्जन भन्दा बढी फरक फेड-इन परिभाषाहरू फेला पारे, र हो, ती सबैले ० देखि १ सम्म अस्पष्टता एनिमेटेड गरे। त्यसोभए, एउटा नयाँ स्टाइलसिट सिर्जना गरौं, यसलाई kf-tokens.css भन्नुहोस्, यसलाई हाम्रो परियोजनामा आयात गर्नुहोस्, र यसको भित्र उचित टिप्पणीहरू सहित हाम्रा मुख्य फ्रेमहरू राख्नुहोस्। /* keyframes-tokens.css */
/* * फेड इन - फेड प्रवेश एनिमेसन * उपयोग: एनिमेसन: kf-fade-in 0.3s ease-out; */ @keyframes kf-fade-in { बाट { अस्पष्टता: 0; } प्रति { अस्पष्टता: 1; } }
यो एकल @keyframes घोषणाले हाम्रो कोडबेसमा ती सबै छरिएका फेड-इन एनिमेसनहरू प्रतिस्थापन गर्दछ। सफा, सरल, र विश्वव्यापी रूपमा लागू। र अब हामीसँग यो टोकन परिभाषित छ, हामी यसलाई हाम्रो परियोजनामा कुनै पनि घटकबाट प्रयोग गर्न सक्छौं: मोडल { एनिमेसन: kf-fade-in 0.3s सहज-आउट; }
टुलटिप { एनिमेसन: kf-fade-in 0.2s ease-in-out; }
सूचना { एनिमेसन: kf-fade-in 0.5s सहज-आउट; }
अमित शीन द्वारा पेन कीफ्रेम टोकनहरू - डेमो २ [फोर्क गरिएको] हेर्नुहोस्। नोट: हामी हाम्रा सबै @keyframes नामहरूमा kf- उपसर्ग प्रयोग गर्दैछौं। यो उपसर्गले नाम स्थानको रूपमा कार्य गर्दछ जसले परियोजनामा अवस्थित एनिमेसनहरूसँग नामकरण द्वन्द्वलाई रोक्छ र यी कुञ्जीफ्रेमहरू हाम्रो किफ्रेम टोकन फाइलबाट आउँछन् भनी तुरुन्तै स्पष्ट पार्छ। एक गतिशील स्लाइड बनाउँदै kf-fade-in keyframes ले राम्रो काम गर्दछ किनभने यो सरल छ र त्यहाँ चीजहरू गडबड गर्न थोरै ठाउँ छ। अन्य एनिमेसनहरूमा, तथापि, हामी धेरै गतिशील हुन आवश्यक छ, र यहाँ हामी CSS अनुकूलन गुणहरूको विशाल शक्तिको लाभ उठाउन सक्छौं। यो छ जहाँ किफ्रेम टोकनहरू छरिएका स्थिर एनिमेसनको तुलनामा साँच्चै चम्किन्छन्। एक सामान्य परिदृश्य लिनुहोस्: "स्लाइड-इन" एनिमेसनहरू। तर कहाँबाट भित्र पस्ने ? दायाँबाट 100px? बायाँबाट 50%? के यो स्क्रिनको माथिबाट प्रवेश गर्नुपर्छ? वा सायद तलबाट तैरने? धेरै सम्भावनाहरू, तर प्रत्येक दिशा र प्रत्येक भिन्नताको लागि छुट्टै कीफ्रेमहरू सिर्जना गर्नुको सट्टा, हामी एउटा लचिलो टोकन बनाउन सक्छौं जुन सबै परिदृश्यहरूमा अनुकूल हुन्छ: /* * स्लाइड इन - दिशात्मक स्लाइड एनिमेसन * दिशा नियन्त्रण गर्न --kf-slide-from प्रयोग गर्नुहोस् * पूर्वनिर्धारित: बायाँबाट स्लाइडहरू (-100%) * प्रयोग: * एनिमेसन: kf-slide-in 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- लाई परिवर्तन गरेर प्रयोग गर्न सक्छौं: साइडबार { एनिमेसन: kf-slide-in 0.3s सहज-आउट; /* पूर्वनिर्धारित मान प्रयोग गर्दछ: बायाँबाट स्लाइड */ }
सूचना { एनिमेसन: kf-slide-in 0.4s सहज-आउट; --kf-slide-from: 0 -50px; /* माथिबाट स्लाइड */ }
मोडल { एनिमेसन: kf-fade-in 0.5s, kf-slide-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-from: 50px 50px; /* तल-दायाँबाट स्लाइड */ }
यो दृष्टिकोणले हामीलाई स्थिरता कायम राख्दा अविश्वसनीय लचिलोपन दिन्छ। एउटा कीफ्रेम घोषणा, असीम सम्भावनाहरू। अमित शीन द्वारा पेन कीफ्रेम टोकनहरू - डेमो 3 [फोर्क गरिएको] हेर्नुहोस्। र यदि हामी हाम्रा एनिमेसनहरूलाई अझ लचिलो बनाउन चाहन्छौं, "स्लाइड-आउट" प्रभावहरूलाई पनि अनुमति दिँदै, हामी गर्न सक्छौं।केवल अनुकूलन गुणमा --kf-slide- थप्नुहोस्, जुन हामीले अर्को खण्डमा देख्नेछौं। द्विदिशात्मक जुम कीफ्रेमहरू अर्को साधारण एनिमेसन जुन परियोजनाहरूमा डुप्लिकेट हुन्छ "जुम" प्रभावहरू। चाहे यो टोस्ट सन्देशहरूको लागि सूक्ष्म स्केल-अप हो, मोडलहरूको लागि नाटकीय जुम-इन, वा शीर्षकहरूको लागि कोमल स्केल-डाउन प्रभाव, जुम एनिमेसनहरू जताततै छन्। प्रत्येक स्केल मानका लागि छुट्टै कीफ्रेमहरू सिर्जना गर्नुको सट्टा, kf-zoom कीफ्रेमहरूको एउटा लचिलो सेट निर्माण गरौं:
/* * जुम - स्केल एनिमेसन * मापन मानहरू नियन्त्रण गर्न --kf-zoom-from र --kf-zoom-to प्रयोग गर्नुहोस् * पूर्वनिर्धारित: 80% देखि 100% (0.8 देखि 1) सम्म जुम * प्रयोग: * एनिमेसन: kf-zoom 0.2s सहज-आउट; * --kf-जुम-बाट: ०.५; --kf-zoom-to: 1; // ५०% देखि १००% सम्म जुम गर्नुहोस् * --kf-zoom-from: 1; --kf-zoom-to: ०; // १००% देखि ०% सम्म जुम गर्नुहोस् * --kf-zoom-from: 1; --kf-zoom-to: 1.1; // १००% देखि ११०% सम्म जुम गर्नुहोस् */
@keyframes kf-zoom { बाट { स्केल: var(-kf-zoom-from, 0.8); } प्रति { स्केल: var(-kf-zoom-to, 1); } }
एउटा परिभाषाको साथ, हामी कुनै पनि जुम भिन्नता प्राप्त गर्न सक्छौं जुन हामीलाई चाहिन्छ: टोस्ट { एनिमेसन: kf-slide-in 0.2s, kf-zoom 0.4s सहज-आउट; --kf-slide-from: 0 100%; /* माथिबाट स्लाइड */ /* पूर्वनिर्धारित जुम प्रयोग गर्दछ: 80% देखि 100% सम्म */ }
मोडल { एनिमेसन: kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-from: ०; /* नाटकीय जुम ०% देखि १००% सम्म */ }
हेडिङ { एनिमेसन: kf-fade-in 2s, kf-zoom 2s सहज-इन; --kf-zoom-from: 1.2; --kf-zoom-to: ०.८; /* कोमल स्केल तल */ }
०.८ (८०%) को पूर्वनिर्धारितले धेरैजसो UI तत्वहरू जस्तै टोस्ट सन्देशहरू र कार्डहरूका लागि पूर्ण रूपमा काम गर्छ, जबकि अझै पनि विशेष केसहरूको लागि अनुकूलन गर्न सजिलो हुन्छ। अमित शीन द्वारा पेन कीफ्रेम टोकनहरू - डेमो 4 [फोर्क गरिएको] हेर्नुहोस्। तपाईंले भर्खरका उदाहरणहरूमा केही चाखलाग्दो कुरा याद गर्नुभएको हुन सक्छ: हामीले एनिमेसनहरू संयोजन गरिरहेका छौं। @keyframes टोकनहरूसँग काम गर्ने मुख्य फाइदाहरू मध्ये एक यो हो कि तिनीहरू एक अर्कासँग निर्बाध रूपमा एकीकृत गर्न डिजाइन गरिएको हो। यो चिल्लो रचना जानाजानी हो, आकस्मिक होइन। हामी एनिमेसन संरचनालाई पछि थप विस्तारमा छलफल गर्नेछौं, जहाँ तिनीहरू समस्याग्रस्त हुन सक्छन्, तर धेरै संयोजनहरू सीधा र कार्यान्वयन गर्न सजिलो छन्। नोट: यो लेख लेख्दा, र हुनसक्छ यो लेख्नुको कारणले, मैले आफैलाई प्रवेश एनिमेसनको सम्पूर्ण विचारलाई पुनर्विचार गरिरहेको पाएँ। CSS मा हालैका सबै प्रगतिहरूको साथ, के हामीलाई अझै पनि तिनीहरू चाहिन्छ? सौभाग्यवश, एडम अर्गाइलले उही प्रश्नहरू खोजे र उनीहरूको ब्लगमा उत्कृष्ट रूपमा व्यक्त गरे। यसले यहाँ लेखिएको कुराको विरोध गर्दैन, तर यसले विचार गर्न लायक दृष्टिकोण प्रस्तुत गर्दछ, विशेष गरी यदि तपाइँका परियोजनाहरू प्रवेश एनिमेसनहरूमा धेरै निर्भर छन्। निरन्तर एनिमेसनहरू जब प्रवेश एनिमेसनहरू, जस्तै "फेड", "स्लाइड", र "जुम" एक पटक हुन्छ र त्यसपछि रोकिन्छ, निरन्तर एनिमेसनहरू ध्यान आकर्षित गर्न वा चलिरहेको गतिविधिलाई संकेत गर्न अनिश्चित रूपमा लुप हुन्छन्। मैले सामना गर्ने दुई सबैभन्दा सामान्य निरन्तर एनिमेसनहरू "स्पिन" (लोडिङ संकेतकहरूको लागि) र "पल्स" (महत्वपूर्ण तत्वहरू हाइलाइट गर्नका लागि) हुन्। यी एनिमेसनहरूले अनौठो चुनौतीहरू प्रस्तुत गर्छन् जब यो कुञ्जीफ्रेम टोकनहरू सिर्जना गर्ने कुरा आउँछ। प्रवेशद्वार एनिमेसनहरूको विपरीत जुन सामान्यतया एक राज्यबाट अर्कोमा जान्छ, निरन्तर एनिमेसनहरू तिनीहरूको व्यवहार ढाँचाहरूमा अत्यधिक अनुकूलन योग्य हुन आवश्यक छ। स्पिन डाक्टर प्रत्येक परियोजनाले धेरै स्पिन एनिमेसनहरू प्रयोग गरेको देखिन्छ। कोही घडीको दिशामा घुम्छन्, कोही घडीको उल्टो दिशामा घुम्छन्। केहि एकल 360-डिग्री रोटेशन गर्छन्, अरूले छिटो प्रभावको लागि धेरै मोडहरू गर्छन्। प्रत्येक भिन्नताका लागि छुट्टै कीफ्रेमहरू सिर्जना गर्नुको सट्टा, सबै परिदृश्यहरू ह्यान्डल गर्ने एउटा लचिलो स्पिन निर्माण गरौं:
/* * स्पिन - रोटेशन एनिमेसन * परिक्रमा दायरा नियन्त्रण गर्न --kf-spin-from र --kf-spin-to प्रयोग गर्नुहोस् * परिक्रमा रकम नियन्त्रण गर्न --kf-spin-turns प्रयोग गर्नुहोस् * पूर्वनिर्धारित: 0deg देखि 360deg सम्म घुमाउँछ (1 पूर्ण परिक्रमा) * प्रयोग: * एनिमेसन: kf-स्पिन 1s रैखिक अनन्त; * --kf-स्पिन-टर्न: 2; // २ पूर्ण परिक्रमा * --kf-स्पिन-बाट: ० डिग्री; --kf-spin-to: 180deg; // आधा रोटेशन * --kf-स्पिन-बाट: ० डिग्री; --kf-spin-to: -360deg; // घडीको विपरीत दिशामा */
@keyframes kf-स्पिन { बाट { घुमाउनुहोस्: var(--kf-spin-from, 0deg); } प्रति { घुमाउनुहोस्: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-स्पिन-टर्न, 1)); } }
अब हामी हामीलाई मनपर्ने कुनै पनि स्पिन भिन्नता सिर्जना गर्न सक्छौं:
लोडिङ स्पिनर { एनिमेसन: kf-स्पिन 1s रैखिक अनन्त; /* पूर्वनिर्धारित प्रयोग गर्दछ: 0deg देखि 360deg सम्म घुमाउँछ */ }
फास्ट लोडर { एनिमेसन: kf-spin 1.2s ease-in-out infinite alternate; --kf-स्पिन-टर्न: 3; /* प्रति चक्र प्रत्येक दिशाको लागि ३ पूर्ण परिक्रमाहरू*/ }
.steped-reverse { एनिमेसन: kf-स्पिन 1.5s चरणहरू (8) अनन्त; --kf-spin-to: -360deg; /* घडीको विपरीत दिशामा */ }
.subtle-wiggle { एनिमेसन: kf-spin 2s ease-in-out infinite alternate; --kf-स्पिन-बाट: -16deg; --kf-spin-to: 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 ease-in-out infinite alternate; * --केएफ-पल्स-स्केल-बाट: ०.९५; --kf-pulse-scale-to: 1.05; // स्केल पल्स * --kf-पल्स-अपारदर्शिता-बाट: ०.७; --kf-pulse-opacity-to: 1; // अस्पष्टता पल्स */
@keyframes kf-pulse { बाट { स्केल: var(--kf-pulse-scale-from, 1); अस्पष्टता: var(--kf-pulse-opacity-from, 1); } प्रति { स्केल: var(-kf-pulse-scale-to, 1); अस्पष्टता: var(--kf-pulse-opacity-to, 1); } }
यसले एक लचिलो पल्स सिर्जना गर्दछ जसले बहु गुणहरू एनिमेट गर्न सक्छ: कल-टु-एक्शन { एनिमेसन: kf-pulse 0.6s अनन्त वैकल्पिक; --kf-पल्स-अपारदर्शिता-बाट: ०.५; /* अस्पष्टता पल्स */ }
.notification-dot { एनिमेसन: kf-pulse 0.6s ease-in-out infinite alternate; --kf-pulse-scale-from: ०.९; --kf-pulse-scale-to: 1.1; /* स्केल पल्स */ }
पाठ-हाइलाइट { एनिमेसन: kf-pulse 1.5s ease-out infinite; --kf-pulse-scale-from: ०.८; --kf-पल्स-अपारदर्शिता-बाट: ०.२; /* स्केल र अस्पष्टता पल्स */ }
अमित शीन द्वारा पेन कीफ्रेम टोकनहरू - डेमो 6 [फोर्क गरिएको] हेर्नुहोस्। यो एकल kf-pulse keyframe ले सूक्ष्म ध्यान ग्राब्स देखि नाटकीय हाइलाइट सम्म सबै कुरा ह्यान्डल गर्न सक्छ, सबै अनुकूलन गर्न सजिलो हुँदा। उन्नत सहजता कीफ्रेम टोकनहरू प्रयोग गर्ने बारेको एउटा उत्कृष्ट कुरा भनेको हाम्रो एनिमेसन लाइब्रेरी विस्तार गर्न र प्रभावहरू प्रदान गर्न कत्तिको सजिलो छ जुन धेरै विकासकर्ताहरूले लोचदार वा बाउन्स जस्ता स्क्र्याचबाट लेख्न कष्ट गर्दैनन्। यहाँ एउटा साधारण "बाउन्स" किफ्रेम टोकनको उदाहरण छ जसले जम्प उचाइ नियन्त्रण गर्न अनुकूलन गुणबाट --kf-bounce- प्रयोग गर्दछ। /* * बाउन्स - उछाल प्रवेश एनिमेसन * जम्प उचाइ नियन्त्रण गर्न --kf-bounce-from प्रयोग गर्नुहोस् * पूर्वनिर्धारित: 100vh बाट जम्प (स्क्रिन बन्द) * प्रयोग: * एनिमेसन: kf-bounce 3s ease-in; * --kf-bounce-from: 200px; // 200px उचाइबाट जम्प */
@keyframes kf-बाउन्स { ०% { अनुवाद गर्नुहोस्: 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-elastic-in 2s सहज-इन-आउट दुबै; * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // बाट प्रविष्ट गर्नुहोस् (-50px, -200px) */
@keyframes kf-elastic-in { ०% { अनुवाद गर्नुहोस्: 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-elastic-from-Y, 0px) * ०.१३१२); }
४४% { अनुवाद गर्नुहोस्: 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); }
१००% { अनुवाद गर्नुहोस्: 0 0; } }
यो दृष्टिकोणले हाम्रो परियोजनामा उन्नत कीफ्रेमहरू पुन: प्रयोग गर्न र अनुकूलन गर्न सजिलो बनाउँछ, केवल एकल अनुकूलन गुण परिवर्तन गरेर।
उछाल र जुम { एनिमेसन: kf-bounce 3s सहज-इन, kf-zoom 3s रैखिक; --kf-zoom-from: ०; }
उछाल र स्लाइड { animation-composition: add; /* दुबै एनिमेसनहरूले अनुवाद प्रयोग गर्दछ */ एनिमेसन: kf-bounce 3s सहज-इन, kf-slide-in 3s सहज-आउट; --kf-slide-from: -200px; }
लोचदार-इन { एनिमेसन: kf-elastic-in 2s सहज-इन-आउट दुबै; }
अमित शीन द्वारा पेन कीफ्रेम टोकनहरू - डेमो 7 [फोर्क गरिएको] हेर्नुहोस्। यस बिन्दु सम्म, हामीले देखेका छौं कि हामी कसरी स्मार्ट र प्रभावकारी तरिकामा कीफ्रेमहरू समेकित गर्न सक्छौं। निस्सन्देह, तपाइँ तपाइँको परियोजना को आवश्यकताहरु लाई राम्रो संग फिट गर्न को लागी चीजहरु लाई ट्वीक गर्न चाहानुहुन्छ, तर हामीले धेरै सामान्य एनिमेसनहरु र दैनिक प्रयोग मामिलाहरु को उदाहरणहरु लाई कभर गरेका छौं। र यी कुञ्जीफ्रेम टोकनहरू ठाउँमा राखेर, हामीसँग अब सम्पूर्ण परियोजनामा सुसंगत, कायम गर्न मिल्ने एनिमेसनहरू सिर्जना गर्न शक्तिशाली निर्माण ब्लकहरू छन्। कुनै थप नक्कल गरिएका कीफ्रेमहरू, कुनै थप विश्वव्यापी दायरा विवादहरू छैनन्। हाम्रो सबै एनिमेसन आवश्यकताहरू ह्यान्डल गर्न केवल एक सफा, सुविधाजनक तरिका। तर वास्तविक प्रश्न यो हो: हामी कसरी यी भवन ब्लकहरू सँगै रचना गर्छौं? यो सबै सँगै राख्दै हामीले देख्यौं कि आधारभूत किफ्रेम टोकनहरू संयोजन सरल छ। हामीलाई केहि विशेष चाहिदैन तर पहिलो एनिमेसन परिभाषित गर्न, दोस्रो परिभाषित गर्न, आवश्यक अनुसार चर सेट गर्नुहोस्, र यो हो। /* फेड इन + स्लाइड इन */ टोस्ट { एनिमेसन: kf-fade-in 0.4s, kf-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-from: 0 40px; }
/* जुम इन + फेड इन */ मोडल { एनिमेसन: kf-fade-in 0.3s, kf-zoom 0.3s क्यूबिक-बेजियर(०.३४, १.५६, ०.६४, १); --kf-zoom-from: ०.७; --kf-zoom-to: 1; }
/* स्लाइड इन + पल्स */ सूचना { एनिमेसन: kf-slide-in 0.5s, kf-pulse 1.2s ease-in-out infinite alternate; --kf-slide-from: -100px 0; --kf-pulse-scale-from: ०.९५; --kf-pulse-scale-to: 1.05; }
यी संयोजनहरूले राम्रोसँग काम गर्दछ किनभने प्रत्येक एनिमेसनले फरक गुणलाई लक्षित गर्दछ: अस्पष्टता, रूपान्तरण (अनुवाद/स्केल), आदि। तर कहिलेकाहीँ त्यहाँ विवादहरू हुन्छन्, र हामीले तिनीहरूलाई किन र कसरी व्यवहार गर्ने भनेर जान्न आवश्यक छ। जब दुई एनिमेसनहरूले एउटै गुणलाई एनिमेसन गर्ने प्रयास गर्छन् - उदाहरणका लागि, दुवै एनिमेटिंग स्केल वा दुवै एनिमेसन अपारदर्शिता - परिणाम तपाईंले अपेक्षा गरे जस्तो हुनेछैन। पूर्वनिर्धारित रूपमा, एनिमेसनहरू मध्ये एउटा मात्र वास्तवमा त्यो गुणमा लागू हुन्छ, जुन एनिमेसनको सूचीमा अन्तिम हो। यो CSS ले एउटै सम्पत्तीमा धेरै एनिमेसनहरू ह्यान्डल गर्ने तरिकाको सीमितता हो। उदाहरणका लागि, यो उद्देश्यले काम गर्दैन किनभने kf-pulse एनिमेसन मात्र लागू हुनेछ। खराब कम्बो { एनिमेसन: kf-zoom ०.५ सेकेन्ड अगाडि, kf-pulse 1.2s अनन्त वैकल्पिक; --kf-zoom-from: ०.५; --kf-zoom-to: 1.2; --kf-pulse-scale-from: ०.८; --kf-pulse-scale-to: 1.1; }
एनिमेसन थप एउटै गुणलाई असर गर्ने धेरै एनिमेसनहरू ह्यान्डल गर्ने सरल र सबैभन्दा सीधा तरिका भनेको एनिमेसन-कम्पोजिसन गुण प्रयोग गर्नु हो। माथिको अन्तिम उदाहरणमा, kf-pulse एनिमेसनले kf-zoom एनिमेसनलाई प्रतिस्थापन गर्छ, त्यसैले हामीले प्रारम्भिक जुम देख्ने छैनौं र 1.2 को अपेक्षित स्केल प्राप्त गर्ने छैनौं। थप्नको लागि एनिमेसन-रचना सेट गरेर, हामी ब्राउजरलाई दुबै एनिमेसनहरू संयोजन गर्न भन्छौं। यसले हामीलाई हामीले चाहेको परिणाम दिन्छ। .component-2 { animation-composition: add; }
अमित शीन द्वारा पेन कीफ्रेम टोकनहरू - डेमो 8 [फोर्क गरिएको] हेर्नुहोस्। यस दृष्टिकोणले धेरै जसो केसहरूमा राम्रोसँग काम गर्दछ जहाँ हामी समान सम्पत्तीमा प्रभावहरू संयोजन गर्न चाहन्छौं। यो पनि उपयोगी छ जब हामीले स्थिर सम्पत्ति मानहरूसँग एनिमेसनहरू संयोजन गर्न आवश्यक छ। उदाहरणका लागि, यदि हामीसँग एउटा तत्व छ जसले अनुवाद गुण प्रयोग गर्दछ जुन हामीले चाहेको ठाउँमा राख्नको लागि, र त्यसपछि हामी यसलाई kf-slide-in keyframes सँग एनिमेसन गर्न चाहन्छौं, हामीले एनिमेसन-रचना बिना नै खराब दृश्यात्मक जम्प पाउँछौं। अमित शीन द्वारा पेन कीफ्रेम टोकनहरू - डेमो 9 [फोर्क गरिएको] हेर्नुहोस्। थप्नको लागि एनिमेसन-रचना सेटको साथ, एनिमेसन सजिलैसँग अवस्थितसँग जोडिएको छरूपान्तरण गर्नुहोस्, त्यसैले तत्व ठाउँमा रहन्छ र अपेक्षित रूपमा एनिमेसन हुन्छ। एनिमेसन स्टगर धेरै एनिमेसनहरू ह्यान्डल गर्ने अर्को तरिका तिनीहरूलाई "स्टगर" गर्नु हो - अर्थात्, पहिलो एनिमेसन समाप्त भएपछि अलिकति दोस्रो एनिमेसन सुरु गर्नुहोस्। यो प्रत्येक केसको लागि काम गर्ने समाधान होइन, तर यो उपयोगी हुन्छ जब हामीसँग प्रवेश एनिमेसन हुन्छ र त्यसपछि निरन्तर एनिमेसन हुन्छ। /* फेड इन + अस्पष्टता पल्स */ सूचना { एनिमेसन: kf-fade-in 2s सहज-आउट, kf-pulse 0.5s 2s ease-in-out infinite alternate; --kf-pulse-opacity-to: 0.5; }
अमित शीन द्वारा पेन कीफ्रेम टोकनहरू - डेमो १० [फोर्क गरिएको] हेर्नुहोस्। अर्डर मामिलाहरू हामीले काम गर्ने एनिमेसनको ठूलो भाग रूपान्तरण गुण प्रयोग गर्दछ। अधिकतर अवस्थामा, यो बस अधिक सुविधाजनक छ। योसँग प्रदर्शन फाइदा पनि छ किनकि रूपान्तरण एनिमेसनहरू GPU-त्वरित हुन सक्छ। तर यदि हामीले रूपान्तरणहरू प्रयोग गर्छौं भने, हामीले स्वीकार गर्नुपर्छ कि हामीले हाम्रो रूपान्तरणहरू गर्ने क्रममा महत्त्वपूर्ण छ। धेरै। हाम्रो किफ्रेमहरूमा अहिलेसम्म, हामीले व्यक्तिगत रूपान्तरणहरू प्रयोग गरेका छौं। चश्मा अनुसार, यी सधैं एक निश्चित क्रममा लागू गरिन्छ: पहिले, तत्व अनुवाद हुन्छ, त्यसपछि घुमाउनुहोस्, त्यसपछि मापन। यसले अर्थ राख्छ र हामी मध्ये धेरैले अपेक्षा गरेको कुरा हो। यद्यपि, यदि हामीले रूपान्तरण गुण प्रयोग गर्छौं भने, प्रकार्यहरू लेखिएको क्रम तिनीहरू लागू हुने क्रम हो। यस अवस्थामा, यदि हामीले X-अक्षमा 100 पिक्सेललाई सार्छौं र त्यसपछि यसलाई 45 डिग्रीले घुमाउँछौं भने, यो पहिले यसलाई 45 डिग्रीले घुमाएर 100 पिक्सेल सार्नु जस्तै होइन। /* गुलाबी वर्ग: पहिले अनुवाद गर्नुहोस्, त्यसपछि घुमाउनुहोस् */ उदाहरण-एक { रूपान्तरण: translateX(100px) घुमाउनुहोस्(45deg); }
/* हरियो वर्ग: पहिले घुमाउनुहोस्, त्यसपछि अनुवाद गर्नुहोस् */ उदाहरण-दुई { रूपान्तरण: घुमाउनुहोस्(45deg) translateX(100px); }
अमित शीन द्वारा पेन कीफ्रेम टोकनहरू - डेमो 11 [फोर्क गरिएको] हेर्नुहोस्। तर रूपान्तरण क्रम अनुसार, सबै व्यक्तिगत रूपान्तरणहरू - हामीले किफ्रेम टोकनहरूको लागि प्रयोग गरेका सबै चीजहरू - रूपान्तरण कार्यहरू अघि हुन्छ। यसको मतलब तपाईंले रूपान्तरण गुणमा सेट गर्नुभएको कुनै पनि कुरा एनिमेसन पछि हुनेछ। तर यदि तपाईंले सेट गर्नुभयो भने, उदाहरणका लागि, kf-spin keyframes सँगसँगै अनुवाद गर्नुहोस्, अनुवाद एनिमेसन अघि हुनेछ। अझै अन्योल?! यसले अवस्थाहरूमा नेतृत्व गर्दछ जहाँ स्थिर मानहरूले एउटै एनिमेसनको लागि फरक परिणामहरू ल्याउन सक्छ, जस्तै निम्न अवस्थामा:
/* दुबै स्पिनरहरूको लागि साझा एनिमेसन */ स्पिनर { एनिमेसन: kf-स्पिन 1s रैखिक अनन्त; }
/* गुलाबी स्पिनर: घुमाउनु अघि अनुवाद गर्नुहोस् (व्यक्तिगत रूपान्तरण) */ स्पिनर-गुलाबी { अनुवाद गर्नुहोस्: 100% 50%; }
/* हरियो स्पिनर: घुमाउनुहोस् त्यसपछि अनुवाद गर्नुहोस् (कार्य क्रम) */ स्पिनर हरियो { रूपान्तरण: अनुवाद (100%, 50%); }
पेन कीफ्रेम टोकनहरू हेर्नुहोस् - डेमो १२ [फोर्क गरिएको] अमित शीन द्वारा। तपाईंले देख्न सक्नुहुन्छ कि पहिलो स्पिनर (गुलाबी) ले अनुवाद प्राप्त गर्दछ जुन kf-स्पिन घुमाउनु अघि हुन्छ, त्यसैले यो पहिले आफ्नो ठाउँमा सर्छ र त्यसपछि घुम्छ। दोस्रो स्पिनर (हरियो) ले translate() प्रकार्य प्राप्त गर्दछ जुन व्यक्तिगत रूपान्तरण पछि हुन्छ, त्यसैले तत्व पहिले स्पिन हुन्छ, त्यसपछि यसको वर्तमान कोणको सापेक्ष सर्छ, र हामीले त्यो व्यापक कक्षा प्रभाव पाउँछौं। होइन, यो बग होइन। यो केवल ती चीजहरू मध्ये एक हो जुन हामीले CSS बारे जान्न आवश्यक छ र धेरै एनिमेसनहरू वा बहु रूपान्तरणहरूसँग काम गर्दा दिमागमा राख्नुहोस्। यदि आवश्यक छ भने, तपाइँले rotate() प्रकार्य प्रयोग गरेर तत्वहरू घुमाउने kf-spin-alt कीफ्रेमहरूको अतिरिक्त सेट पनि सिर्जना गर्न सक्नुहुन्छ। कम गति र जब हामी वैकल्पिक कीफ्रेमहरूको बारेमा कुरा गर्दैछौं, हामी "कुनै एनिमेसन" विकल्पलाई बेवास्ता गर्न सक्दैनौं। कुञ्जीफ्रेम टोकनहरू प्रयोग गर्ने सबैभन्दा ठूलो फाइदाहरू मध्ये एक हो कि पहुँचलाई बेक गर्न सकिन्छ, र यो वास्तवमा गर्न धेरै सजिलो छ। पहुँचयोग्यतालाई ध्यानमा राखेर हाम्रा कीफ्रेमहरू डिजाइन गरेर, हामी यो सुनिश्चित गर्न सक्छौं कि कम गतिलाई प्राथमिकता दिने प्रयोगकर्ताहरूले अतिरिक्त काम वा कोड नक्कल नगरी सहज, कम विचलित अनुभव पाउँछन्। "रिड्युड मोशन" को सही अर्थ एक एनिमेसनबाट अर्कोमा, र प्रोजेक्टबाट प्रोजेक्टमा अलिकति परिवर्तन हुन सक्छ, तर यहाँ ध्यानमा राख्नु पर्ने केही महत्त्वपूर्ण बुँदाहरू छन्: कीफ्रेमहरू म्यूट गर्दै जबकि केहि एनिमेसनहरू नरम वा ढिलो गर्न सकिन्छ, त्यहाँ अन्यहरू छन् जुन कम गति अनुरोध गर्दा पूर्ण रूपमा गायब हुनुपर्छ। पल्स एनिमेसन एक राम्रो उदाहरण हो। यी एनिमेसनहरू कम गति मोडमा चल्दैनन् भनी सुनिश्चित गर्न, हामी तिनीहरूलाई उपयुक्त मिडिया क्वेरीमा लपेट्न सक्छौं।
@media (prefers-reduced-motion: no-preference) { @keyfrmaes kf-pulse { बाट { स्केल: var(--kf-pulse-scale-from, 1); अस्पष्टता: var(--kf-pulse-opacity-from, 1); } प्रति { स्केल: var(-kf-pulse-scale-to, 1); अस्पष्टता:var(--kf-pulse-opacity-to, 1); } } }
यसले सुनिश्चित गर्दछ कि प्रयोगकर्ताहरू जसले प्राथमिकताहरू घटाउनको लागि सेट गरेका छन् उनीहरूले एनिमेसन देख्ने छैनन् र उनीहरूको प्राथमिकतासँग मेल खाने अनुभव पाउनेछन्। तत्काल भित्र त्यहाँ केहि मुख्य फ्रेमहरू छन् जुन हामीले सजिलै हटाउन सक्दैनौं, जस्तै प्रवेश एनिमेसनहरू। मान परिवर्तन हुनुपर्छ, एनिमेट गर्नुपर्छ; अन्यथा, तत्वको सही मान हुने छैन। तर कम गतिमा, प्रारम्भिक मानबाट यो संक्रमण तत्काल हुनुपर्छ। यो प्राप्त गर्न, हामी किफ्रेमहरूको अतिरिक्त सेट परिभाषित गर्नेछौं जहाँ मान तुरुन्तै अन्तिम स्थितिमा जान्छ। यी हाम्रो पूर्वनिर्धारित कीफ्रेमहरू बन्छन्। त्यसोभए, हामी अघिल्लो उदाहरणमा जस्तै prefers-reduced-motion सेट no-preference को लागि मिडिया क्वेरी भित्र नियमित कीफ्रेमहरू थप्नेछौं। /* कम गतिको लागि तत्काल पप इन */ @keyframes kf-zoom { देखि, { स्केल: var(-kf-zoom-to, 1); } }
@media (prefers-reduced-motion: no-preference) { /* मूल जुम कीफ्रेमहरू */ @keyframes kf-zoom { बाट { स्केल: var(-kf-zoom-from, 0.8); } प्रति { स्केल: var(-kf-zoom-to, 1); } } }
यस तरिकाले, कम गतिलाई प्राथमिकता दिने प्रयोगकर्ताहरूले तत्वलाई अन्तिम अवस्थामा तुरुन्तै देखा पर्नेछ, जबकि अरू सबैले एनिमेटेड ट्रान्जिसन पाउँछन्। नरम दृष्टिकोण त्यहाँ केही केसहरू छन् जहाँ हामी केही आन्दोलन राख्न चाहन्छौं, तर मूल एनिमेसन भन्दा धेरै नरम र शान्त। उदाहरण को लागी, हामी एक कोमल फेड-इन संग एक बाउन्स प्रवेश प्रतिस्थापन गर्न सक्छौं।
@keyframes kf-बाउन्स { /* कम गतिको लागि सफ्ट फेड-इन */ }
@media (prefers-reduced-motion: no-preference) { @keyframes kf-बाउन्स { /* मूल बाउन्स कीफ्रेमहरू */ } }
अब, कम गति सक्षम भएका प्रयोगकर्ताहरूले अझै पनि उपस्थितिको भावना प्राप्त गर्छन्, तर बाउन्स वा लोचदार एनिमेसनको तीव्र आन्दोलन बिना। बिल्डिंग ब्लकहरू ठाउँमा हुँदा, अर्को प्रश्न तिनीहरूलाई कसरी वास्तविक कार्यप्रवाहको भाग बनाउने हो। लचिलो किफ्रेमहरू लेख्नु एउटा कुरा हो, तर तिनीहरूलाई ठूलो परियोजनामा भरपर्दो बनाउन केही रणनीतिहरू चाहिन्छ जुन मैले कठिन तरिकाले सिक्नुपर्यो। कार्यान्वयन रणनीति र उत्तम अभ्यासहरू एकपटक हामीसँग किफ्रेम टोकनहरूको ठोस पुस्तकालय छ, वास्तविक चुनौती तिनीहरूलाई दैनिक काममा कसरी ल्याउने हो।
प्रलोभन सबै कुञ्जीफ्रेमहरू एकैचोटि छोड्ने र समस्या समाधान भएको घोषणा गर्ने हो, तर व्यवहारमा मैले उत्तम परिणामहरू क्रमशः अपनाएर आउने गरेको फेला पारेको छु। फेड वा स्लाइड जस्ता सबैभन्दा सामान्य एनिमेसनहरूबाट सुरु गर्नुहोस्। यी सजिलो जीतहरू हुन् जसले ठूला पुन: लेख्न आवश्यक बिना तत्काल मूल्य देखाउँदछ। नामकरण अर्को बिन्दु हो जुन ध्यानको योग्य छ। एक सुसंगत उपसर्ग वा नेमस्पेसले यो स्पष्ट बनाउँछ कि कुन एनिमेसनहरू टोकनहरू हुन् र कुन स्थानीय एक-अफहरू हुन्। यसले आकस्मिक टक्करहरूलाई पनि रोक्छ र नयाँ टोली सदस्यहरूलाई साझा प्रणालीलाई एक नजरमा पहिचान गर्न मद्दत गर्दछ। कागजात कोड आफैं जस्तै महत्त्वपूर्ण छ। प्रत्येक कुञ्जीफ्रेम टोकन माथिको छोटो टिप्पणीले पछि अनुमान लगाउने घण्टा बचत गर्न सक्छ। एक विकासकर्ताले टोकन फाइल खोल्न सक्षम हुनुपर्दछ, उनीहरूलाई आवश्यक पर्ने प्रभावको लागि स्क्यान गर्नुहोस्, र प्रयोग ढाँचा सीधा तिनीहरूको कम्पोनेन्टमा प्रतिलिपि गर्नुहोस्। लचिलोपनले यो दृष्टिकोणलाई प्रयासको लायक बनाउँछ। समझदार अनुकूलन गुणहरू पर्दाफास गरेर, हामी टोलीहरूलाई प्रणाली तोड्न बिना एनिमेसन अनुकूलन गर्न कोठा दिन्छौं। एकै समयमा, overcomplicate नगर्ने प्रयास गर्नुहोस्। महत्वपूर्ण नबहरू प्रदान गर्नुहोस् र बाँकी राय राख्नुहोस्। अन्तमा, पहुँच सम्झनुहोस्। प्रत्येक एनिमेसनलाई कम गति विकल्प चाहिँदैन, तर धेरैले गर्छन्। यी समायोजनहरूमा प्रारम्भिक रूपमा बेकिंगको अर्थ हामीले तिनीहरूलाई पछि कहिल्यै पुन: फिट गर्नुपर्दैन, र यसले हाम्रा प्रयोगकर्ताहरूले कहिल्यै उल्लेख गरे तापनि ध्यान दिने स्तर देखाउँदछ।
मेरो अनुभवमा, हाम्रो डिजाइन टोकन कार्यप्रवाहको एक भागको रूपमा कीफ्रेम टोकनहरू व्यवहार गर्दा उनीहरूलाई टाँसिन्छ। एक पटक तिनीहरू ठाउँमा पुगेपछि, तिनीहरूले विशेष प्रभावहरू जस्तै महसुस गर्न छोड्छन् र डिजाइन भाषाको अंश बन्छन्, उत्पादन कसरी सर्छ र प्रतिक्रिया दिन्छ भन्ने प्राकृतिक विस्तार। लपेट्दै एनिमेसनहरू इन्टरफेसहरू निर्माण गर्ने सबैभन्दा रमाइलो भागहरू मध्ये एक हुन सक्छ, तर संरचना बिना, तिनीहरू निराशाको सबैभन्दा ठूलो स्रोत पनि हुन सक्छन्। कुञ्जीफ्रेमहरूलाई टोकनको रूपमा व्यवहार गरेर, तपाइँ सामान्यतया गडबड र व्यवस्थापन गर्न गाह्रो हुने चीज लिनुहुन्छ र यसलाई स्पष्ट, अनुमानित प्रणालीमा परिणत गर्नुहुन्छ। वास्तविक मूल्य कोडको केही लाइनहरू बचत गर्न मात्र होइन। यो विश्वासमा छ कि जब तपाइँ फेड, स्लाइड, जुम, वा स्पिन प्रयोग गर्नुहुन्छ, तपाइँलाई थाहा छ कि यो परियोजना मा कसरी व्यवहार गर्नेछ। यो लचिलोपनमा छ जुन अनन्त भिन्नताहरूको अराजकता बिना अनुकूलन गुणहरूबाट आउँछ। र यो फाउन्डेसनमा बनाइएको पहुँचको रूपमा थपिएको सट्टामा छएक पछिल्ला विचार। मैले यी विचारहरू विभिन्न टोलीहरू र विभिन्न कोडबेसमा काम गरेको देखेको छु, र ढाँचा सधैं एउटै हुन्छ। एकचोटि टोकनहरू ठाउँमा पुगेपछि, कीफ्रेमहरू ट्रिकहरूको छरिएको संग्रह बन्न छोड्छन् र डिजाइन भाषाको अंश बन्छन्। तिनीहरूले उत्पादनलाई अधिक जानाजानी, थप सुसंगत, र थप जीवित महसुस गराउँछन्। यदि तपाइँ यस लेखबाट एउटा कुरा लिनुहुन्छ भने, यसलाई यो हुन दिनुहोस्: एनिमेसनहरू हामीले पहिले नै रंग, टाइपोग्राफी, र स्पेसिङमा दिएका समान हेरचाह र संरचनाको योग्य छन्। कुञ्जीफ्रेम टोकनहरूमा सानो लगानीले प्रत्येक पटक तपाईंको इन्टरफेस सार्दा भुक्तानी गर्छ।
