దీన్ని చిత్రించండి: మీరు కొత్త ప్రాజెక్ట్లో చేరి, కోడ్బేస్లోకి ప్రవేశించండి మరియు మొదటి కొన్ని గంటల్లోనే, మీరు విసుగు తెప్పించేదాన్ని కనుగొంటారు. స్టైల్షీట్లలో చెల్లాచెదురుగా, మీరు ఒకే ప్రాథమిక యానిమేషన్ల కోసం బహుళ @keyframes నిర్వచనాలను కనుగొంటారు. మూడు వేర్వేరు ఫేడ్-ఇన్ ప్రభావాలు, రెండు లేదా మూడు స్లయిడ్ వైవిధ్యాలు, కొన్ని జూమ్ యానిమేషన్లు మరియు కనీసం రెండు వేర్వేరు స్పిన్ యానిమేషన్లు ఎందుకంటే, ఎందుకు కాదు? @keyframes పల్స్ { నుండి { స్థాయి: 1; } వరకు { స్థాయి: 1.1; } }
@keyframes పెద్ద పల్స్ { 0%, 20%, 100% { స్థాయి: 1; } 10%, 40% { స్థాయి: 1.2; } }
ఈ దృశ్యం తెలిసినట్లు అనిపిస్తే, మీరు ఒంటరిగా లేరు. వివిధ ప్రాజెక్ట్లలో నా అనుభవంలో, కీఫ్రేమ్లను ఏకీకృతం చేయడం మరియు ప్రామాణీకరించడం నేను అందించగల అత్యంత స్థిరమైన శీఘ్ర విజయాలలో ఒకటి. ఇది చాలా నమ్మదగిన నమూనాగా మారింది, నేను ఇప్పుడు ఏదైనా కొత్త కోడ్బేస్లో నా మొదటి టాస్క్లలో ఒకటిగా ఈ క్లీనప్ కోసం ఎదురు చూస్తున్నాను. ది లాజిక్ బిహైండ్ ది ఖోస్ మీరు దాని గురించి ఆలోచించినప్పుడు ఈ రిడెండెన్సీ ఖచ్చితంగా అర్ధమవుతుంది. మనమందరం మా రోజువారీ పనిలో ఒకే విధమైన ప్రాథమిక యానిమేషన్లను ఉపయోగిస్తాము: ఫేడ్లు, స్లయిడ్లు, జూమ్లు, స్పిన్లు మరియు ఇతర సాధారణ ప్రభావాలు. ఈ యానిమేషన్లు చాలా సూటిగా ఉంటాయి మరియు పనిని పూర్తి చేయడానికి శీఘ్ర @keyframes నిర్వచనాన్ని విప్ చేయడం సులభం. కేంద్రీకృత యానిమేషన్ సిస్టమ్ లేకుండా, డెవలపర్లు సహజంగా ఈ కీఫ్రేమ్లను మొదటి నుండి వ్రాస్తారు, ఇలాంటి యానిమేషన్లు ఇప్పటికే కోడ్బేస్లో ఎక్కడైనా ఉన్నాయని తెలియదు. కాంపోనెంట్-బేస్డ్ ఆర్కిటెక్చర్లలో పని చేస్తున్నప్పుడు ఇది చాలా సాధారణం (ఈ రోజుల్లో మనలో చాలా మంది దీన్ని చేస్తారు), ఎందుకంటే టీమ్లు తరచుగా అప్లికేషన్లోని వివిధ భాగాలలో సమాంతరంగా పని చేస్తాయి. ఫలితం? యానిమేషన్ గందరగోళం. ది స్మాల్ ప్రాబ్లమ్ కీఫ్రేమ్ల డూప్లికేషన్తో అత్యంత స్పష్టమైన సమస్యలు అభివృద్ధి సమయం వృధా మరియు అనవసరమైన కోడ్ ఉబ్బు. బహుళ కీఫ్రేమ్ నిర్వచనాలు అంటే అవసరాలు మారినప్పుడు నవీకరించడానికి బహుళ స్థలాలు. మీ ఫేడ్ యానిమేషన్ సమయాన్ని సర్దుబాటు చేయాలా? మీరు మీ కోడ్బేస్లో ప్రతి సందర్భాన్ని వెతకాలి. సడలింపు ఫంక్షన్లను ప్రామాణీకరించాలనుకుంటున్నారా? అన్ని వైవిధ్యాలను కనుగొనడంలో అదృష్టం. నిర్వహణ పాయింట్ల యొక్క ఈ గుణకారం సాధారణ యానిమేషన్ అప్డేట్లను కూడా సమయం తీసుకునే పనిగా చేస్తుంది. పెద్ద సమస్య ఈ కీఫ్రేమ్ల డూప్లికేషన్ ఉపరితలం క్రింద దాగి ఉన్న మరింత కృత్రిమ సమస్యను సృష్టిస్తుంది: గ్లోబల్ స్కోప్ ట్రాప్. కాంపోనెంట్-బేస్డ్ ఆర్కిటెక్చర్లతో పని చేస్తున్నప్పుడు కూడా, CSS కీఫ్రేమ్లు ఎల్లప్పుడూ గ్లోబల్ స్కోప్లో నిర్వచించబడతాయి. దీని అర్థం అన్ని కీఫ్రేమ్లు అన్ని భాగాలకు వర్తిస్తాయి. ఎల్లప్పుడూ. అవును, మీ యానిమేషన్ మీ కాంపోనెంట్లో మీరు నిర్వచించిన కీఫ్రేమ్లను తప్పనిసరిగా ఉపయోగించదు. ఇది గ్లోబల్ స్కోప్లోకి లోడ్ చేయబడిన ఖచ్చితమైన అదే పేరుతో సరిపోలే చివరి కీఫ్రేమ్లను ఉపయోగిస్తుంది. మీ అన్ని కీఫ్రేమ్లు ఒకేలా ఉన్నంత వరకు, ఇది చిన్న సమస్యగా అనిపించవచ్చు. కానీ మీరు ఒక నిర్దిష్ట వినియోగ సందర్భం కోసం యానిమేషన్ను అనుకూలీకరించాలనుకుంటున్న క్షణం, మీరు ఇబ్బందుల్లో ఉన్నారు లేదా అధ్వాన్నంగా ఉంటారు, మీరు వాటికి కారణం అవుతారు. మీ యానిమేషన్ పని చేయదు ఎందుకంటే మీ తర్వాత మరొక భాగం లోడ్ చేయబడుతుంది, మీ కీఫ్రేమ్లను ఓవర్రైట్ చేయడం లేదా మీ కాంపోనెంట్ లోడ్ చివరిగా ఉంటుంది మరియు ఆ కీఫ్రేమ్ పేరును ఉపయోగించి ప్రతి ఇతర కాంపోనెంట్ కోసం యానిమేషన్ ప్రవర్తనను అనుకోకుండా మారుస్తుంది మరియు మీరు దానిని గ్రహించలేరు. సమస్యను ప్రదర్శించే ఒక సాధారణ ఉదాహరణ ఇక్కడ ఉంది: .component-one { /* భాగం శైలులు */ యానిమేషన్: పల్స్ 1s ఈజ్-ఇన్-అవుట్ ఇన్ఫినిట్ ఆల్టర్నేట్; }
/* ఈ @keyframes నిర్వచనం పని చేయదు */ @keyframes పల్స్ { నుండి { స్థాయి: 1; } వరకు { స్థాయి: 1.1; } }
/* తర్వాత కోడ్లో... */
.భాగం-రెండు { /* భాగం శైలులు */ యానిమేషన్: పల్స్ 1s ఈజ్-ఇన్-అవుట్ అనంతం; }
/* ఈ కీఫ్రేమ్లు రెండు భాగాలకు వర్తిస్తాయి */ @keyframes పల్స్ { 0%, 20%, 100% { స్థాయి: 1; } 10%, 40% { స్థాయి: 1.2; } }
రెండు భాగాలు ఒకే యానిమేషన్ పేరును ఉపయోగిస్తాయి, అయితే రెండవ @keyframes నిర్వచనం మొదటిదాన్ని ఓవర్రైట్ చేస్తుంది. ఇప్పుడు కాంపోనెంట్-వన్ మరియు కాంపోనెంట్-టూ రెండూ రెండవ కీఫ్రేమ్లను ఉపయోగిస్తాయి, ఏ కాంపోనెంట్ ఏ కీఫ్రేమ్లను నిర్వచించినప్పటికీ. అమిత్ షీన్ రాసిన పెన్ కీఫ్రేమ్స్ టోకెన్లు - డెమో 1 [ఫోర్క్డ్] చూడండి. చెత్త భాగం? ఇది తరచుగా స్థానిక అభివృద్ధిలో ఖచ్చితంగా పని చేస్తుంది కానీ నిర్మాణ ప్రక్రియలు మీ స్టైల్షీట్ల లోడ్ క్రమాన్ని మార్చినప్పుడు ఉత్పత్తిలో రహస్యంగా విచ్ఛిన్నమవుతుంది. మీరు ఏ భాగాలు లోడ్ చేయబడి ఉంటాయి మరియు ఏ క్రమంలో విభిన్నంగా ప్రవర్తించే యానిమేషన్లతో ముగుస్తుంది. పరిష్కారం: ఏకీకృత కీఫ్రేమ్లు ఈ గందరగోళానికి సమాధానం ఆశ్చర్యకరంగా సులభం: భాగస్వామ్య స్టైల్షీట్లో నిల్వ చేయబడిన ముందే నిర్వచించబడిన డైనమిక్ కీఫ్రేమ్లు. ప్రతి భాగం దాని స్వంత యానిమేషన్లను నిర్వచించనివ్వడానికి బదులుగా, మేము కేంద్రీకృత కీఫ్రేమ్లను బాగా డాక్యుమెంట్ చేసిన, సులభంగా రూపొందించాముమీ ప్రాజెక్ట్ యొక్క నిర్దిష్ట అవసరాలకు అనుగుణంగా ఉపయోగించడం, నిర్వహించదగినది మరియు రూపొందించబడింది. దీన్ని కీఫ్రేమ్ల టోకెన్లుగా భావించండి. మేము రంగులు మరియు అంతరం కోసం టోకెన్లను ఉపయోగిస్తున్నట్లే మరియు మనలో చాలా మంది ఇప్పటికే యానిమేషన్ ప్రాపర్టీల కోసం టోకెన్లను ఉపయోగిస్తున్నారు, అంటే వ్యవధి మరియు సులభతరం చేసే ఫంక్షన్లు, కీఫ్రేమ్ల కోసం కూడా టోకెన్లను ఎందుకు ఉపయోగించకూడదు? చిన్న సమస్య (కోడ్ డూప్లికేషన్) మరియు పెద్ద సమస్య (గ్లోబల్ స్కోప్ వైరుధ్యాలు) రెండింటినీ ఒకేసారి పరిష్కరిస్తూనే, మీరు ఉపయోగిస్తున్న ఏదైనా ప్రస్తుత డిజైన్ టోకెన్ వర్క్ఫ్లోతో ఈ విధానం సహజంగా కలిసిపోతుంది. ఆలోచన సూటిగా ఉంటుంది: మా సాధారణ యానిమేషన్లన్నింటికీ సత్యం యొక్క ఒకే మూలాన్ని సృష్టించండి. ఈ భాగస్వామ్య స్టైల్షీట్ మా ప్రాజెక్ట్ వాస్తవానికి ఉపయోగించే యానిమేషన్ నమూనాలను కవర్ చేసే జాగ్రత్తగా రూపొందించిన కీఫ్రేమ్లను కలిగి ఉంది. మా కోడ్బేస్లో ఫేడ్ యానిమేషన్ ఇప్పటికే ఎక్కడైనా ఉందో లేదో ఊహించడం లేదు. ఇతర భాగాల నుండి యానిమేషన్లను అనుకోకుండా ఓవర్రైట్ చేయడం లేదు. అయితే ఇక్కడ కీలకం ఉంది: ఇవి కేవలం స్టాటిక్ కాపీ-పేస్ట్ యానిమేషన్లు కాదు. అవి CSS కస్టమ్ ప్రాపర్టీల ద్వారా డైనమిక్గా మరియు అనుకూలీకరించగలిగేలా రూపొందించబడ్డాయి, మీకు ఒకే చోట కొంచెం పెద్ద “పల్స్” యానిమేషన్ అవసరమైతే వంటి నిర్దిష్ట వినియోగ సందర్భాలలో యానిమేషన్లను స్వీకరించే సౌలభ్యాన్ని కలిగి ఉన్నప్పుడే స్థిరత్వాన్ని కొనసాగించడానికి మాకు వీలు కల్పిస్తుంది. మొదటి కీఫ్రేమ్ల టోకెన్ను రూపొందించడం మనం పరిష్కరించాల్సిన మొదటి తక్కువ-వేలాడే పండ్లలో ఒకటి "ఫేడ్-ఇన్" యానిమేషన్. నా ఇటీవలి ప్రాజెక్ట్లలో ఒకదానిలో, నేను డజనుకు పైగా వేర్వేరు ఫేడ్-ఇన్ నిర్వచనాలను కనుగొన్నాను మరియు అవును, అవన్నీ అస్పష్టతను 0 నుండి 1 వరకు యానిమేట్ చేశాయి. కాబట్టి, ఒక కొత్త స్టైల్షీట్ని క్రియేట్ చేద్దాం, దానిని kf-tokens.css అని పిలుద్దాం, దానిని మా ప్రాజెక్ట్లోకి దిగుమతి చేయండి మరియు దానిలో సరైన వ్యాఖ్యలతో మా కీఫ్రేమ్లను ఉంచుదాం. /* keyframes-tokens.css */
/* * ఫేడ్ ఇన్ - ఫేడ్ ఎంట్రన్స్ యానిమేషన్ * వాడుక: యానిమేషన్: kf-fade-in 0.3s ఈజ్-అవుట్; */ @keyframes kf-fade-in { నుండి { అస్పష్టత: 0; } వరకు { అస్పష్టత: 1; } }
ఈ ఒక్క @keyframes డిక్లరేషన్ మా కోడ్బేస్ అంతటా చెల్లాచెదురుగా ఉన్న ఫేడ్-ఇన్ యానిమేషన్లన్నింటినీ భర్తీ చేస్తుంది. క్లీన్, సింపుల్ మరియు ప్రపంచవ్యాప్తంగా వర్తిస్తుంది. మరియు ఇప్పుడు మేము ఈ టోకెన్ను నిర్వచించాము, మేము దీన్ని మా ప్రాజెక్ట్లో ఏదైనా భాగం నుండి ఉపయోగించవచ్చు: .మోడల్ { యానిమేషన్: kf-fade-in 0.3s ఈజ్-అవుట్; }
.ఉపకరణ చిట్కా { యానిమేషన్: kf-fade-in 0.2s ఈజ్-ఇన్-అవుట్; }
.నోటిఫికేషన్ { యానిమేషన్: kf-fade-in 0.5s ఈజ్-అవుట్; }
అమిత్ షీన్ రాసిన పెన్ కీఫ్రేమ్ల టోకెన్లు - డెమో 2 [ఫోర్క్డ్] చూడండి. గమనిక: మేము మా @keyframes పేర్లన్నింటిలో kf- ఉపసర్గను ఉపయోగిస్తున్నాము. ఈ ఉపసర్గ ప్రాజెక్ట్లో ఇప్పటికే ఉన్న యానిమేషన్లతో వైరుధ్యాలను పేరు పెట్టడాన్ని నిరోధించే నేమ్స్పేస్గా పనిచేస్తుంది మరియు ఈ కీఫ్రేమ్లు మా కీఫ్రేమ్ల టోకెన్ల ఫైల్ నుండి వచ్చాయని వెంటనే స్పష్టం చేస్తుంది. డైనమిక్ స్లయిడ్ను తయారు చేస్తోంది కెఎఫ్-ఫేడ్-ఇన్ కీఫ్రేమ్లు అద్భుతంగా పని చేస్తాయి ఎందుకంటే ఇది చాలా సులభం మరియు గందరగోళానికి చాలా తక్కువ స్థలం ఉంది. అయితే ఇతర యానిమేషన్లలో, మనం మరింత డైనమిక్గా ఉండాలి మరియు ఇక్కడ మనం 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; } }
ఇప్పుడు మనం --kf-slide-from కస్టమ్ ప్రాపర్టీని మార్చడం ద్వారా ఏదైనా స్లయిడ్ దిశ కోసం ఈ సింగిల్ @keyframes టోకెన్ని ఉపయోగించవచ్చు: .సైడ్బార్ { యానిమేషన్: 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-to కస్టమ్ ప్రాపర్టీని జోడించండి, మనం తర్వాతి విభాగంలో చూసే విధంగా ఉంటుంది. ద్విదిశాత్మక జూమ్ కీఫ్రేమ్లు ప్రాజెక్ట్లలో డూప్లికేట్ అయ్యే మరో సాధారణ యానిమేషన్ “జూమ్” ఎఫెక్ట్స్. ఇది టోస్ట్ సందేశాల కోసం సూక్ష్మమైన స్కేల్-అప్ అయినా, మోడల్ల కోసం నాటకీయ జూమ్-ఇన్ అయినా లేదా హెడ్డింగ్ల కోసం సున్నితమైన స్కేల్-డౌన్ ప్రభావం అయినా, జూమ్ యానిమేషన్లు ప్రతిచోటా ఉంటాయి. ప్రతి స్కేల్ విలువ కోసం ప్రత్యేక కీఫ్రేమ్లను సృష్టించే బదులు, kf-జూమ్ కీఫ్రేమ్ల యొక్క ఒక సౌకర్యవంతమైన సెట్ను రూపొందిద్దాం:
/* * జూమ్ - స్కేల్ యానిమేషన్ * స్కేల్ విలువలను నియంత్రించడానికి --kf-zoom-from మరియు --kf-zoom-to ఉపయోగించండి * డిఫాల్ట్: 80% నుండి 100% వరకు జూమ్లు (0.8 నుండి 1) * వినియోగం: * యానిమేషన్: kf-జూమ్ 0.2s ఈజ్-అవుట్; * --kf-zoom-from: 0.5; --kf-zoom-to: 1; // 50% నుండి 100% వరకు జూమ్ చేయండి * --kf-zoom-from: 1; --kf-zoom-to: 0; // 100% నుండి 0% వరకు జూమ్ చేయండి * --kf-zoom-from: 1; --kf-zoom-to: 1.1; // 100% నుండి 110% వరకు జూమ్ చేయండి */
@keyframes kf-zoom { నుండి { స్థాయి: var (--kf-zoom-from, 0.8); } వరకు { స్థాయి: var(--kf-zoom-to, 1); } }
ఒక నిర్వచనంతో, మనకు అవసరమైన ఏదైనా జూమ్ వైవిధ్యాన్ని మనం సాధించవచ్చు: .టోస్ట్ { యానిమేషన్: kf-slide-in 0.2s, kf-జూమ్ 0.4s ఈజ్-అవుట్; --kf-slide-from: 0 100%; /* ఎగువ నుండి స్లయిడ్ */ /* డిఫాల్ట్ జూమ్ను ఉపయోగిస్తుంది: 80% నుండి 100% వరకు ప్రమాణాలు */ }
.మోడల్ { యానిమేషన్: kf-జూమ్ 0.3s క్యూబిక్-బెజియర్(0.34, 1.56, 0.64, 1); --kf-zoom-from: 0; /* 0% నుండి 100% వరకు నాటకీయ జూమ్ */ }
.శీర్షిక { యానిమేషన్: kf-fade-in 2s, kf-zoom 2s ఈజ్-ఇన్; --kf-zoom-from: 1.2; --kf-zoom-to: 0.8; /* సున్నితమైన స్థాయి డౌన్ */ }
0.8 (80%) డిఫాల్ట్ టోస్ట్ మెసేజ్లు మరియు కార్డ్ల వంటి చాలా UI ఎలిమెంట్లకు ఖచ్చితంగా పని చేస్తుంది, అయితే ప్రత్యేక సందర్భాలలో అనుకూలీకరించడం సులభం. అమిత్ షీన్ రాసిన పెన్ కీఫ్రేమ్ల టోకెన్లు - డెమో 4 [ఫోర్క్డ్] చూడండి. మీరు ఇటీవలి ఉదాహరణలలో ఆసక్తికరమైన విషయాన్ని గమనించి ఉండవచ్చు: మేము యానిమేషన్లను కలుపుతున్నాము. @keyframes టోకెన్లతో పని చేయడం వల్ల కలిగే ముఖ్య ప్రయోజనాల్లో ఒకటి, అవి ఒకదానితో ఒకటి సజావుగా కలిసిపోయేలా రూపొందించబడ్డాయి. ఈ మృదువైన కూర్పు ఉద్దేశపూర్వకమైనది, ప్రమాదవశాత్తు కాదు. యానిమేషన్ కూర్పు ఎక్కడ సమస్యాత్మకంగా మారవచ్చు అనే దానితో సహా మేము మరింత వివరంగా తరువాత చర్చిస్తాము, అయితే చాలా కాంబినేషన్లు సూటిగా మరియు అమలు చేయడం సులభం. గమనిక: ఈ కథనాన్ని వ్రాస్తున్నప్పుడు మరియు బహుశా దీన్ని వ్రాయడం వల్ల, నేను ప్రవేశ యానిమేషన్ల గురించి మొత్తం ఆలోచనను పునరాలోచిస్తున్నాను. CSSలో ఇటీవలి అన్ని పురోగతులతో, మనకు అవి ఇంకా అవసరమా? అదృష్టవశాత్తూ, ఆడమ్ ఆర్గిల్ అవే ప్రశ్నలను అన్వేషించారు మరియు వాటిని తన బ్లాగ్లో అద్భుతంగా వ్యక్తం చేశారు. ఇది ఇక్కడ వ్రాసిన వాటికి విరుద్ధంగా లేదు, కానీ ఇది పరిగణనలోకి తీసుకోవలసిన విధానాన్ని ప్రదర్శిస్తుంది, ప్రత్యేకించి మీ ప్రాజెక్ట్లు ప్రవేశ యానిమేషన్లపై ఎక్కువగా ఆధారపడినట్లయితే. నిరంతర యానిమేషన్లు “ఫేడ్”, “స్లయిడ్” మరియు “జూమ్” వంటి ప్రవేశ యానిమేషన్లు ఒకసారి జరిగి ఆగిపోయినప్పుడు, నిరంతర యానిమేషన్లు నిరవధికంగా లూప్ అవుతూ దృష్టిని ఆకర్షించడానికి లేదా కొనసాగుతున్న కార్యాచరణను సూచిస్తాయి. నేను ఎదుర్కొనే రెండు అత్యంత సాధారణ నిరంతర యానిమేషన్లు “స్పిన్” (లోడింగ్ సూచికల కోసం) మరియు “పల్స్” (ముఖ్యమైన అంశాలను హైలైట్ చేయడం కోసం). కీఫ్రేమ్ల టోకెన్లను సృష్టించేటప్పుడు ఈ యానిమేషన్లు ప్రత్యేకమైన సవాళ్లను అందిస్తాయి. సాధారణంగా ఒక రాష్ట్రం నుండి మరొక రాష్ట్రానికి వెళ్లే ప్రవేశ యానిమేషన్ల వలె కాకుండా, నిరంతర యానిమేషన్లు వాటి ప్రవర్తన విధానాలలో అత్యంత అనుకూలీకరించదగినవిగా ఉండాలి. ది స్పిన్ డాక్టర్ ప్రతి ప్రాజెక్ట్ బహుళ స్పిన్ యానిమేషన్లను ఉపయోగిస్తున్నట్లు కనిపిస్తోంది. కొన్ని సవ్యదిశలో, మరికొన్ని అపసవ్య దిశలో తిరుగుతాయి. కొందరు ఒకే 360-డిగ్రీల భ్రమణాన్ని చేస్తారు, మరికొందరు వేగవంతమైన ప్రభావం కోసం బహుళ మలుపులు చేస్తారు. ప్రతి వైవిధ్యం కోసం ప్రత్యేక కీఫ్రేమ్లను సృష్టించడానికి బదులుగా, అన్ని దృశ్యాలను నిర్వహించే ఒక సౌకర్యవంతమైన స్పిన్ను రూపొందిద్దాం:
/* * స్పిన్ - రొటేషన్ యానిమేషన్ * భ్రమణ పరిధిని నియంత్రించడానికి --kf-spin-from మరియు --kf-spin-to ఉపయోగించండి * భ్రమణ మొత్తాన్ని నియంత్రించడానికి --kf-spin-turns ఉపయోగించండి * డిఫాల్ట్: 0deg నుండి 360deg వరకు తిరుగుతుంది (1 పూర్తి భ్రమణం) * వినియోగం: * యానిమేషన్: kf-spin 1s లీనియర్ అనంతం; * --kf-స్పిన్-టర్న్స్: 2; // 2 పూర్తి భ్రమణాలు * --kf-spin-from: 0deg; --kf-స్పిన్-టు: 180deg; // సగం భ్రమణం * --kf-spin-from: 0deg; --kf-spin-to: -360deg; // అపసవ్య దిశలో */
@keyframes kf-spin { నుండి { తిప్పండి: var (--kf-స్పిన్-నుండి, 0deg); } వరకు { తిప్పండి: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
ఇప్పుడు మనం ఇష్టపడే ఏదైనా స్పిన్ వైవిధ్యాన్ని సృష్టించవచ్చు:
.loading-spinner { యానిమేషన్: kf-spin 1s లీనియర్ అనంతం; /* డిఫాల్ట్గా ఉపయోగిస్తుంది: 0deg నుండి 360deg వరకు తిరుగుతుంది */ }
.ఫాస్ట్-లోడర్ { యానిమేషన్: kf-స్పిన్ 1.2s ఈజ్-ఇన్-అవుట్ ఇన్ఫినిట్ ఆల్టర్నేట్; --kf-స్పిన్-టర్న్స్: 3; /* ఒక్కో చక్రానికి ఒక్కో దిశకు 3 పూర్తి భ్రమణాలు*/ }
.స్టెప్డ్-రివర్స్ { యానిమేషన్: kf-స్పిన్ 1.5s దశలు(8) అనంతం; --kf-spin-to: -360deg; /* అపసవ్య దిశలో */ }
.సూక్ష్మ విగ్లే { యానిమేషన్: kf-spin 2s ఈజ్-ఇన్-అవుట్ ఇన్ఫినిట్ ఆల్టర్నేట్; --kf-స్పిన్-నుండి: -16deg; --kf-స్పిన్-టు: 32deg; /* విగ్ల్ 36 డిగ్రీలు: -18deg మరియు +18deg మధ్య */ }
అమిత్ షీన్ రాసిన పెన్ కీఫ్రేమ్ల టోకెన్లు - డెమో 5 [ఫోర్క్డ్] చూడండి. ఈ విధానం యొక్క అందం ఏమిటంటే, అదే కీఫ్రేమ్లు స్పిన్నర్లను లోడ్ చేయడం, తిరిగే చిహ్నాలు, విగ్ల్ ఎఫెక్ట్లు మరియు సంక్లిష్టమైన బహుళ-మలుపు యానిమేషన్లకు కూడా పని చేస్తాయి. పల్స్ పారడాక్స్ పల్స్ యానిమేషన్లు గమ్మత్తైనవి ఎందుకంటే అవి విభిన్న లక్షణాలను "పల్స్" చేయగలవు. కొన్ని స్కేల్ను పల్స్ చేస్తాయి, మరికొన్ని అస్పష్టతను పల్స్ చేస్తాయి మరియు కొన్ని పల్స్ రంగు లక్షణాలు ప్రకాశం లేదా సంతృప్తత వంటివి. ప్రతి ప్రాపర్టీకి ప్రత్యేక కీఫ్రేమ్లను సృష్టించే బదులు, ఏదైనా CSS ప్రాపర్టీతో పనిచేసే కీఫ్రేమ్లను మేము సృష్టించవచ్చు. స్కేల్ మరియు అస్పష్టత ఎంపికలతో కూడిన పల్స్ కీఫ్రేమ్ యొక్క ఉదాహరణ ఇక్కడ ఉంది:
/* * పల్స్ - పల్సింగ్ యానిమేషన్ * స్కేల్ పరిధిని నియంత్రించడానికి --kf-pulse-scale-from మరియు --kf-pulse-scale-to ఉపయోగించండి * అస్పష్టత పరిధిని నియంత్రించడానికి --kf-pulse-opacity-from మరియు --kf-pulse-opacity-to ఉపయోగించండి * డిఫాల్ట్: పల్స్ లేదు (అన్ని విలువలు 1) * వినియోగం: * యానిమేషన్: kf-pulse 2s ఈజ్-ఇన్-అవుట్ ఇన్ఫినిట్ ఆల్టర్నేట్; * --kf-pulse-scale-from: 0.95; --kf-pulse-scale-to: 1.05; // స్కేల్ పల్స్ * --kf-pulse-opacity-from: 0.7; --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-pulse-opacity-from: 0.5; /* అస్పష్టత పల్స్ */ }
.notification-dot { యానిమేషన్: kf-pulse 0.6s ఈజ్-ఇన్-అవుట్ ఇన్ఫినిట్ ఆల్టర్నేట్; --kf-pulse-scale-from: 0.9; --kf-pulse-scale-to: 1.1; /* స్కేల్ పల్స్ */ }
.టెక్స్ట్-హైలైట్ { యానిమేషన్: kf-pulse 1.5s ఈజ్-అవుట్ అనంతం; --kf-pulse-scale-from: 0.8; --kf-pulse-opacity-from: 0.2; /* స్కేల్ మరియు అస్పష్టత పల్స్ */ }
అమిత్ షీన్ రాసిన పెన్ కీఫ్రేమ్ల టోకెన్లు - డెమో 6 [ఫోర్క్డ్] చూడండి. ఈ సింగిల్ kf-పల్స్ కీఫ్రేమ్ సూక్ష్మమైన అటెన్షన్ గ్రాబ్ల నుండి నాటకీయ హైలైట్ల వరకు ప్రతిదీ నిర్వహించగలదు, అనుకూలీకరించడం సులభం. అధునాతన సడలింపు కీఫ్రేమ్ల టోకెన్లను ఉపయోగించడంలో ఒక గొప్ప విషయం ఏమిటంటే, మా యానిమేషన్ లైబ్రరీని విస్తరించడం మరియు చాలా మంది డెవలపర్లు సాగే లేదా బౌన్స్ వంటి మొదటి నుండి వ్రాయడానికి ఇబ్బంది పడని ప్రభావాలను అందించడం ఎంత సులభం. జంప్ ఎత్తును నియంత్రించడానికి --kf-bounce-from కస్టమ్ ప్రాపర్టీని ఉపయోగించే సాధారణ “బౌన్స్” కీఫ్రేమ్ల టోకెన్కి ఇక్కడ ఒక ఉదాహరణ ఉంది. /* * బౌన్స్ - బౌన్స్ ఎంట్రన్స్ యానిమేషన్ * జంప్ ఎత్తును నియంత్రించడానికి --kf-bounce-from ఉపయోగించండి * డిఫాల్ట్: 100vh నుండి దూకుతుంది (ఆఫ్ స్క్రీన్) * వినియోగం: * యానిమేషన్: kf-bounce 3s ఈజ్-ఇన్; * --kf-bounce-from: 200px; // 200px ఎత్తు నుండి దూకు */
@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-elastic-from-X: -50px; * --kf-elastic-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); }
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)calc(var(--kf-elastic-from-Y, 0px) * 0.1312); }
44% { అనువదించు: calc(var(--kf-elastic-from-X, -50vw) * -0.0463) calc(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; } }
ఈ విధానం కేవలం ఒకే అనుకూల ప్రాపర్టీని మార్చడం ద్వారా మా ప్రాజెక్ట్ అంతటా అధునాతన కీఫ్రేమ్లను తిరిగి ఉపయోగించడం మరియు అనుకూలీకరించడం సులభం చేస్తుంది.
.bounce-and-zoom { యానిమేషన్: kf-bounce 3s ఈజ్-ఇన్, kf-జూమ్ 3s లీనియర్; --kf-zoom-from: 0; }
.bounce-and-slide { యానిమేషన్-కంపోజిషన్: యాడ్; /* రెండు యానిమేషన్లు అనువాదాన్ని ఉపయోగిస్తాయి */ యానిమేషన్: 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-జూమ్ 0.3s క్యూబిక్-బెజియర్(0.34, 1.56, 0.64, 1); --kf-zoom-from: 0.7; --kf-zoom-to: 1; }
/* స్లైడ్ ఇన్ + పల్స్ */ .నోటిఫికేషన్ { యానిమేషన్: kf-slide-in 0.5s, kf-pulse 1.2s ఈజ్-ఇన్-అవుట్ ఇన్ఫినిట్ ఆల్టర్నేట్; --kf-slide-from: -100px 0; --kf-pulse-scale-from: 0.95; --kf-pulse-scale-to: 1.05; }
ఈ కలయికలు అందంగా పని చేస్తాయి ఎందుకంటే ప్రతి యానిమేషన్ వేరొక ఆస్తిని లక్ష్యంగా చేసుకుంటుంది: అస్పష్టత, రూపాంతరం (అనువాదం/స్కేల్) మొదలైనవి. కానీ కొన్నిసార్లు వైరుధ్యాలు ఉంటాయి మరియు వాటిని ఎందుకు మరియు ఎలా ఎదుర్కోవాలో మనం తెలుసుకోవాలి. రెండు యానిమేషన్లు ఒకే ప్రాపర్టీని యానిమేట్ చేయడానికి ప్రయత్నించినప్పుడు - ఉదాహరణకు, యానిమేటింగ్ స్కేల్ లేదా రెండూ యానిమేటింగ్ అస్పష్టత - ఫలితం మీరు ఆశించిన విధంగా ఉండదు. డిఫాల్ట్గా, యానిమేషన్లలో ఒకటి మాత్రమే వాస్తవానికి ఆ ఆస్తికి వర్తించబడుతుంది, ఇది యానిమేషన్ జాబితాలో చివరిది. ఒకే ప్రాపర్టీపై బహుళ యానిమేషన్లను CSS ఎలా నిర్వహిస్తుంది అనేదానికి ఇది పరిమితి. ఉదాహరణకు, kf-pulse యానిమేషన్ మాత్రమే వర్తింపజేయడం వలన ఇది ఉద్దేశించిన విధంగా పని చేయదు. .బాడ్-కాంబో { యానిమేషన్: kf-zoom 0.5s ముందుకు, kf-పల్స్ 1.2s అనంత ప్రత్యామ్నాయం; --kf-zoom-from: 0.5; --kf-zoom-to: 1.2; --kf-pulse-scale-from: 0.8; --kf-pulse-scale-to: 1.1; }
యానిమేషన్ జోడింపు ఒకే ఆస్తిని ప్రభావితం చేసే బహుళ యానిమేషన్లను నిర్వహించడానికి సులభమైన మరియు అత్యంత ప్రత్యక్ష మార్గం యానిమేషన్-కంపోజిషన్ ప్రాపర్టీని ఉపయోగించడం. పైన ఉన్న చివరి ఉదాహరణలో, kf-పల్స్ యానిమేషన్ kf-జూమ్ యానిమేషన్ను భర్తీ చేస్తుంది, కాబట్టి మేము ప్రారంభ జూమ్ను చూడలేము మరియు ఆశించిన స్కేల్ 1.2కి పొందలేము. యానిమేషన్-కంపోజిషన్ని జోడించడానికి సెట్ చేయడం ద్వారా, మేము రెండు యానిమేషన్లను కలపమని బ్రౌజర్కి చెబుతాము. ఇది మనకు కావలసిన ఫలితాన్ని ఇస్తుంది. .భాగం-రెండు { యానిమేషన్-కంపోజిషన్: యాడ్; }
అమిత్ షీన్ రాసిన పెన్ కీఫ్రేమ్ల టోకెన్లు - డెమో 8 [ఫోర్క్డ్] చూడండి. మేము ఒకే ఆస్తిపై ప్రభావాలను కలపాలనుకుంటున్న చాలా సందర్భాలలో ఈ విధానం బాగా పనిచేస్తుంది. మనం యానిమేషన్లను స్టాటిక్ ప్రాపర్టీ విలువలతో కలపాల్సిన అవసరం వచ్చినప్పుడు కూడా ఇది ఉపయోగపడుతుంది. ఉదాహరణకు, ట్రాన్స్లేట్ ప్రాపర్టీని మనకు కావలసిన చోట ఉంచడానికి ఉపయోగించే మూలకం ఉంటే, ఆపై మేము దానిని kf-slide-in keyframesతో యానిమేట్ చేయాలనుకుంటే, యానిమేషన్-కాంపోజిషన్ లేకుండా అసహ్యంగా కనిపించే జంప్ను పొందుతాము. అమిత్ షీన్ రాసిన పెన్ కీఫ్రేమ్ల టోకెన్లు - డెమో 9 [ఫోర్క్డ్] చూడండి. యానిమేషన్-కంపోజిషన్ జోడించడానికి సెట్ చేయబడినప్పుడు, యానిమేషన్ ఇప్పటికే ఉన్న వాటితో సజావుగా కలపబడుతుందిరూపాంతరం చెందుతుంది, కాబట్టి మూలకం స్థానంలో ఉంటుంది మరియు ఊహించిన విధంగా యానిమేట్ చేస్తుంది. యానిమేషన్ స్టాగర్ బహుళ యానిమేషన్లను నిర్వహించడానికి మరొక మార్గం వాటిని "అస్థిరపరచడం" - అంటే, మొదటిది పూర్తయిన తర్వాత రెండవ యానిమేషన్ను కొద్దిగా ప్రారంభించండి. ఇది ప్రతి సందర్భంలోనూ పని చేసే పరిష్కారం కాదు, కానీ నిరంతర యానిమేషన్ తర్వాత మనకు ప్రవేశ యానిమేషన్ ఉన్నప్పుడు ఇది ఉపయోగకరంగా ఉంటుంది. /* ఫేడ్ ఇన్ + అస్పష్టత పల్స్ */ .నోటిఫికేషన్ { యానిమేషన్: kf-fade-in 2s ఈజ్-అవుట్, kf-పల్స్ 0.5s 2s ఈజ్-ఇన్-అవుట్ ఇన్ఫినిట్ ఆల్టర్నేట్; --kf-pulse-opacity-to: 0.5; }
అమిత్ షీన్ రాసిన పెన్ కీఫ్రేమ్ల టోకెన్లు - డెమో 10 [ఫోర్క్డ్] చూడండి. ఆర్డర్ విషయాలు మేము పనిచేసే యానిమేషన్లలో ఎక్కువ భాగం ట్రాన్స్ఫార్మ్ ప్రాపర్టీని ఉపయోగిస్తాము. చాలా సందర్భాలలో, ఇది మరింత సౌకర్యవంతంగా ఉంటుంది. ట్రాన్స్ఫార్మ్ యానిమేషన్లు GPU-యాక్సిలరేటెడ్గా ఉంటాయి కాబట్టి ఇది పనితీరు ప్రయోజనాన్ని కూడా కలిగి ఉంది. కానీ మనం పరివర్తనలను ఉపయోగిస్తే, మన పరివర్తనలను మనం చేసే క్రమం ముఖ్యమైనదని అంగీకరించాలి. చాలా. మా కీఫ్రేమ్లలో ఇప్పటివరకు, మేము వ్యక్తిగత రూపాంతరాలను ఉపయోగించాము. స్పెక్స్ ప్రకారం, ఇవి ఎల్లప్పుడూ స్థిరమైన క్రమంలో వర్తింపజేయబడతాయి: మొదట, మూలకం అనువదించబడుతుంది, ఆపై తిప్పబడుతుంది, ఆపై స్కేల్ అవుతుంది. ఇది అర్ధమే మరియు మనలో చాలామంది ఆశించేది. అయితే, మేము ట్రాన్స్ఫార్మ్ ప్రాపర్టీని ఉపయోగిస్తే, ఫంక్షన్లు వ్రాయబడిన క్రమం, అవి వర్తించే క్రమం. ఈ సందర్భంలో, మనం X- అక్షం మీద 100 పిక్సెల్లను కదిలించి, ఆపై దానిని 45 డిగ్రీలు తిప్పితే, మొదట దాన్ని 45 డిగ్రీలు తిప్పి 100 పిక్సెల్లు కదిలించినట్లే కాదు. /* పింక్ స్క్వేర్: మొదట అనువదించండి, ఆపై తిప్పండి */ .ఉదాహరణ-ఒకటి { రూపాంతరం: translateX(100px) రొటేట్ (45deg); }
/* ఆకుపచ్చ చతురస్రం: మొదట తిప్పండి, ఆపై అనువదించండి */ .ఉదాహరణ-రెండు { రూపాంతరం: రొటేట్ (45డిగ్రీలు) అనువాదంX(100px); }
అమిత్ షీన్ రాసిన పెన్ కీఫ్రేమ్ల టోకెన్లు - డెమో 11 [ఫోర్క్డ్] చూడండి. కానీ పరివర్తన క్రమం ప్రకారం, అన్ని వ్యక్తిగత పరివర్తనలు - మేము కీఫ్రేమ్ల టోకెన్ల కోసం ఉపయోగించిన ప్రతిదీ - ట్రాన్స్ఫార్మ్ ఫంక్షన్లకు ముందు జరుగుతుంది. అంటే మీరు ట్రాన్స్ఫార్మ్ ప్రాపర్టీలో సెట్ చేసిన ఏదైనా యానిమేషన్ల తర్వాత జరుగుతుంది. కానీ మీరు సెట్ చేస్తే, ఉదాహరణకు, kf-స్పిన్ కీఫ్రేమ్లతో కలిపి అనువదించండి, యానిమేషన్కు ముందు అనువాదం జరుగుతుంది. ఇంకా అయోమయంలో ఉందా?! ఇది క్రింది సందర్భంలో వలె ఒకే యానిమేషన్ కోసం స్టాటిక్ విలువలు విభిన్న ఫలితాలను కలిగించే పరిస్థితులకు దారి తీస్తుంది:
/* ఇద్దరు స్పిన్నర్ల కోసం సాధారణ యానిమేషన్ */ .స్పిన్నర్ { యానిమేషన్: kf-spin 1s లీనియర్ అనంతం; }
/* పింక్ స్పిన్నర్: తిప్పడానికి ముందు అనువదించండి (వ్యక్తిగత పరివర్తన) */ .స్పిన్నర్-పింక్ { అనువదించు: 100% 50%; }
/* గ్రీన్ స్పిన్నర్: తిప్పండి ఆపై అనువదించండి (ఫంక్షన్ ఆర్డర్) */ .స్పిన్నర్-గ్రీన్ { రూపాంతరం: అనువదించు (100%, 50%); }
అమిత్ షీన్ రాసిన పెన్ కీఫ్రేమ్ల టోకెన్లు - డెమో 12 [ఫోర్క్డ్] చూడండి. మొదటి స్పిన్నర్ (పింక్) kf-స్పిన్ యొక్క రొటేట్కు ముందు జరిగే అనువాదాన్ని పొందడాన్ని మీరు చూడవచ్చు, కనుక ఇది మొదట దాని స్థానానికి వెళ్లి ఆపై స్పిన్ అవుతుంది. రెండవ స్పిన్నర్ (ఆకుపచ్చ) వ్యక్తిగత పరివర్తన తర్వాత జరిగే ట్రాన్స్లేట్() ఫంక్షన్ను పొందుతుంది, కాబట్టి మూలకం మొదట తిరుగుతుంది, ఆపై దాని ప్రస్తుత కోణానికి సంబంధించి కదులుతుంది మరియు మేము విస్తృత కక్ష్య ప్రభావాన్ని పొందుతాము. లేదు, ఇది బగ్ కాదు. CSS గురించి మనం తెలుసుకోవలసిన వాటిలో ఇది ఒకటి మరియు బహుళ యానిమేషన్లు లేదా బహుళ రూపాంతరాలతో పని చేస్తున్నప్పుడు గుర్తుంచుకోండి. అవసరమైతే, మీరు రొటేట్() ఫంక్షన్ని ఉపయోగించి మూలకాలను తిప్పే 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); } } }
తగ్గించడానికి ఇష్టపడే-తగ్గిన చలనాన్ని సెట్ చేసిన వినియోగదారులు యానిమేషన్ను చూడలేరు మరియు వారి ప్రాధాన్యతకు సరిపోయే అనుభవాన్ని పొందుతారని ఇది నిర్ధారిస్తుంది. ఇన్స్టంట్ ఇన్ ప్రవేశ యానిమేషన్ల వంటి కొన్ని కీఫ్రేమ్లను మనం తీసివేయలేము. విలువ మారాలి, యానిమేట్ చేయాలి; లేకుంటే, మూలకం సరైన విలువలను కలిగి ఉండదు. కానీ తగ్గిన కదలికలో, ప్రారంభ విలువ నుండి ఈ పరివర్తన తక్షణమే ఉండాలి. దీన్ని సాధించడానికి, విలువ వెంటనే ముగింపు స్థితికి వెళ్లే అదనపు కీఫ్రేమ్లను మేము నిర్వచిస్తాము. ఇవి మా డిఫాల్ట్ కీఫ్రేమ్లుగా మారతాయి. ఆ తర్వాత, మేము మునుపటి ఉదాహరణలో వలె, ప్రాధాన్యతలను తగ్గించిన-మోషన్ను నో-ప్రాధాన్యతకు సెట్ చేయడం కోసం మీడియా ప్రశ్నలో సాధారణ కీఫ్రేమ్లను జోడిస్తాము. /* తగ్గిన కదలిక కోసం తక్షణమే పాప్ ఇన్ చేయండి */ @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-bounce { /* తగ్గిన కదలిక కోసం సాఫ్ట్ ఫేడ్-ఇన్ */ }
@media (prefers-reduced-motion: no-preference) { @keyframes kf-bounce { /* ఒరిజినల్ బౌన్స్ కీఫ్రేమ్లు */ } }
ఇప్పుడు, తగ్గిన చలనం ప్రారంభించబడిన వినియోగదారులు ఇప్పటికీ ప్రదర్శన యొక్క భావాన్ని పొందుతారు, కానీ బౌన్స్ లేదా సాగే యానిమేషన్ యొక్క తీవ్రమైన కదలిక లేకుండా. బిల్డింగ్ బ్లాక్లు స్థానంలో ఉన్నందున, వాటిని అసలు వర్క్ఫ్లో ఎలా భాగం చేయాలి అనేది తదుపరి ప్రశ్న. సౌకర్యవంతమైన కీఫ్రేమ్లను వ్రాయడం ఒక విషయం, కానీ పెద్ద ప్రాజెక్ట్లో వాటిని నమ్మదగినదిగా చేయడానికి నేను కష్టతరమైన మార్గాన్ని నేర్చుకోవాల్సిన కొన్ని వ్యూహాలు అవసరం. అమలు వ్యూహాలు & ఉత్తమ పద్ధతులు మేము కీఫ్రేమ్ల టోకెన్ల ఘన లైబ్రరీని కలిగి ఉన్న తర్వాత, వాటిని రోజువారీ పనిలోకి ఎలా తీసుకురావాలనేదే నిజమైన సవాలు.
టెంప్టేషన్ అన్ని కీఫ్రేమ్లను ఒకేసారి వదలడం మరియు సమస్య పరిష్కరించబడిందని ప్రకటించడం, కానీ ఆచరణలో నేను క్రమంగా స్వీకరించడం వల్ల ఉత్తమ ఫలితాలు వస్తాయని నేను కనుగొన్నాను. ఫేడ్ లేదా స్లయిడ్ వంటి అత్యంత సాధారణ యానిమేషన్లతో ప్రారంభించండి. పెద్ద రీరైట్లు అవసరం లేకుండా తక్షణ విలువను చూపే సులభమైన విజయాలు ఇవి. పేరు పెట్టడం అనేది శ్రద్ధకు అర్హమైన మరొక అంశం. స్థిరమైన ఉపసర్గ లేదా నేమ్స్పేస్ ఏ యానిమేషన్లు టోకెన్లు మరియు ఏవి స్థానిక వన్-ఆఫ్లు అని స్పష్టంగా తెలియజేస్తుంది. ఇది ప్రమాదవశాత్తు ఘర్షణలను కూడా నివారిస్తుంది మరియు కొత్త బృంద సభ్యులు భాగస్వామ్య సిస్టమ్ను ఒక చూపులో గుర్తించడంలో సహాయపడుతుంది. కోడ్ ఎంత ముఖ్యమో డాక్యుమెంటేషన్ కూడా అంతే ముఖ్యం. ప్రతి కీఫ్రేమ్ల టోకెన్పై ఒక చిన్న వ్యాఖ్య కూడా తర్వాత ఊహించే సమయాన్ని ఆదా చేస్తుంది. డెవలపర్ టోకెన్ల ఫైల్ను తెరవగలగాలి, వారికి అవసరమైన ప్రభావం కోసం స్కాన్ చేయగలరు మరియు వినియోగ నమూనాను నేరుగా వాటి కాంపోనెంట్లోకి కాపీ చేయగలరు. ఫ్లెక్సిబిలిటీ ఈ విధానాన్ని కృషికి విలువైనదిగా చేస్తుంది. సరైన అనుకూల లక్షణాలను బహిర్గతం చేయడం ద్వారా, సిస్టమ్ను విచ్ఛిన్నం చేయకుండా యానిమేషన్ను స్వీకరించడానికి మేము బృందాలకు స్థలాన్ని అందిస్తాము. అదే సమయంలో, అతిగా క్లిష్టతరం చేయకుండా ప్రయత్నించండి. ముఖ్యమైన నాబ్లను అందించండి మరియు మిగిలిన వాటిని అభిప్రాయంతో ఉంచండి. చివరగా, ప్రాప్యతను గుర్తుంచుకోండి. ప్రతి యానిమేషన్కు తగ్గిన చలన ప్రత్యామ్నాయం అవసరం లేదు, కానీ చాలా మందికి అవసరం. ఈ సర్దుబాట్లను ముందుగానే చేయడం అంటే మనం వాటిని తర్వాత ఎప్పటికీ రీట్రోఫిట్ చేయనవసరం లేదు మరియు మా యూజర్లు ఎప్పటికీ ప్రస్తావించనప్పటికీ అది గమనించే స్థాయిని చూపుతుంది.
నా అనుభవంలో, కీఫ్రేమ్ల టోకెన్లను మా డిజైన్ టోకెన్ల వర్క్ఫ్లో భాగంగా పరిగణించడం వల్ల వాటిని అతుక్కుపోయేలా చేస్తుంది. అవి అమల్లోకి వచ్చిన తర్వాత, అవి స్పెషల్ ఎఫెక్ట్ల అనుభూతిని ఆపివేస్తాయి మరియు ఉత్పత్తి ఎలా కదులుతుంది మరియు ప్రతిస్పందిస్తుంది అనేదానికి సహజమైన పొడిగింపుగా డిజైన్ భాషలో భాగం అవుతాయి. చుట్టడం యానిమేషన్లు ఇంటర్ఫేస్లను నిర్మించడంలో అత్యంత సంతోషకరమైన భాగాలలో ఒకటిగా ఉండవచ్చు, కానీ నిర్మాణం లేకుండా, అవి నిరాశకు అతిపెద్ద మూలాలలో ఒకటిగా కూడా మారవచ్చు. కీఫ్రేమ్లను టోకెన్లుగా పరిగణించడం ద్వారా, మీరు సాధారణంగా గజిబిజిగా మరియు నిర్వహించడానికి కష్టతరంగా ఉండేదాన్ని తీసుకుంటారు మరియు దానిని స్పష్టమైన, ఊహాజనిత వ్యవస్థగా మార్చండి. నిజమైన విలువ కేవలం కొన్ని పంక్తుల కోడ్ను సేవ్ చేయడంలో మాత్రమే కాదు. మీరు ఫేడ్, స్లయిడ్, జూమ్ లేదా స్పిన్ని ఉపయోగించినప్పుడు, అది ప్రాజెక్ట్లో ఎలా ప్రవర్తిస్తుందో మీకు ఖచ్చితంగా తెలుసు. ఇది అంతులేని వైవిధ్యాల గందరగోళం లేకుండా అనుకూల లక్షణాల నుండి వచ్చే వశ్యతలో ఉంది. మరియు అది జోడించబడకుండా ఫౌండేషన్లో నిర్మించబడిన ప్రాప్యతలో ఉందిఒక అనంతర ఆలోచన. ఈ ఆలోచనలు వేర్వేరు బృందాలు మరియు విభిన్న కోడ్బేస్లలో పని చేయడాన్ని నేను చూశాను మరియు నమూనా ఎల్లప్పుడూ ఒకే విధంగా ఉంటుంది. టోకెన్లు అమల్లోకి వచ్చిన తర్వాత, కీఫ్రేమ్లు ట్రిక్స్ యొక్క చెల్లాచెదురైన సేకరణగా నిలిచిపోతాయి మరియు డిజైన్ భాషలో భాగమవుతాయి. వారు ఉత్పత్తిని మరింత ఉద్దేశపూర్వకంగా, మరింత స్థిరంగా మరియు మరింత సజీవంగా భావిస్తారు. మీరు ఈ కథనం నుండి ఒక విషయాన్ని తీసుకుంటే, ఇది ఇలా ఉండనివ్వండి: యానిమేషన్లు రంగులు, టైపోగ్రఫీ మరియు అంతరానికి మేము ఇప్పటికే ఇస్తున్న అదే శ్రద్ధ మరియు ఆకృతికి అర్హమైనవి. మీ ఇంటర్ఫేస్ కదిలిన ప్రతిసారీ కీఫ్రేమ్ల టోకెన్లలో చిన్న పెట్టుబడి చెల్లిస్తుంది.
