የአኒሜሽን መርማሪ በማንኛውም ድረ-ገጽ ላይ የሚሰሩ እያንዳንዱን የCSS አኒሜሽን እና ሽግግር (transition) ሙሉ ቁጥጥር ይሰጥዎታል። ሁሉንም አኒሜሽኖች በአንድ ጊዜ ያቁሙ፣ ለዝርዝር ፍተሻ ፍጥነታቸውን ይቀንሱ፣ አፈጸጸምን ለመፈተሽ ያፋጥኑዋቸው፣ ወይም የጊዜ መስመሩን በእጅ ያንሸራትቱ—ይህን ሁሉ የአሳሹን DevTools ሳይነኩ ከአንድ ተንሳፋፊ ፓነል ያድርጉ።
የCSS አኒሜሽኖችን ማስተካከል በጣም አስቸጋሪ ሊሆን ይችላል። በፍጥነት ይከሰታሉ፣ ይደራረባሉ፣ እና የአሳሹ DevTools የአኒሜሽን ባህሪያትን ለማግኘት ዝርዝር ውስጥ እንዲፈልጉ ያስገድዱዎታል። የአኒሜሽን መርማሪ በገጹ ላይ ያሉትን እያንዳንዱን @keyframes አኒሜሽኖች እና የCSS ሽግግሮች በራስ-ሰር በማግኘት፣ ከነሙሉ ውቅራቸው (ቆይታ፣ ቅልጥፍና፣ መዘግየት፣ የመድገም ብዛት) በመዘርዘር እና በዓለም አቀፍ ደረጃ ወይም ለእያንዳንዱ አኒሜሽን የሚሰሩ የመልሶ ማጫወቻ መቆጣጠሪያዎችን በመስጠት ይህንን ችግር ይፈታል። ያልተረጋጋ የሆቨር ተፅእኖን እያስተካከሉ፣ የገጽ መግቢያ ቅደም ተከተል ጊዜን እያስተካከሉ፣ ወይም ውስብስብ የሆኑ የአኒሜሽን ላይብረሪዎች እንዴት እንደሚሰሩ ለመረዳት እየሞከሩ ቢሆንም፣ ይህ መሣሪያ ቁጥጥሩን በእጅዎ ያደርገዋል።
በገጹ ላይ ያሉ እያንዳንዱን አኒሜሽን በአንድ ጠቅታ ወዲያውኑ ያቁሙ። ሁሉም አኒሜሽኖች ካሉበት ቦታ ይቆማሉ—ወደ መጀመሪያው አይመለሱም። ካቆሙበት ቦታ ለመቀጠል Play ን ይጫኑ። በዓይን ለመያዝ የማይቻሉ የአኒሜሽን መካከለኛ ሁኔታዎችን ለመመርመር አስፈላጊ ነው።
የሁሉንም አኒሜሽኖች የመጫወቻ ፍጥነት በአንድ ጊዜ ያስተካክሉ:: ከ 0.25x (ሩብ ፍጥነት)፣ 0.5x፣ 1x (ပုံላዊ)፣ 2x፣ ወይም 4x ይምረጡ:: በ 0.25x ማሄድ በጣም ፈጣን የሆኑ የ 200ms ሽግግሮችን እንኳን ለመከታተል እና ለማስተካከል ቀላል ያደርገዋል።
በገጹ ላይ ያለ እያንዳንዱ የCSS አኒሜሽን እና ሽግግር በራስ-ሰር ተለይቶ በሚሸበለል ዝርዝር ውስጥ ይታያል። እያንዳንዱ ግቤት የአኒሜሽኑን ስም፣ ቆይታ፣ የጊዜ ተግባር (ease, linear, cubic-bezier)፣ መዘግየት፣ የመድገም ብዛት እና አሁን ያለበትን ሁኔታ ያሳያል።
አኒሜሽኑን በእጅ በየደረጃው ለማንቀሳቀስ የጊዜ መስመር መቆጣጠሪያውን ይጎትቱ። በ 25%፣ 50%፣ ወይም በማንኛውም የአኒሜሽን ዑደት ቦታ ላይ ምን እንደሚከሰት በትክክል ይመልከቱ። ሲጎትቱ ገጹ በእውነተኛ ጊዜ ይዘመናል።
እያንዳንዱን አኒሜሽን ለብቻው ያቁሙ፣ ያጫውቱ ወይም ፍጥነታቸውን ያስተካክሉ:: በገጹ ላይ ባሉ ሌሎች ተንቀሳቃሽ ኤለመንቶች ሳይረበሹ አንድን አኒሜሽን ለይተው ያስተካክሉ።
የተሟላውን የCSS መግለጫ ለማየት በዝርዝሩ ውስጥ ያለውን ማንኛውንም አኒሜሽን ይጫኑ—@keyframes ፍቺ፣ የአኒሜሽን አጭር ኮድ ዝርዝር፣ የታሰቡ መጀመሪያ እና መጨረሻ ሁኔታዎች እና በየትኞቹ ኤለመንቶች ላይ እንደተተገበረ።
የአኒሜሽን መርማሪ covers the following, organized by category:
animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-statetransition-propertytransition-durationtransition-timing-functiontransition-delayeaseease-inease-outease-in-outlinearcubic-bezier()steps()transformtransform-origintranslaterotatescaleskewመቆራረጥ ወይም ስህተት የት እንደሚከሰት በትክክል ለማወቅ አኒሜሽኑን ወደ 0.25x ይቀንሱ። ችግሩ የመጣው በሌይአውት ለውጥ (ከtransform ይልቅ width/height አኒሜት በማድረግ)፣ በተሳሳተ ቅልጥፍና፣ ወይም በአንድ ኤለመንት ላይ ባሉ ተጋጭ አኒሜሽኖች መሆኑን ያረጋግጡ።
የእርስዎ cubic-bezier የቅልጥፍና ኩርባ በተግባር እንዴት እንደሚታይ ለማየት የጊዜ መስመር አሰሳን ይጠቀሙ። በተወሰኑ ፐርሰንት ላይ የease-in እና ease-out ባህሪን ያነጻጽሩ:: እሴቶችን ያስተካክሉ እና እንቅስቃሴው ትክክል እስኪመስል ድረስ ደጋግመው ያጫውቱ።
አስደናቂ አኒሜሽኖች ያሉበት ድረ-ገጽ ይጎብኙ እና በትክክል እንዴት እንደተገነቡ ይመርምሩ። ውስብስብ ቅደም ተከተሎችን ውጤታማ የሚያደርጉትን የ@keyframes ፍቺዎች፣ የጊዜ እሴቶች እና የኤለመንት ኢላማዎች ይመልከቱ።
የሆቨር ተፅእኖዎች፣ የሎዲንግ ስፒነሮች፣ ስኬሌተን ስክሪኖች እና የገጽ ሽግግሮች በትክክል መስራታቸውን ያረጋግጡ። ኤለመንቶች መደራረባቸውን፣ አኒሜሽን በሚሰራበት ጊዜ የተሳሳተ z-index መኖሩን ወይም የይዘት መፍሰስን ለማረጋገጥ በመካከለኛ ሁኔታዎች ላይ ያቁሙ።
እንቅስቃሴን በሚመለከት ችግር (vestibular disorders) ላለባቸው ተጠቃሚዎች ችግር ሊፈጥሩ የሚችሉ አኒሜሽኖችን ይለዩ። ሁሉንም አኒሜሽኖች በማቆም እና ገጹ አሁንም ሙሉ በሙሉ እንደሚሰራ በማረጋገጥ prefers-reduced-motion በትክክል መከበሩን ያረጋግጡ።
የDevSuite Pro ተንሳፋፊ ዶክን ይክፈቱ እና የአኒሜሽን መርማሪ አዶን ይጫኑ። መሣሪያው ወዲያውኑ ገጹን ይቃኛል እና ሁሉንም እየሰሩ ያሉ የCSS አኒሜሽኖችን እና ሽግግሮችን ያገኛል።
በገጹ ላይ የተገኙትን እያንዳንዱን አኒሜሽን የሚዘረዝር ተንሳፋፊ ፓነል ይታያል። እያንዳንዱ ግቤት የአኒሜሽኑን ስም፣ ቆይታ፣ ቅልጥፍና እና አሁን እየሰራ ወይም የቆመ መሆኑን ያሳያል። ባጁ የተገኙትን አጠቃላይ የአኒሜሽኖች ብዛት ያሳያል።
ሁሉንም አኒሜሽኖች በአንድ ጊዜ ለማቆም ዓለም አቀፍ የPause ቁልፍን ይጫኑ። ኤለመንቶች በነበሩበት የአኒሜሽን መካከለኛ ሁኔታ ይቆያሉ፣ ይህም የCSS ባህሪያትን ለመመርመር፣ ስክሪንሾት ለማንሳት ወይም ቦታዎችን ለማነጻጸር ያስችልዎታል።
ለዝርዝር ምልከታ አኒሜሽኖችን ወደ 0.25x ለመቀነስ ወይም ረጅም አኒሜሽኖችን በፍጥነት ለማለፍ ወደ 4x ለመጨመር የፍጥነት መቆጣጠሪያውን ይጠቀሙ። የፍጥነት ለውጦች አኒሜሽኑን ሳይደግሙ ወዲያውኑ ይተገበራሉ።
አኒሜሽኑን በእጅ በየደረጃው ለማየት የጊዜ መስመር መቆጣጠሪያውን ወደ ግራ እና ቀኝ ይጎትቱ። ገጹ በእውነተኛ ጊዜ ይዘመናል፣ ይህም እያንዳንዱ ፍሬም ምን እንደሚመስል በትክክል ያሳየዎታል። ስህተቶችን ለማግኘት ወይም የቅልጥፍና ኩርባዎችን ለማረጋገጥ ፍጹም ነው።
DevSuite Pro ን በነፃ ይጫኑ እና 39+ የገንቢ መሳሪያዎችን ለአሳሽዎ ይክፈቱ።