ይህን በዓይነ ሕሊናህ ተመልከት፡ አዲስ ፕሮጀክት ተቀላቀልክ፣ ወደ ኮድ ቤዝ ዘልቀህ ገብተሃል፣ እና በመጀመሪያዎቹ ጥቂት ሰዓታት ውስጥ፣ የሚያበሳጭ ነገር ታውቃለህ። በቅጥ ሉሆች ውስጥ ተበታትነው፣ ለተመሳሳይ መሰረታዊ እነማዎች በርካታ የ@keyframes ፍቺዎችን ያገኛሉ። ሶስት የተለያዩ የማደብዘዣ ውጤቶች፣ ሁለት ወይም ሶስት የስላይድ ልዩነቶች፣ ጥቂት የማጉላት እነማዎች እና ቢያንስ ሁለት የተለያዩ ስፒን እነማዎች ምክንያቱም፣ ጥሩ፣ ለምን አይሆንም? @የቁልፍ ክፈፎች የልብ ምት { ከ { ልኬት፡ 1; } ወደ { ልኬት: 1.1; } }
@keyframes ትልቅ-pulse { 0%፣ 20%፣ 100% { ልኬት፡ 1; } 10%፣ 40% { ልኬት: 1.2; } }
ይህ ሁኔታ የሚታወቅ ከሆነ ብቻዎን አይደለህም. በተለያዩ ፕሮጄክቶች ውስጥ ባለኝ ልምድ፣ የማቀርበው በጣም ተከታታይ ፈጣን ድሎች አንዱ የቁልፍ ክፈፎችን ማጠናከር እና ደረጃውን የጠበቀ ነው። ይህ በጣም አስተማማኝ ስርዓተ-ጥለት ሆኗል ስለዚህም አሁን ይህን ማጽዳት በማንኛውም አዲስ ኮድ ቤዝ ላይ ካሉት የመጀመሪያ ስራዎቼ ውስጥ አንዱ እንዲሆን በጉጉት እጠብቃለሁ። ከግርግሩ በስተጀርባ ያለው ሎጂክ ስታስቡት ይህ ድግግሞሽ ፍፁም ትርጉም አለው። ሁላችንም በእለት ከእለት ስራችን ውስጥ አንድ አይነት መሰረታዊ እነማዎችን እንጠቀማለን፡ ደብዝዘው፣ ተንሸራታች፣ ማጉላት፣ ስፒን እና ሌሎች የተለመዱ ውጤቶች። እነዚህ እነማዎች በጣም ቀጥተኛ ናቸው፣ እና ስራውን ለመስራት ፈጣን የ @keyframes ፍቺን መምታት ቀላል ነው። የተማከለ አኒሜሽን ስርዓት ከሌለ ገንቢዎች በተፈጥሯቸው እነዚህን የቁልፍ ፍሬሞች ከባዶ ይጽፋሉ፣ ተመሳሳይ እነማዎች በኮድ ቤዝ ውስጥ ሌላ ቦታ እንዳሉ ሳያውቁ ነው። ይህ በተለይ በክፍል-ተኮር አርክቴክቸር (አብዛኞቻችን በዚህ ዘመን የምንሰራው) ስንሰራ የተለመደ ነው፣ ምክንያቱም ቡድኖች ብዙውን ጊዜ በተለያዩ የመተግበሪያው ክፍሎች በትይዩ ይሰራሉ። ውጤቱስ? የአኒሜሽን ትርምስ። ትንሹ ችግር በቁልፍ ክፈፎች ማባዛት በጣም ግልጽ የሆኑት ጉዳዮች የእድገት ጊዜን ማባከን እና አላስፈላጊ የኮድ እብጠት ናቸው። የበርካታ የቁልፍ ፍሬም ፍቺዎች መስፈርቶች ሲቀየሩ የሚዘመኑባቸው ብዙ ቦታዎች ማለት ነው። የደበዘዙ እነማዎን ጊዜ ማስተካከል ይፈልጋሉ? በኮድ ቤዝዎ ላይ እያንዳንዱን ምሳሌ ማደን ያስፈልግዎታል። የማቅለል ተግባራትን መደበኛ ማድረግ ይፈልጋሉ? ሁሉንም ልዩነቶች በማግኘት መልካም ዕድል። ይህ የጥገና ነጥቦችን ማባዛት ቀላል የአኒሜሽን ዝመናዎችን ጊዜ የሚወስድ ተግባር ያደርገዋል። ትልቁ ችግር ይህ የቁልፍ ክፈፎች ብዜት ከመሬት በታች የሚደበቅ በጣም ተንኮለኛ ችግር ይፈጥራል፡ የአለም አቀፍ ስፋት ወጥመድ። ከክፍለ-ነገር-ተኮር አርክቴክቸር ጋር ሲሰራ እንኳን የCSS ቁልፍ ክፈፎች ሁል ጊዜ በአለም አቀፍ ወሰን ይገለፃሉ። ይህ ማለት ሁሉም የቁልፍ ክፈፎች በሁሉም አካላት ላይ ተፈጻሚ ይሆናሉ ማለት ነው። ሁሌም። አዎ፣ እነማህ የግድ በእርስዎ አካል ውስጥ የገለጽካቸውን የቁልፍ ክፈፎች አይጠቀምም። በአለምአቀፍ ወሰን ውስጥ ከተጫኑት ተመሳሳይ ስም ጋር የሚዛመዱ የመጨረሻዎቹን የቁልፍ ክፈፎች ይጠቀማል። ሁሉም የቁልፍ ክፈፎችዎ ተመሳሳይ እስከሆኑ ድረስ ይህ ትንሽ ችግር ሊመስል ይችላል። ነገር ግን አኒሜሽን ለአንድ የተወሰነ የአጠቃቀም ጉዳይ ማበጀት በፈለክበት ቅጽበት፣ ችግር ውስጥ ገብተሃል፣ ወይም ደግሞ ከዚህ የከፋው አንተ ነህ። የእርስዎ አኒሜሽን አይሰራም ምክንያቱም ሌላ አካል ከአንተ በኋላ ስለተጫነ፣የቁልፍ ክፈፎችህን በመተካት ወይም የአንተ አካል ስለሚቆይ እና በአጋጣሚ የዚያን ቁልፍ ክፈፍ ስም በመጠቀም የእያንዳንዱን አካል የአኒሜሽን ባህሪ ስለሚቀይር እና ላታውቀው ትችላለህ። ችግሩን የሚያሳይ ቀላል ምሳሌ ይኸውና፡- .አካል-አንድ { /* አካል ቅጦች */ አኒሜሽን፡ pulse 1s ease-in-out infinite alternate; }
/* ይህ @የቁልፍ ክፈፎች ትርጉም አይሰራም */ @የቁልፍ ክፈፎች የልብ ምት { ከ { ልኬት፡ 1; } ወደ { ልኬት: 1.1; } }
/* በኋላ በኮዱ ውስጥ ... */
.አካል-ሁለት { /* አካል ቅጦች */ አኒሜሽን፡ pulse 1s ease-in-out infinite; }
/* ይህ የቁልፍ ክፈፎች በሁለቱም አካላት ላይ ተፈጻሚ ይሆናሉ */ @የቁልፍ ክፈፎች የልብ ምት { 0%፣ 20%፣ 100% { ልኬት፡ 1; } 10%፣ 40% { ልኬት: 1.2; } }
ሁለቱም አካላት አንድ አይነት የአኒሜሽን ስም ይጠቀማሉ፣ ሁለተኛው የ @keyframes ትርጉም ግን የመጀመሪያውን ይተካል። አሁን ሁለቱም አካል-አንድ እና አካል-ሁለት የትኛውም ክፍል የትኛው የቁልፍ ክፈፎች ቢገለጽም ሁለተኛውን የቁልፍ ክፈፎች ይጠቀማሉ። የፔን ቁልፍ ክፈፎች ማስመሰያዎች ይመልከቱ - ማሳያ 1 [ሹካ የተደረገ] በአሚት ሺን። በጣም መጥፎው ክፍል? ይህ ብዙውን ጊዜ በአካባቢ ልማት ውስጥ በትክክል ይሰራል ነገር ግን የግንባታ ሂደቶች የእርስዎን የቅጥ ሉሆች የመጫን ቅደም ተከተል ሲቀይሩ በምርት ውስጥ በሚስጥር ይሰብራል። በየትኞቹ ክፍሎች እንደተጫኑ እና በምን ቅደም ተከተል ላይ በመመስረት የተለየ ባህሪ ባላቸው እነማዎች ይጨርሳሉ። መፍትሄው፡ የተዋሃዱ የቁልፍ ፍሬሞች የዚህ ትርምስ መልሱ በሚገርም ሁኔታ ቀላል ነው፡ ቀድሞ የተገለጹ ተለዋዋጭ የቁልፍ ክፈፎች በጋራ የቅጥ ሉህ ውስጥ ተከማችተዋል። እያንዳንዱ አካል የራሱን እነማዎች እንዲገልፅ ከመፍቀድ ይልቅ፣ በደንብ የተመዘገቡ፣ በቀላሉ የተማከለ የቁልፍ ክፈፎችን እንፈጥራለን።ለፕሮጀክትዎ ልዩ ፍላጎቶች መጠቀም፣ ማቆየት እና ሊበጅ የሚችል። እንደ የቁልፍ ፍሬሞች ቶከኖች ያስቡበት። ቶከንን ለቀለም እና ክፍተት እንደምንጠቀም እና አብዛኞቻችን ቶከኖችን ለአኒሜሽን ባህሪያት እንደ ቆይታ እና የማቅለል ተግባራት ለምን እንጠቀማለን? ይህ አካሄድ እርስዎ እየተጠቀሙበት ካለው ማንኛውም የአሁኑ የንድፍ ማስመሰያ የስራ ፍሰት ጋር በተፈጥሮ ሊዋሃድ ይችላል፣ ይህም ሁለቱንም ጥቃቅን ችግር (የኮድ ማባዛት) እና ትልቁን ችግር (ግሎባል ወሰን ግጭቶችን) በአንድ ጊዜ እየፈታ ነው። ሀሳቡ ቀጥተኛ ነው፡ ለሁሉም የጋራ እነማዎቻችን አንድ የእውነት ምንጭ ይፍጠሩ። ይህ የጋራ የቅጥ ሉህ ፕሮጀክታችን በትክክል የሚጠቀምባቸውን የአኒሜሽን ንድፎችን የሚሸፍኑ በጥንቃቄ የተሰሩ የቁልፍ ክፈፎችን ይዟል። ከአሁን በኋላ የደበዘዙ እነማዎች በእኛ ኮድ ቤዝ ውስጥ የሆነ ቦታ መኖሩን መገመት የለም። ከሌሎች አካላት እነማዎችን በአጋጣሚ መፃፍ የለም። ግን ቁልፉ እዚህ አለ፡ እነዚህ የማይንቀሳቀሱ ቅጂ-መለጠፍ እነማዎች ብቻ አይደሉም። እነሱ ተለዋዋጭ እና ሊበጁ የሚችሉ በCSS ብጁ ባህሪያት የተነደፉ ናቸው፣ ይህም አሁንም ወጥነት እንድንጠብቅ ያስችለናል፣ አሁንም አኒሜሽን ከተወሰኑ የአጠቃቀም ጉዳዮች ጋር ለማላመድ፣ ለምሳሌ በአንድ ቦታ ትንሽ ትልቅ “pulse” እነማ ከፈለጉ። የመጀመሪያውን የቁልፍ ፍሬሞች ማስመሰያ መገንባት ልንጋፈጠው የሚገባን የመጀመሪያው ዝቅተኛ-የተንጠለጠሉ ፍራፍሬዎች አንዱ "የደበዘዘ" አኒሜሽን ነው። ከቅርብ ጊዜ ፕሮጄክቶቼ ውስጥ በአንዱ ከደርዘን በላይ የተለያዩ የደበዘዙ ትርጓሜዎችን አግኝቻለሁ፣ እና አዎ፣ ሁሉም በቀላሉ ከ0 እስከ 1 ያለውን ግልጽነት አኒሜሽን አድርገዋል። እንግዲያው፣ አዲስ የቅጥ ሉህ እንፍጠር፣ kf-tokens.css ብለን እንጠራዋለን፣ ወደ ፕሮጀክታችን እናስገባው እና የኛ ቁልፍ ክፈፎች በውስጡ ትክክለኛ አስተያየቶችን እናስቀምጥ። /* keyframes-tokens.css */
/* * ደብዝዝ ውስጥ - የመግቢያ እነማ ደብዝዝ * አጠቃቀም፡ አኒሜሽን፡ kf-fade-in 0.3s ease-out; */ @ቁልፍ ክፈፎች kf-fade-in { ከ { ግልጽነት: 0; } ወደ { ግልጽነት: 1; } }
ይህ ነጠላ @የቁልፍ ክፈፎች መግለጫ በኮድ ቤዛችን ላይ ያሉትን ሁሉንም የተበታተኑ የደብዘዙ እነማዎችን ይተካል። ንጹህ፣ ቀላል እና አለምአቀፍ ተፈጻሚነት ያለው። እና አሁን ይህ ማስመሰያ ስለተገለፀልን በፕሮጀክታችን ውስጥ ከማንኛውም አካል ልንጠቀምበት እንችላለን፡- ሞዳል { አኒሜሽን፡ kf-fade-in 0.3s ease-out; }
.የመሳሪያ ምክር { አኒሜሽን: kf-fade-in 0.2s ቀላል-ውስጥ-ውጭ; }
ማስታወቂያ { አኒሜሽን፡ kf-fade-in 0.5s ease-out; }
የፔን ቁልፍ ክፈፎች ቶከኖች - ማሳያ 2 [ፎርክድድ] በAmit Sheen ይመልከቱ። ማስታወሻ፡ በሁሉም @የቁልፍ ክፈፎች ስሞቻችን ውስጥ kf-prefix እየተጠቀምን ነው። ይህ ቅድመ ቅጥያ በፕሮጀክቱ ውስጥ ካሉት እነማዎች ጋር ግጭትን መሰየምን የሚከለክል የስም ቦታ ሆኖ ያገለግላል እና እነዚህ የቁልፍ ክፈፎች ከኛ የቁልፍ ክፈፎች ቶከኖች ፋይል የመጡ መሆናቸውን ወዲያውኑ ግልጽ ያደርገዋል። ተለዋዋጭ ስላይድ መስራት የ kf-fade-in የቁልፍ ክፈፎች በጣም ጥሩ ይሰራሉ ቀላል እና ነገሮችን ለማበላሸት ትንሽ ቦታ ስለሌለ ነው። በሌሎች እነማዎች ግን፣ የበለጠ ተለዋዋጭ መሆን አለብን፣ እና እዚህ የCSS ብጁ ንብረቶችን ግዙፍ ሃይል መጠቀም እንችላለን። ይህ የቁልፍ ክፈፎች ቶከኖች ከተበታተኑ የማይንቀሳቀሱ እነማዎች ጋር ሲወዳደሩ የሚያበሩበት ነው። አንድ የተለመደ ሁኔታ እንውሰድ፡ "ተንሸራታች" እነማዎች። ግን ከየት ግባ? 100 ፒክስል ከቀኝ? 50% ከግራ? ከማያ ገጹ አናት ላይ መግባት አለበት? ወይም ምናልባት ከታች ወደ ውስጥ ይንሳፈፉ? በጣም ብዙ አማራጮች፣ ግን ለእያንዳንዱ አቅጣጫ እና ለእያንዳንዱ ልዩነት የተለየ የቁልፍ ክፈፎች ከመፍጠር ይልቅ፣ ከሁሉም ሁኔታዎች ጋር የሚስማማ አንድ ተለዋዋጭ ቶከን መገንባት እንችላለን። /* * ስላይድ ውስጥ - የአቅጣጫ ስላይድ እነማ * አቅጣጫን ለመቆጣጠር --kf-slide-ተጠቀም * ነባሪ፡ ከግራ ወደ ውስጥ ይንሸራተታል (-100%) * አጠቃቀም: * አኒሜሽን: kf-slide-in 0.3s ease-out; * --kf-ስላይድ-ከ: -100 ፒክስል 0; // ከግራ ያንሸራትቱ * --kf-ስላይድ-ከ: 100 ፒክስል 0; // ከቀኝ ያንሸራትቱ * --kf-ስላይድ-ከ: 0 -50 ፒክስል; // ከላይ ተንሸራታች */
@ቁልፍ ክፈፎች kf-slide-in { ከ { መተርጎም: var (--kf-slide-from, -100% 0); } ወደ { መተርጎም፡ 0 0; } }
አሁን --kf-slide-from ብጁ ንብረቱን በመቀየር ይህንን ነጠላ የ@keyframes ማስመሰያ ለማንኛውም የስላይድ አቅጣጫ መጠቀም እንችላለን፡- የጎን አሞሌ { አኒሜሽን፡ kf-slide-in 0.3s ease-out; /* ነባሪ እሴት ይጠቀማል፡ ከግራ ተንሸራታች */ }
ማስታወቂያ { አኒሜሽን፡ kf-slide-in 0.4s ease-out; --kf-ስላይድ-ከ: 0 -50 ፒክስል; /* ከላይ ተንሸራታች */ }
ሞዳል { አኒሜሽን፡ kf-ደብዝዝ-በ0.5s፣ kf-slide-in 0.5s cubic-bezier (0.34, 1.56, 0.64, 1); --kf-ስላይድ-ከ፡ 50px 50px; /* ከታች ወደ ቀኝ ያንሸራትቱ */ }
ይህ አካሄድ ወጥነትን እየጠበቅን የማይታመን ተለዋዋጭነት ይሰጠናል። አንድ የቁልፍ ፍሬም መግለጫ፣ ማለቂያ የሌላቸው ዕድሎች። የፔን ቁልፍ ክፈፎች ማስመሰያዎች ይመልከቱ - ማሳያ 3 [ሹካ የተደረገ] በአሚት ሺን። እና እነማዎቻችንን የበለጠ ተለዋዋጭ ለማድረግ ከፈለግን፣ “ተንሸራታች” ውጤቶችንም በመፍቀድ፣ እንችላለን።በቀላሉ --kf-slide-ን ወደ ብጁ ንብረት ያክሉ፣ በሚቀጥለው ክፍል ላይ እንደምናየው። ባለሁለት አቅጣጫ የማጉላት ቁልፍ ክፈፎች በፕሮጀክቶች ላይ የሚባዛው ሌላው የተለመደ አኒሜሽን የ"ማጉላት" ውጤቶች ነው። ለቶስት መልእክቶች ስውር ልኬት፣ ለሞዳሎች ድራማዊ ማጉላት፣ ወይም ለአርእስቶች ረጋ ያለ ልኬት-ወደታች ውጤት፣ የማጉላት እነማዎች በሁሉም ቦታ አሉ። ለእያንዳንዱ ልኬት እሴት የተለየ የቁልፍ ክፈፎች ከመፍጠር ይልቅ፣ አንድ ተለዋዋጭ የkf-zoom የቁልፍ ክፈፎችን እንገንባ፡-
/* * አጉላ - ልኬት እነማ * ሚዛን እሴቶችን ለመቆጣጠር --kf-zoom-from እና --kf-zoom- ተጠቀም * ነባሪ: ከ 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% አጉላ */
@ቁልፍ ክፈፎች kf-አጉላ { ከ { ልኬት: var (--kf-zoom-from, 0.8); } ወደ { ልኬት: var (--kf-አጉላ-ወደ, 1); } }
በአንድ ትርጉም፣ የምንፈልገውን ማንኛውንም የማጉላት ልዩነት ማሳካት እንችላለን፡- ቶስት { አኒሜሽን፡ kf-ስላይድ 0.2 ሰ፣ kf-ማጉላት 0.4s ቀላል-ውጭ; --kf-ስላይድ-ከ: 0 100%; /* ከላይ ተንሸራታች */ /* ነባሪ ማጉላትን ይጠቀማል፡ ሚዛኖች ከ 80% ወደ 100% */ }
ሞዳል { አኒሜሽን፡ kf-zoom 0.3s cubic-bezier (0.34, 1.56, 0.64, 1); --kf-አጉላ-ከ፡ 0; /* አስደናቂ ማጉላት ከ 0% ወደ 100% * / }
ርዕስ { አኒሜሽን፡ kf-ደብዝዝ-በ2ሰ፣ kf-ማጉላት 2s ቀላልነት; --kf-አጉላ-ከ፡ 1.2; --kf-ማጉላት-ወደ፡ 0.8; /* በቀስታ ወደ ታች ልኬት */ }
የ0.8 (80%) ነባሪ ለአብዛኛዎቹ የUI አካላት ልክ እንደ ቶስት መልእክቶች እና ካርዶች በትክክል ይሰራል፣ አሁንም ለልዩ ጉዳዮች ለማበጀት ቀላል ነው። የፔን ቁልፍ ፍሬሞች ማስመሰያዎችን ይመልከቱ - ማሳያ 4 [ሹካ የተደረገ] በአሚት ሺን። በቅርብ ምሳሌዎች ውስጥ አንድ አስደሳች ነገር አስተውለህ ይሆናል፡ እነማዎችን እያጣመርን ነበር። ከ@keyframes ቶከኖች ጋር አብሮ የመስራት አንዱ ቁልፍ ጠቀሜታዎች እርስ በርስ እንዲዋሃዱ የተነደፉ መሆናቸው ነው። ይህ ለስላሳ ቅንብር ሆን ተብሎ እንጂ በአጋጣሚ አይደለም. የአኒሜሽን ቅንብርን በኋላ ላይ በበለጠ ዝርዝር እንነጋገራለን፣ ችግር ሊፈጠርባቸው የሚችሉበትን ጨምሮ፣ ነገር ግን አብዛኛዎቹ ውህደቶች ተግባራዊ እና ቀላል ናቸው። ማሳሰቢያ፡ ይህን ጽሁፍ በምጽፍበት ጊዜ እና ምናልባት በመጻፍ ምክንያት፣ የመግቢያ አኒሜሽን አጠቃላይ ሀሳብን እንደገና ሳሰላስል አገኘሁት። በሲኤስኤስ ውስጥ ካሉት የቅርብ ጊዜ እድገቶች ጋር አሁንም ቢሆን ያስፈልጉናል? እንደ እድል ሆኖ፣ አዳም አርጋይል ተመሳሳይ ጥያቄዎችን መርምሮ በብሎግ ገልጾ ነበር። ይህ እዚህ ከተጻፈው ጋር አይቃረንም ነገር ግን ሊታሰብበት የሚገባ አካሄድ ያቀርባል፣በተለይ የእርስዎ ፕሮጀክቶች በመግቢያ እነማዎች ላይ የሚመረኮዙ ከሆነ። ተከታታይ እነማዎች እንደ “ደብዝዝ”፣ “ስላይድ” እና “አጉላ” ያሉ የመግቢያ እነማዎች አንድ ጊዜ ሲከሰቱ እና ሲቆሙ ቀጣይነት ያለው እነማዎች ትኩረትን ለመሳብ ወይም ቀጣይነት ያለው እንቅስቃሴን ለማመልከት ላልተወሰነ ጊዜ ይጫወታሉ። የሚያጋጥሙኝ ሁለቱ በጣም የተለመዱ ተከታታይ እነማዎች "ስፒን" (ለጭነት አመላካቾች) እና "pulse" (ጠቃሚ ንጥረ ነገሮችን ለማጉላት) ናቸው። እነዚህ እነማዎች የቁልፍ ፍሬሞችን ቶከን ለመፍጠር ልዩ ፈተናዎችን ያቀርባሉ። በተለምዶ ከአንዱ ግዛት ወደ ሌላ ግዛት ከሚሄዱ የመግቢያ እነማዎች በተለየ፣ ቀጣይነት ያለው እነማዎች በባህሪያቸው ዘይቤ በጣም ሊበጁ የሚችሉ መሆን አለባቸው። ስፒን ሐኪም እያንዳንዱ ፕሮጀክት በርካታ ስፒን እነማዎችን የሚጠቀም ይመስላል። አንዳንዶቹ በሰዓት አቅጣጫ ይሽከረከራሉ, ሌሎች ደግሞ በተቃራኒ ሰዓት አቅጣጫ ይሽከረከራሉ. አንዳንዶቹ አንድ ባለ 360 ዲግሪ ሽክርክር ያደርጋሉ፣ ሌሎች ደግሞ ለፈጣን ውጤት ብዙ ዙር ያደርጋሉ። ለእያንዳንዱ ልዩነት የተለየ የቁልፍ ክፈፎች ከመፍጠር ይልቅ ሁሉንም ሁኔታዎች የሚይዝ አንድ ተጣጣፊ ሽክርክሪት እንገንባ፡
/* * ስፒን - ማሽከርከር እነማ * የማዞሪያ ክልልን ለመቆጣጠር --kf-spin-from እና --kf-spin- ይጠቀሙ የማዞሪያውን መጠን ለመቆጣጠር --kf-spin-turns ይጠቀሙ * ነባሪ፡ ከ0deg ወደ 360deg (1 ሙሉ መዞር) ይሽከረከራል * አጠቃቀም: * እነማ፡ kf-spin 1s linear infinite; * --kf-spin-በመዞር: 2; // 2 ሙሉ ሽክርክሪቶች * --kf-spin-ከ: 0deg; --kf-spin-ወደ: 180deg; // ግማሽ ሽክርክሪት * --kf-spin-ከ: 0deg; --kf-spin-ወደ: -360deg; // በተቃራኒ ሰዓት አቅጣጫ */
@ቁልፍ ክፈፎች kf-spin { ከ { አሽከርክር: var (--kf-spin-from, 0deg); } ወደ { አሽከርክር: calc (var (-kf-spin-from, 0deg) + var (-kf-spin-to, 360deg) * var (--kf-spin-turns, 1)); } }
አሁን እኛ የምንወደውን ማንኛውንም የአከርካሪ ልዩነት መፍጠር እንችላለን-
የመጫኛ-ማዞሪያ { እነማ፡ kf-spin 1s linear infinite; /* ነባሪ ይጠቀማል፡ ከ0deg ወደ 360deg */ ይሽከረከራል }
ፈጣን ጫኚ { አኒሜሽን፡ kf-spin 1.2s ease-in-out ማለቂያ የሌለው አማራጭ; --kf-spin- turns: 3; / * በእያንዳንዱ ዑደት ለእያንዳንዱ አቅጣጫ 3 ሙሉ ማዞሪያዎች*/ }
.የተራመደ-ተገላቢጦሽ { አኒሜሽን: kf-spin 1.5s ደረጃዎች (8) ማለቂያ የሌለው; --kf-spin-ወደ: -360deg; /* በተቃራኒ ሰዓት አቅጣጫ */ }
.ስውር-ማወዛወዝ { አኒሜሽን፡ kf-spin 2s ease-in-out ማለቂያ የሌለው አማራጭ; --kf-spin-ከ: -16deg; --kf-spin-ወደ: 32deg; /* 36 ዲግሪ ማወዛወዝ፡ -18deg እና +18deg */ መካከል }
የፔን ቁልፍ ፍሬሞች ማስመሰያዎችን ይመልከቱ - ማሳያ 5 [ፎርክድ የተደረገ] በአሚት ሺን። የዚህ አቀራረብ ውበት ተመሳሳይ የቁልፍ ክፈፎች ስፒነሮችን ለመጫን, የሚሽከረከሩ አዶዎችን, የመወዛወዝ ተፅእኖዎችን እና ውስብስብ ባለብዙ ዙር እነማዎችን ጭምር ይሰራሉ. የ pulse Paradox የ pulse እነማዎች በጣም አስቸጋሪ ናቸው ምክንያቱም የተለያዩ ባህሪያትን "pulse" ማድረግ ይችላሉ. አንዳንዶቹ ሚዛኑን ይመቱታል፣ ሌሎች ግልጽነት የጎደለው ነገርን ይመታሉ፣ እና አንዳንድ የልብ ምት ባህሪያት እንደ ብሩህነት ወይም ሙሌት ያሉ ባህሪያት። ለእያንዳንዱ ንብረት የተለየ የቁልፍ ክፈፎች ከመፍጠር ይልቅ ከማንኛውም የCSS ንብረት ጋር የሚሰሩ የቁልፍ ክፈፎችን መፍጠር እንችላለን። ሚዛን እና ግልጽነት አማራጮች ያለው የ pulse keyframe ምሳሌ ይኸውና፡
/* * የልብ ምት - pulsing እነማ * የመጠን ክልልን ለመቆጣጠር --kf-pulse-scale- from እና --kf-pulse-scale- ይጠቀሙ ግልጽ ያልሆነ ክልልን ለመቆጣጠር --kf-pulse-opacity-ከእና --kf-pulse-opacity- ይጠቀሙ * ነባሪ፡ ምንም የልብ ምት የለም (ሁሉም እሴቶች 1) * አጠቃቀም: * አኒሜሽን፡ kf-pulse 2s ease-in-out ማለቂያ የሌለው አማራጭ; * --kf-pulse-scale-ከ: 0.95; --kf-pulse-ልኬት-ወደ፡ 1.05; // ልኬት ምት * --kf-pulse-opacity-ከ: 0.7; --kf-pulse-opacity-ወደ፡ 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-pulse-opacity-ከ: 0.5; /* ግልጽ ያልሆነ የልብ ምት */ }
.ማሳወቂያ-ነጥብ { አኒሜሽን፡ kf-pulse 0.6s ease-in-out infinite alternate; --kf-pulse-scale-ከ: 0.9; --kf-pulse-ልኬት-ወደ፡ 1.1; /* ልኬት ምት */ }
.ጽሑፍ-ማድመቅ { አኒሜሽን፡ kf-pulse 1.5s ease-out infinite; --kf-pulse-scale-ከ: 0.8; --kf-pulse-opacity-ከ: 0.2; /* ልኬት እና ግልጽ ያልሆነ የልብ ምት */ }
የፔን ቁልፍ ክፈፎች ማስመሰያዎች - ማሳያ 6 [ፎርክድ] በAmit Sheen ይመልከቱ። ይህ ነጠላ የ kf-pulse ቁልፍ ፍሬም ሁሉንም ነገር ከስውር ትኩረት እስከ ድራማ ድምቀቶች ድረስ ማስተናገድ ይችላል፣ ሁሉንም ለማበጀት ቀላል ነው። የላቀ ማቅለል የቁልፍ ክፈፎች ቶከኖችን ስለመጠቀም ካሉት ጥሩ ነገሮች አንዱ የአኒሜሽን ቤተ-መጽሐፍታችንን ማስፋት እና አብዛኛዎቹ ገንቢዎች ከባዶ ለመፃፍ የማይቸገሩትን እንደ ላስቲክ ወይም ቦውንስ ያሉ ውጤቶችን ለማቅረብ ምን ያህል ቀላል እንደሆነ ነው። የዝላይን ቁመት ለመቆጣጠር --kf-bounce-ከብጁ ንብረትን የሚጠቀም ቀላል የ"bounce" የቁልፍ ክፈፎች ማስመሰያ ምሳሌ እዚህ አለ። /* * ቦውንድ - የመግቢያ አኒሜሽን እየጎለበተ የዝላይን ቁመት ለመቆጣጠር --kf-bounce-ን ይጠቀሙ * ነባሪ፡ ከ100 ቪኤች (ከስክሪን ውጪ) ይዘላል * አጠቃቀም: * እነማ፡ kf-bounce 3s ease-in; * --kf-bounce-ከ: 200 ፒክስል; // ከ 200 ፒክስል ቁመት ይዝለሉ */
@keyframes kf-bounce { 0% { መተርጎም: 0 calc (var (-kf-bounce-from, 100vh) * -1); }
34% { መተርጎም: 0 calc (var (-kf-bounce-from, 100vh) * -0.4); }
55% { መተርጎም: 0 calc (var (-kf-bounce-from, 100vh) * -0.2); }
72% { መተርጎም: 0 calc (var (-kf-bounce-from, 100vh) * -0.1); }
85% { መተርጎም: 0 calc (var (-kf-bounce-from, 100vh) * -0.05); }
94% { መተርጎም: 0 calc (var (-kf-bounce-from, 100vh) * -0.025); }
99% { መተርጎም: 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-ላስቲክ-ከ-X: -50 ፒክስል; * --kf-ላስቲክ-ከ-Y፡ -200 ፒክስል; // ከ (-50px፣ -200px) አስገባ */
@keyframes kf-elastic-in { 0% { መተርጎም: calc (var (-kf-elastic-from-X, -50vw) * 1) calc (var (-kf-elastic-from-Y, 0px) * 1); }
16% { መተርጎም: calc (var (-kf-elastic-from-X, -50vw) * -0.3227) calc (var (-kf-elastic-from-Y, 0px) * -0.3227); }
28% { መተርጎም፡ calc(var(-kf-elastic-from-X, -50vw) * 0.1312)ካልክ (ቫር (--kf-elastic-from-Y, 0px) * 0.1312); }
44% { መተርጎም: calc (var (-kf-elastic-from-X, -50vw) * -0.0463) ካልሲ (var (-kf-elastic-from-Y, 0px) * -0.0463); }
59% { መተርጎም: calc (var (-kf-elastic-from-X, -50vw) * 0.0164) calc (var (-kf-elastic-from-Y, 0px) * 0.0164); }
73% { መተርጎም: calc (var (-kf-elastic-from-X, -50vw) * -0.0058) calc (var (-kf-elastic-from-Y, 0px) * -0.0058); }
88% { መተርጎም: 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-አጉላ-ከ፡ 0; }
.ተንሸራተቱ { እነማ-አጻጻፍ፡ add; /* ሁለቱም እነማዎች ተርጉመውታል */ አኒሜሽን፡ kf-bounce 3s በቀላሉ መግባት፣ kf-ስላይድ-በ 3s ቀላል-ውጭ; --kf-ስላይድ-ከ: -200 ፒክስል; }
.ላስቲክ-ውስጥ { አኒሜሽን: kf-elastic-in 2s ቀላል-ውስጥ-ውጭ ሁለቱም; }
የፔን ቁልፍ ክፈፎች ማስመሰያዎች - ማሳያ 7 [ፎርክድ] በአሚት ሺን። እስከዚህ ነጥብ ድረስ የቁልፍ ክፈፎችን በብልህ እና በብቃት እንዴት ማጠናከር እንደምንችል አይተናል። እርግጥ ነው፣ የፕሮጀክትዎን ፍላጎቶች በተሻለ ለማስማማት ነገሮችን ማስተካከል ሊፈልጉ ይችላሉ፣ ነገር ግን በርካታ የተለመዱ እነማዎችን እና የዕለት ተዕለት አጠቃቀም ጉዳዮችን ምሳሌዎችን ሸፍነናል። እና በእነዚህ የቁልፍ ክፈፎች ቶከኖች አማካኝነት አሁን በመላው ፕሮጀክት ላይ ወጥነት ያለው እና ሊቆዩ የሚችሉ እነማዎችን ለመፍጠር ኃይለኛ የግንባታ ብሎኮች አሉን። ከአሁን በኋላ የተባዙ የቁልፍ ክፈፎች የሉም፣ ከአሁን በኋላ የአለም አቀፍ ወሰን ግጭቶች የሉም። ሁሉንም የአኒሜሽን ፍላጎቶቻችንን ለማስተናገድ ንፁህ ምቹ መንገድ ብቻ። ትክክለኛው ጥያቄ ግን እነዚህን የግንባታ ብሎኮች አንድ ላይ እንዴት እናዘጋጃለን? ሁሉንም በአንድ ላይ ማስቀመጥ መሰረታዊ የቁልፍ ፍሬሞችን ማጣመር ቀላል እንደሆነ አይተናል። የመጀመሪያውን አኒሜሽን ከመግለጽ በስተቀር ምንም ልዩ ነገር አያስፈልገንም, ሁለተኛውን ይግለጹ, ተለዋዋጮችን እንደ አስፈላጊነቱ ያዘጋጁ እና ያ ነው. /* ደብዝዝ ውስጥ + ስላይድ በ */ ቶስት { አኒሜሽን፡ kf-ደብዝዝ-በ 0.4s፣ kf-slide-in 0.4s cubic-bezier (0.34, 1.56, 0.64, 1); --kf-ስላይድ-ከ፡ 0 40px; }
/* አጉላ + ደብዝዝ */ ሞዳል { አኒሜሽን፡ kf-ደብዝዝ-በ 0.3s፣ kf-zoom 0.3s cubic-bezier (0.34, 1.56, 0.64, 1); --kf-አጉላ-ከ፡ 0.7; --kf-አጉላ-ወደ፡ 1; }
/* በ + ምት */ ስላይድ ማስታወቂያ { አኒሜሽን፡ kf-ስላይድ 0.5s፣ kf-pulse 1.2s ቀላል-ውስጥ-ውጭ ማለቂያ የሌለው ተለዋጭ; --kf-ስላይድ-ከ: -100 ፒክስል 0; --kf-pulse-scale-ከ: 0.95; --kf-pulse-ልኬት-ወደ፡ 1.05; }
እነዚህ ጥምሮች በሚያምር ሁኔታ ይሰራሉ ምክንያቱም እያንዳንዱ አኒሜሽን የተለየ ንብረት ላይ ያነጣጠረ ነው: ግልጽነት, ትራንስፎርሜሽን (መተርጎም / ልኬት) ወዘተ. ነገር ግን አንዳንድ ጊዜ ግጭቶች አሉ, እና ለምን እና እንዴት እነሱን መቋቋም እንዳለብን ማወቅ አለብን. ሁለት እነማዎች አንድ አይነት ንብረት ለማንቃት ሲሞክሩ - ለምሳሌ ሁለቱም አኒሜሽን ሚዛን ወይም ሁለቱም አኒሜሽን ግልጽነት - ውጤቱ እርስዎ የሚጠብቁት አይሆንም። በነባሪ፣ ከአኒሜሽኑ ውስጥ አንዱ ብቻ ለዛ ንብረት ተተግብሯል፣ ይህም በአኒሜሽን ዝርዝሩ ውስጥ የመጨረሻው ነው። ይህ CSS በተመሳሳይ ንብረት ላይ ብዙ እነማዎችን እንዴት እንደሚይዝ ገደብ ነው። ለምሳሌ፣ ይህ እንደታሰበው አይሰራም ምክንያቱም የ kf-pulse animation ብቻ ነው የሚሰራው። መጥፎ - ጥምር { አኒሜሽን፡ kf-ማጉላት 0.5s ወደፊት፣ kf-pulse 1.2s ማለቂያ የሌለው ተለዋጭ; --kf-አጉላ-ከ፡ 0.5; --kf-ማጉላት-ወደ፡ 1.2; --kf-pulse-scale-ከ: 0.8; --kf-pulse-ልኬት-ወደ፡ 1.1; }
አኒሜሽን መደመር ተመሳሳዩን ንብረት የሚነኩ ብዙ እነማዎችን ለመቆጣጠር ቀላሉ እና ቀጥተኛው መንገድ የአኒሜሽን-ጥንቅር ባህሪን መጠቀም ነው። ከላይ ባለው የመጨረሻ ምሳሌ የkf-pulse animation የkf-zoom animation ይተካዋል፣ስለዚህ የመነሻ ማጉላትን ስለማንመለከት እና የሚጠበቀውን ልኬት ወደ 1.2 አናገኝም። አኒሜሽን-ጥንቅር ለመጨመር በማዘጋጀት አሳሹ ሁለቱንም እነማዎች እንዲያጣምር እንነግረዋለን። ይህ የምንፈልገውን ውጤት ይሰጠናል. .አካል-ሁለት { እነማ-አጻጻፍ፡ add; }
የፔን ቁልፍ ክፈፎች ማስመሰያዎች - ማሳያ 8 [ፎርክድ] በAmit Sheen ይመልከቱ። በተመሳሳዩ ንብረት ላይ ተፅእኖዎችን ለማጣመር በምንፈልግበት ለብዙ ጉዳዮች ይህ አቀራረብ በጥሩ ሁኔታ ይሰራል። እነማዎችን ከስታቲስቲክ ንብረት እሴቶች ጋር ማጣመር ሲያስፈልገን ጠቃሚ ነው። ለምሳሌ፣ የትርጉም ንብረቱን በትክክል በምንፈልገው ቦታ ላይ ለማስቀመጥ የሚጠቀም ኤለመንት ካለን እና ከዚያም በkf-slide-in ቁልፍ ክፈፎች ውስጥ እነማ ማድረግ ከፈለግን፣ ያለ አኒሜሽን-ቅንብር መጥፎ የሚታይ ዝላይ እናገኛለን። የፔን ቁልፍ ፍሬሞች ማስመሰያዎች ይመልከቱ - ማሳያ 9 [ፎርክድ] በAmit Sheen። አኒሜሽን-ጥንቅር ለመደመር ከተዘጋጀ፣ አኒሜሽኑ ያለችግር ከነባሩ ጋር ይጣመራል።መለወጥ፣ ስለዚህ ኤለመንቱ እንዳለ ይቆያል እና እንደተጠበቀው ይንቀሳቀሳል። አኒሜሽን Stagger ሌላው ብዙ እነማዎችን የማስተናገጃ መንገድ እነሱን "መደናቀፍ" ነው - ማለትም የመጀመሪያው ካለቀ በኋላ ሁለተኛውን እነማ በትንሹ ይጀምሩ። ለእያንዳንዱ ጉዳይ የሚሰራ መፍትሄ አይደለም, ነገር ግን ቀጣይነት ያለው አኒሜሽን ተከትሎ የመግቢያ አኒሜሽን ሲኖረን ጠቃሚ ነው. /* ደብዛዛ በ + ግልጽ ያልሆነ የልብ ምት */ ማስታወቂያ { አኒሜሽን፡ kf-የደበዘዘ-በ 2 ሰ ቀላል-ውጭ ፣ kf-pulse 0.5s 2s ቅለት-ውስጥ-ውጭ ማለቂያ የሌለው አማራጭ; --kf-pulse-opacity-ወደ: 0.5; }
የፔን ቁልፍ ክፈፎች ማስመሰያዎች ይመልከቱ - ማሳያ 10 [ሹካ የተደረገ] በአሚት ሺን። ጉዳዮችን ማዘዝ የምንሰራቸው እነማዎች አብዛኛው ክፍል የትራንስፎርሜሽን ንብረቱን ይጠቀማሉ። በአብዛኛዎቹ ሁኔታዎች, ይህ በቀላሉ የበለጠ ምቹ ነው. የትራንስፎርሜሽን እነማዎች በጂፒዩ ሊጣደፉ ስለሚችሉ የአፈጻጸም ጠቀሜታም አለው። ትራንስፎርሞችን ከተጠቀምን ግን ለውጦቻችንን የምናከናውንበት ቅደም ተከተል አስፈላጊ መሆኑን መቀበል አለብን። ብዙ። እስካሁን ድረስ በቁልፍ ክፈፎች ውስጥ፣ የግለሰብ ለውጦችን ተጠቅመናል። እንደ መግለጫው ፣ እነዚህ ሁል ጊዜ በቋሚ ቅደም ተከተል ይተገበራሉ-በመጀመሪያ ፣ ኤለመንቱ ተተርጉሟል ፣ ከዚያ ይሽከረከራል ፣ ከዚያ ሚዛን። ይህ ምክንያታዊ ነው እና ብዙዎቻችን የምንጠብቀው ነው. ነገር ግን, የትራንስፎርሜሽን ንብረቱን ከተጠቀምን, ተግባሮቹ የተፃፉበት ቅደም ተከተል የተተገበሩበት ቅደም ተከተል ነው. በዚህ ሁኔታ አንድን ነገር በኤክስ ዘንግ ላይ 100 ፒክስል ብናንቀሳቅስ እና ከዚያም በ 45 ዲግሪ ብንዞር መጀመሪያ በ 45 ዲግሪ ማሽከርከር እና ከዚያም 100 ፒክስል ከማንቀሳቀስ ጋር ተመሳሳይ አይደለም. /* ሮዝ ካሬ፡ መጀመሪያ መተርጎም፣ ከዚያ አሽከርክር */ ምሳሌ - አንድ { ትራንስፎርመር: መተርጎምX (100 ፒክስል) አሽከርክር (45ዲግ); }
/* አረንጓዴ ካሬ፡ መጀመሪያ አሽከርክር፣ ከዚያ ተርጉም */ ምሳሌ-ሁለት { ለውጥ: አሽከርክር (45ዲግ) ተርጓሚ ኤክስ (100 ፒክስል); }
የፔን ቁልፍ ክፈፎች ማስመሰያዎች - ማሳያ 11 [ፎርክድ] በአሚት ሺን። ነገር ግን በትራንስፎርሜሽን ቅደም ተከተል መሰረት፣ ሁሉም ግለሰብ ይቀየራሉ - ለቁልፍ ክፈፎች ቶከኖች የተጠቀምንባቸው ነገሮች ሁሉ ከለውጡ ተግባራት በፊት ይከናወናሉ። ያ ማለት በትራንስፎርሜሽን ንብረቱ ላይ ያቀናብሩት ማንኛውም ነገር ከአኒሜሽን በኋላ ይከሰታል። ነገር ግን፣ ለምሳሌ፣ ከkf-spin keyframes ጋር አንድ ላይ ከተረጎሙ፣ ትርጉሙ ከአኒሜሽኑ በፊት ይከናወናል። አሁንም ግራ ገባኝ?! ይህ የማይለዋወጥ እሴቶች ለተመሳሳይ አኒሜሽን የተለያዩ ውጤቶችን ወደሚያስከትሉ ሁኔታዎች ይመራል፣ ለምሳሌ በሚከተለው ሁኔታ፡
/* ለሁለቱም ስፒነሮች የጋራ አኒሜሽን */ እሽክርክሪት { እነማ፡ kf-spin 1s linear infinite; }
/* ሮዝ ስፒነር፡ ከመሽከርከር በፊት መተርጎም (የግለሰብ ለውጥ) */ ስፒነር-ሮዝ { መተርጎም: 100% 50%; }
/* አረንጓዴ እሽክርክሪት፡ አሽከርክር ከዛ መተርጎም (የተግባር ቅደም ተከተል) */ .spinner-አረንጓዴ { ለውጥ: መተርጎም (100%, 50%); }
የፔን ቁልፍ ክፈፎች ማስመሰያዎች ይመልከቱ - ማሳያ 12 [ሹካ የተደረገ] በአሚት ሺን። የመጀመሪያው ስፒን (ሮዝ) የ kf-spin መሽከርከር ከመጀመሩ በፊት የሚከሰት ትርጉም ሲያገኝ በመጀመሪያ ወደ ቦታው ይንቀሳቀሳል ከዚያም ይሽከረከራል. ሁለተኛው እሽክርክሪት (አረንጓዴ) ከግለሰብ ለውጥ በኋላ የሚፈጠረውን የትርጉም() ተግባር ያገኛል፣ ስለዚህ ኤለመንቱ መጀመሪያ ይሽከረከራል፣ ከዚያም አሁን ካለው አንግል አንፃር ይንቀሳቀሳል፣ እና ያንን ሰፊ ምህዋር ውጤት እናገኛለን። አይ, ይህ ስህተት አይደለም. ስለ CSS ልናውቃቸው ከሚገባን እና ከብዙ አኒሜሽን ወይም ከበርካታ ትራንስፎርሜሽን ጋር ስንሰራ ልናስታውሳቸው ከሚያስፈልጉን ነገሮች ውስጥ አንዱ ብቻ ነው። ካስፈለገም የማሽከርከር() ተግባርን በመጠቀም አባሎችን የሚሽከረከሩ ተጨማሪ የkf-spin-alt የቁልፍ ክፈፎች መፍጠር ይችላሉ። የተቀነሰ እንቅስቃሴ እና ስለ አማራጭ የቁልፍ ክፈፎች እየተነጋገርን ሳለ፣ "ምንም እነማ" የሚለውን አማራጭ ችላ ማለት አንችልም። የቁልፍ ክፈፎች ቶከኖችን መጠቀም ትልቅ ጥቅም ከሚኖረው አንዱ ተደራሽነት መጋገር መቻሉ ነው፣ እና በእውነቱ ለማድረግ በጣም ቀላል ነው። የቁልፍ ክፈፎችን በተደራሽነት በማሰብ በመንደፍ፣ የተቀነሰ እንቅስቃሴን የሚመርጡ ተጠቃሚዎች ያለ ተጨማሪ ስራ ወይም ኮድ ብዜት ለስላሳ፣ ብዙም ትኩረት የሚስብ ተሞክሮ እንዲያገኙ ማድረግ እንችላለን። “የተቀነሰ እንቅስቃሴ” ትክክለኛ ትርጉም ከአንድ አኒሜሽን ወደ ሌላ፣ እና ከፕሮጀክት ወደ ፕሮጀክት ትንሽ ሊለውጥ ይችላል፣ ግን እዚህ ላይ ልብ ሊሏቸው የሚገቡ ጥቂት ጠቃሚ ነጥቦች አሉ። የቁልፍ ፍሬሞችን መዝጋት አንዳንድ እነማዎች ሊለሰልሱ ወይም ሊዘገዩ ቢችሉም፣ የተቀነሰ እንቅስቃሴ ሲጠየቅ ሙሉ በሙሉ መጥፋት ያለባቸው ሌሎች አሉ። የ pulse እነማዎች ጥሩ ምሳሌ ናቸው። እነዚህ እነማዎች በተቀነሰ የእንቅስቃሴ ሁኔታ ውስጥ እንደማይሄዱ ለማረጋገጥ በቀላሉ በተገቢው የሚዲያ መጠይቅ ውስጥ ልንጠቅሳቸው እንችላለን።
@ሚዲያ (የተቀነሰ እንቅስቃሴን ይመርጣል፡- ምርጫ የለም) { @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); } } }
ይህ የሚመርጡትን የተቀነሰ እንቅስቃሴን ያቀናበሩ ተጠቃሚዎች እነማውን እንዳያዩ እና ከምርጫቸው ጋር የሚዛመድ ልምድ እንደሚያገኙ ያረጋግጣል። ፈጣን መግቢያ እንደ የመግቢያ እነማዎች ያሉ በቀላሉ ልናስወግዳቸው የማንችላቸው የቁልፍ ክፈፎች አሉ። እሴቱ መለወጥ አለበት ፣ መንቀሳቀስ አለበት ፣ አለበለዚያ ኤለመንቱ ትክክለኛ እሴቶች አይኖረውም. ነገር ግን በተቀነሰ እንቅስቃሴ, ይህ ከመጀመሪያው እሴት ሽግግር ፈጣን መሆን አለበት. ይህንን ለማግኘት፣ እሴቱ ወዲያውኑ ወደ መጨረሻው ሁኔታ የሚዘልበትን ተጨማሪ የቁልፍ ክፈፎች ስብስብ እንገልፃለን። እነዚህ የእኛ ነባሪ የቁልፍ ክፈፎች ይሆናሉ። ከዚያ፣ ልክ እንደ ቀደመው ምሳሌ፣ ለምርጫዎች-የተቀነሰ-እንቅስቃሴ ወደ ምርጫ-የተቀናበረ የሚዲያ መጠይቅ ውስጥ ያሉትን መደበኛ የቁልፍ ክፈፎች እንጨምራለን። /* ለተቀነሰ እንቅስቃሴ ወዲያውኑ ብቅ ይበሉ */ @ቁልፍ ክፈፎች kf-አጉላ { ከ፣ ወደ { ልኬት: var (--kf-አጉላ-ወደ, 1); } }
@ሚዲያ (የተቀነሰ እንቅስቃሴን ይመርጣል፡- ምርጫ የለም) { /* ኦሪጅናል የማጉላት ቁልፍ ክፈፎች */ @ቁልፍ ክፈፎች kf-አጉላ { ከ { ልኬት: var (--kf-zoom-from, 0.8); } ወደ { ልኬት: var (--kf-አጉላ-ወደ, 1); } } }
በዚህ መንገድ፣ የተቀነሰ እንቅስቃሴን የሚመርጡ ተጠቃሚዎች ኤለመንቱ በመጨረሻው ሁኔታ ላይ ወዲያውኑ ብቅ ሲል ያዩታል፣ ሁሉም ሰው ደግሞ የታነመ ሽግግር ያገኛል። ለስላሳ አቀራረብ አንዳንድ እንቅስቃሴዎችን ማቆየት የምንፈልግበት፣ ነገር ግን ከመጀመሪያው አኒሜሽን የበለጠ ለስላሳ እና የተረጋጋ እንዲሆን የምንፈልግባቸው አጋጣሚዎች አሉ። ለምሳሌ፣ የቢውሱን መግቢያ በእርጋታ በመደበዝ መተካት እንችላለን።
@keyframes kf-bounce { /* ለተቀነሰ እንቅስቃሴ ለስላሳ መደብዘዝ */ }
@ሚዲያ (የተቀነሰ እንቅስቃሴን ይመርጣል፡- ምርጫ የለም) { @keyframes kf-bounce { /* ኦሪጅናል የብሶት ቁልፍ ክፈፎች */ } }
አሁን፣ እንቅስቃሴን የቀነሰላቸው ተጠቃሚዎች አሁንም የመልክ ስሜት ያገኛሉ፣ ነገር ግን ያለ ከፍተኛ የቢብ ወይም የላስቲክ አኒሜሽን እንቅስቃሴ። ከግንባታው እቃዎች ጋር, የሚቀጥለው ጥያቄ እንዴት የእውነተኛው የስራ ሂደት አካል ማድረግ እንደሚቻል ነው. ተለዋዋጭ የቁልፍ ክፈፎችን መጻፍ አንድ ነገር ነው, ነገር ግን በአንድ ትልቅ ፕሮጀክት ውስጥ አስተማማኝ እንዲሆኑ ማድረግ በጣም አስቸጋሪ በሆነ መንገድ ለመማር ጥቂት ስልቶችን ይጠይቃል. የትግበራ ስልቶች እና ምርጥ ልምዶች አንዴ ጠንካራ የቁልፍ ክፈፎች ቶከኖች ቤተመፃህፍት ካለን፣ ዋናው ፈተና እንዴት ወደ ዕለታዊ ስራ ማምጣት እንደምንችል ነው።
ፈተናው ሁሉንም የቁልፍ ክፈፎች በአንድ ጊዜ መጣል እና ችግሩ እንደተፈታ ማወጅ ነው, ነገር ግን በተግባር ጥሩ ውጤት የሚገኘው ቀስ በቀስ ጉዲፈቻ እንደሆነ ተረድቻለሁ. እንደ መደብዘዝ ወይም ስላይድ ባሉ በጣም የተለመዱ እነማዎች ይጀምሩ። እነዚህ ትልቅ ድጋሚ መፃፍ ሳያስፈልጋቸው ወዲያውኑ ዋጋ የሚያሳዩ ቀላል ድሎች ናቸው። ስያሜ መስጠት ሌላው ትኩረት ሊሰጠው የሚገባ ነጥብ ነው። ወጥ የሆነ ቅድመ ቅጥያ ወይም የስም ቦታ የትኛዎቹ እነማዎች ቶከኖች እንደሆኑ እና የትኞቹ አካባቢያዊ አንድ ጊዜ እንደሆኑ ግልጽ ያደርገዋል። እንዲሁም ድንገተኛ ግጭቶችን ይከላከላል እና አዲስ የቡድን አባላት የጋራ ስርዓቱን በጨረፍታ እንዲያውቁ ያግዛል። ሰነዶች ልክ እንደ ኮዱ ራሱ አስፈላጊ ነው. ከእያንዳንዱ የቁልፍ ክፈፎች ማስመሰያ በላይ አጭር አስተያየት እንኳን ሰዓታት በኋላ መገመትን ይቆጥባል። አንድ ገንቢ የማስመሰያ ፋይሉን መክፈት፣ የሚፈልጉትን ውጤት መፈተሽ እና የአጠቃቀም ስልቱን በቀጥታ ወደ ክፍላቸው መቅዳት መቻል አለበት። ተለዋዋጭነት ይህ አካሄድ ጥረቱን የሚያስቆጭ ነው። አስተዋይ የሆኑ ብጁ ንብረቶችን በማጋለጥ ለቡድኖች ስርዓቱን ሳይጥስ አኒሜሽኑን እንዲያመቻቹ ቦታ እንሰጣለን። በተመሳሳይ ጊዜ, ከመጠን በላይ ላለመውሰድ ይሞክሩ. አስፈላጊ የሆኑትን ቁልፎች ያቅርቡ እና የቀረውን አስተያየት ይስጡ. በመጨረሻም ተደራሽነትን አስታውስ። እያንዳንዱ አኒሜሽን የተቀነሰ እንቅስቃሴ አማራጭን አይፈልግም፣ ግን ብዙዎች ያደርጉታል። እነዚህን ማስተካከያዎች ቀድመው መጋገር ማለት በኋላ ላይ ዳግም ማስተካከል የለብንም ማለት ነው፣ እና ተጠቃሚዎቻችን በጭራሽ ባይጠቅሱትም እንኳን የሚያስተውሉትን የእንክብካቤ ደረጃ ያሳያል።
በእኔ ልምድ፣ የቁልፍ ፍሬሞችን ቶከኖች እንደ የንድፍ ማስመሰያዎች የስራ ሂደት አካል አድርጎ ማየታቸው ተጣብቀው እንዲቆዩ የሚያደርጋቸው ነው። ቦታው ላይ ከደረሱ በኋላ እንደ ልዩ ተፅዕኖዎች መሰማት ያቆማሉ እና የንድፍ ቋንቋ አካል ይሆናሉ, ምርቱ እንዴት እንደሚንቀሳቀስ እና ምላሽ እንደሚሰጥ ተፈጥሯዊ ቅጥያ. መጠቅለል እነማዎች የሕንፃ መገናኛዎች በጣም አስደሳች ከሆኑት ክፍሎች ውስጥ አንዱ ሊሆኑ ይችላሉ ፣ ግን መዋቅር ከሌለ ፣ እንዲሁም ከትልቅ የብስጭት ምንጮች ውስጥ አንዱ ሊሆኑ ይችላሉ። የቁልፍ ክፈፎችን እንደ ቶከኖች በመመልከት፣ ብዙውን ጊዜ የተዝረከረከ እና ለማስተዳደር ከባድ የሆነ ነገር ወስደህ ወደ ግልጽ፣ ሊገመት የሚችል ሥርዓት ይለውጡት። ትክክለኛው እሴት ጥቂት የኮድ መስመሮችን በማስቀመጥ ላይ ብቻ አይደለም. ደብዝዝ፣ ተንሸራታች፣ አጉላ ወይም ስፒን ስትጠቀሚ በፕሮጀክቱ ውስጥ ምን አይነት ባህሪ እንዳለው በትክክል እንደምታውቁት በመተማመን ነው። ማለቂያ የለሽ ልዩነቶች ትርምስ ከሌለ ከብጁ ንብረቶች በሚመጣው ተለዋዋጭነት ውስጥ ነው። እና እንደ ከመጨመር ይልቅ በመሠረቱ ላይ በተገነባው ተደራሽነት ውስጥ ነውአንድ በኋላ ሀሳብ. እነዚህ ሃሳቦች በተለያዩ ቡድኖች እና የተለያዩ የኮድ ቤዝስ ውስጥ ሲሰሩ አይቻለሁ፣ እና ስርዓተ-ጥለት ሁሌም ተመሳሳይ ነው። ማስመሰያዎች አንዴ ከተቀመጡ፣ የቁልፍ ክፈፎች የተበታተኑ የተንኮል ስብስብ መሆናቸው ያቆማሉ እና የንድፍ ቋንቋ አካል ይሆናሉ። ምርቱን የበለጠ ሆን ተብሎ, የበለጠ ወጥነት ያለው እና የበለጠ ህይወት እንዲሰማቸው ያደርጋሉ. ከዚህ ጽሁፍ አንድ ነገር ከወሰድክ ይህ ይሁን፡ አኒሜሽን ለቀለም፣ ለታይፕ አጻጻፍ እና ክፍተት የምንሰጠው አይነት እንክብካቤ እና መዋቅር ይገባቸዋል። በቁልፍ ክፈፎች ቶከኖች ላይ ትንሽ ኢንቬስትመንት የበይነገጽዎ በተንቀሳቀሰ ቁጥር ይከፍላል።
