ስለ CSS እና SVG እነማዎች የምችለውን ሁሉ እንድማር የሚያስፈልገኝን ፕሮጀክት ከጨረስኩ በኋላ፣ ስለ ስማሺንግ አኒሜሽን እና ስለ “እንዴት ክላሲክ ካርቱኖች ዘመናዊ ሲኤስኤስን እንደሚያበረታቱ” ተከታታይ ጽሑፍ መጻፍ ጀመርኩ። ይህንን አመት ለማጠቃለል፣ የቶን ርዕስን በጣም ተፅዕኖ የሚያሳድር አካል ለመፍጠር ዘመናዊ CSSን እንዴት መጠቀም እንደምትችል ላሳይህ እፈልጋለሁ፡ የፅህፈት ቤታቸው። አርእስት የስነ ጥበብ ስራ ንድፍ እ.ኤ.አ. በ1920ዎቹ እና በ30ዎቹ መጀመሪያ ላይ በፀጥታው ዘመን፣ የፊልም አርእስት ካርዱ አጻጻፍ ስሜትን ፈጠረ፣ ትዕይንቱን አዘጋጅቷል እና ተመልካቾችን ለማየት የሚከፍሉትን የፊልም አይነት አስታውሷል።
የካርቱን ርዕስ ካርዶች እንዲሁ የምርት ስም፣ ስሜት እና የትእይንት አቀማመጥ ነበሩ፣ ሁሉም ወደ አንድ ተንከባለሉ። በመጀመሪያዎቹ ዓመታት፣ ዋና የስቱዲዮ በጀቶች ትልቅ ሲሆኑ፣ እነዚህ የርዕስ ካርዶች ብዙ ጊዜ ገላጭ እና ሥዕላዊ ነበሩ።
ነገር ግን በ1950ዎቹ ቴሌቪዥን ሲበዛ፣ በጀት ወድቋል፣ እና እንደ ሎውረንስ “አርት” ጎብል ባሉ አርቲስቶች የተነደፉ ካርዶች ይበልጥ ግራፊክ፣ ቅጥ ያለው እና ብዙም ውስብስብ እየሆኑ አዲስ የእይታ ቋንቋ ወሰዱ። ማስታወሻ፡ ሎውረንስ “አርት” ጎብል የመካከለኛው ክፍለ ዘመን የአሜሪካ አኒሜሽን ብዙ ጊዜ ችላ ከነበሩ ጀግኖች አንዱ ነው። በዋነኛነት ለሃና-ባርቤራ በ1950ዎቹ እና 1960ዎቹ በጣም ተደማጭነት በተሞላበት አመታት ውስጥ ሰርቷል። ጎብል ገፀ ባህሪ አኒሜተር አልነበረም። የእሱ ሚና ከባቢ አየርን መፍጠር ነበር፣ስለዚህ ለFlintstones፣Huckleberry Hound፣ Quick Draw McGraw እና ዮጊ ድብ እንዲሁም ድምጹን ለሚያዘጋጁት የመክፈቻ አርእስት ካርዶች አከባቢዎችን ነድፏል። በአርማ የተደራረቡ ሥዕሎችን የሚያሳዩ የርዕስ ካርዶቹ የሃና-ባርቤራን ምስላዊ ገጽታ ለመግለጽ ረድተዋል። እንደ Quick Draw McGraw እና Yogi Bear ላሉ ገፀ-ባህሪያት የጎብል የጥበብ ስራ በትናንሽ የቲቪ ስክሪኖች ላይ ውጤታማ ነበር። ከካርቱኑ ላይ የቆመ ምስልን ከማባዛት ይልቅ ዋናውን ነገር የሚይዘውን አንድ ጠንካራ ሀሳብ - ብዙ ጊዜ በሲሊሆውት በማቅረብ ላይ አተኩሯል። በ"The Buzzin' Bear" ውስጥ ዮጊ በሄሊኮፕተር ውስጥ ጮኸ። እሱ ወጣ፣ የፒክ-አ-ኒክ ቅርጫት በእጁ፣ “በፒክኒክ ላይ ድብ” ውስጥ፣ እና ለ“Prize Fight Fright” ዮጊ የርዕስ ፅሁፉን ሣጥኖታል።
ለመመካት ትንሽ ወይም ምንም እንቅስቃሴ ሳይኖር የጎብል ነጠላ ክፈፎች ስሜትን መፍጠር፣ ትዕይንቱን ማዘጋጀት እና ታሪክን መግለጽ ነበረባቸው። ይህን ያደረጉት ጠፍጣፋ ቀለሞችን፣ ስዕላዊ ቅርጾችን እና በሥነ ጥበብ ሥራው ውስጥ በተደጋጋሚ የተዋሃዱ የፊደል አጻጻፍን በመጠቀም ነው።
በድህረ-ገጽ ላይ የሚሰሩ ዲዛይነሮች እንደመሆናችን መጠን የቶን አርእስቶች የምርትን ስብዕና እንዴት እንደምናስተላልፍ፣ የመጀመሪያ ስሜት እንደሚፈጥር እና ምርትን ወይም ድር ጣቢያን በመጠቀም የአንድን ሰው ልምድ እንዴት እንደሚጠብቁ ብዙ ሊያስተምሩን ይችላሉ። ውጤታማ ባነሮች፣ የማረፊያ ገጽ ራስጌዎችን እና ጥሩ የፍላሽ ስክሪኖችን ለመፍጠር ከአርቲስቶች ቴክኒኮች መማር እንችላለን። Toon ርዕስ ትየባ የካርቱን ርዕስ ካርዶች አይነት ከምስል ጋር መቀላቀል እንዴት የራስጌን ወይም የጀግንነት ፍላጎትን እንደሚያቀርብ ያሳያሉ። በጣት በሚቆጠሩ የጽሑፍ-ጥላ፣ የጽሑፍ-ስትሮክ እና የመለወጥ ዘዴዎች፣ ዘመናዊ CSS ያንን ተመሳሳይ ጉልበት እንድትጠቀሙ ያስችልዎታል።
የቶን ጽሑፍ ርዕስ አመንጪ ይህን ጽሁፍ በመጻፍ በከፊል፣ በጣም እንደምወዳቸው የካርቱን አርእስቶች አይነት ጽሁፍ ለማመንጨት የሚያስችል መሳሪያ ቢኖረኝ ጠቃሚ እንደሆነ ተገነዘብኩ። ስለዚህ አንድ አደረግሁ. My Toon Text Title Generator በቀለም፣ ስትሮክ እና በበርካታ የፅሁፍ ጥላዎች እንዲሞክሩ ያስችልዎታል። የቀለም ቅደም ተከተል ማስተካከል፣ የደብዳቤ ክፍተትን መተግበር፣ ጽሑፍዎን በተመረጡ የናሙና ቅርጸ-ቁምፊዎች ቅድመ-እይታ ማየት እና በፕሮጄክት ውስጥ ለመጠቀም የመነጨውን CSS በቀጥታ ወደ ቅንጥብ ሰሌዳዎ መቅዳት ይችላሉ። የቶን ርዕስ CSS የ Toon Text Title Generator የሚያቀርብልዎትን CSS በቀላሉ ቀድተው መለጠፍ ይችላሉ። ግን ምን እንደሚሰራ ጠለቅ ብለን እንመርምር. የጽሑፍ ጥላ በዚህ ርዕስ ውስጥ ያለውን አይነት ከአውጊ ዶግጊ ክፍል “ዩክ-ዩክ ዳክ” ይመልከቱ፣ ከነጭ ቢጫ ፊደላት እና ጥቁር፣ ጠንከር ያለ፣ ከበስተጀርባ የሚያነሳው እና የጥልቀት ቅዠትን የሚፈጥር ጥላ።
የጽሑፍ-ጥላ አራት እሴቶችን እንደሚቀበል አስቀድመው ያውቁ ይሆናል፡ (1) አግድም እና (2) ቋሚ ማካካሻዎች፣ (3) ድብዘዛ፣ እና (4) ጠንካራ ወይም ከፊል-ግልጽ የሆነ ቀለም። እነዚያ የማካካሻ ዋጋዎች አወንታዊ ወይም አሉታዊ ሊሆኑ ይችላሉ፣ስለዚህ ወደ ታች እና ወደ ቀኝ የተጎተተውን ጠንካራ ጥላ በመጠቀም “ዩክ-ዩክ ዳክ”ን መድገም እችላለሁ፡- ቀለም፡ # f7f76d; ጽሑፍ-ጥላ: 5 ፒክስል 5 ፒክስል 0 # 1e1904;
በሌላ በኩል፣ ይህ “ፒንት ጃይንት” ርዕስ ከአሉታዊ ከፊል ለስላሳ ጥላ የተለየ ስሜት አለው፡- ቀለም፡ # c2a872; ጽሑፍ-ጥላ: -7 ፒክስል 5 ፒክስል 0 #b100e፣ 0 -5 ፒክስል 10 ፒክስል # 546c6f;
ተጨማሪ ጥልቀት ለመጨመር እና የበለጠ አስደሳች ውጤቶችን ለመፍጠር, ብዙ ጥላዎችን መደርደር እችላለሁ. ለ"ዳክ ውጣ" አራት ጥላዎችን አጣምሬአለሁ፡ የመጀመሪያው ፅሁፉን ከበስተጀርባ ለማንሳት ከአሉታዊ አግድም ማካካሻ ጋር፣ በመቀጠልም ቀስ በቀስ ለስላሳ ጥላዎች በዙሪያው ብዥታ እንዲፈጠር ያደርጋሉ፡ ቀለም፡ # 6F4D80; ጽሑፍ-ጥላ: -5 ፒክስል5 ፒክስል 0 #260e1e፣ /* ጥላ 1 */ 0 0 15 ፒክስል #e9ce96፣ /* ጥላ 2 */ 0 0 30 ፒክስል #e9ce96፣ /* ጥላ 3 */ 0 0 30 ፒክስል # e9ce96; /* ጥላ 4 */
እነዚህ ጥላዎች እንደሚያሳዩት የጽሑፍ-ጥላን መጠቀም የብርሃን ተፅእኖዎችን መፍጠር ብቻ አይደለም, ምክንያቱም እነሱ ያጌጡ እና ስብዕና ይጨምራሉ. የጽሑፍ ስትሮክ ብዙ የካርቱን አርእስት ካርዶች ከበስተጀርባ ጎልተው እንዲታዩ የሚያደርጋቸው ደማቅ ንድፍ ያላቸው ፊደሎችን ያሳያሉ። የጽሑፍ-ስትሮክን በመጠቀም ይህንን ተፅእኖ እንደገና መፍጠር እችላለሁ። ለረጅም ጊዜ ይህ ንብረት የሚገኘው በ-webkit- ቅድመ ቅጥያ ብቻ ነበር፣ ነገር ግን ያ ማለት አሁን በዘመናዊ አሳሾች ላይ ተደግፏል ማለት ነው።
ጽሑፍ-ስትሮክ ለሁለት ንብረቶች አጭር እጅ ነው። የመጀመሪያው፣ የጽሑፍ-ስትሮክ-ስፋት፣ በእያንዳንዱ ፊደላት ዙሪያ ኮንቱር ይሳሉ፣ ሁለተኛው፣ የጽሑፍ-ስትሮክ-ቀለም፣ ቀለሙን ይቆጣጠራል። ለ"Whatever Goes Pup" ወደ ቢጫ ጽሁፍ 4px ሰማያዊ ምት ጨምሬአለሁ፡ ቀለም፡ #eff0cd; -webkit-text-stroke: 4px # 7890b5; ጽሑፍ-ስትሮክ: 4 ፒክስል # 7890b5;
ስትሮክ በተለይ ከጥላዎች ጋር ሲዋሃድ ጠቃሚ ሊሆን ይችላል፣ስለዚህ "ማደግ፣ ማደግ፣ ሄዷል" ይህን ባለ ሶስት አቅጣጫዊ የፅሁፍ ውጤት ለመፍጠር ቀጭን ባለ 3 ፒክስል ስትሮክ ወደ ደበዘዘው 1 ፒክስል ጥላ ጨምሬአለሁ። ቀለም፡ #fbb999; ጽሑፍ-ጥላ: 3 ፒክስል 5 ፒክስል 1 ፒክስል # 5160b1; -webkit-text-stroke: 3px # 984336; ጽሑፍ-ስትሮክ: 3 ፒክስል # 984336;
የቀለም ቅደም ተከተል የጽሑፍ-ስትሮክን መጠቀም ሁልጊዜ የሚጠበቀውን ውጤት አያመጣም, በተለይም በቀጭኑ ፊደላት እና ጥቅጥቅ ያሉ ጭረቶች, ምክንያቱም በነባሪነት አሳሹ በመሙላት ላይ አንድ ምት ይስባል. በሚያሳዝን ሁኔታ፣ በSketch ውስጥ ብዙ ጊዜ እንደማደርገው CSS አሁንም የስትሮክ አቀማመጥን እንዳስተካክል አይፈቅድልኝም። ሆኖም ፣ የቀለም ቅደም ተከተል ንብረቱ ከመሙላቱ ፊት ለፊት ሳይሆን ስትሮክን ከኋላ እንዳስቀምጥ የሚፈቅዱ እሴቶች አሉት።
የቀለም ቅደም ተከተል፡- ስትሮክ በመጀመሪያ ስትሮቱን ይቀባዋል፣ ከዚያም ሙላውን ይቀባዋል፣ ነገር ግን ቀለም ቅደም ተከተል፡ መሙላት ተቃራኒውን ይሠራል። ቀለም፡ #fbb999; ቀለም-ማዘዣ: መሙላት; ጽሑፍ-ጥላ: 3 ፒክስል 5 ፒክስል 1 ፒክስል # 5160b1; ጽሑፍ-ስትሮክ-ቀለም: # 984336; የጽሑፍ-ስትሮክ-ስፋት: 3 ፒክስል;
ውጤታማ የሆነ ስትሮክ ፊደላትን እንዲነበብ ያደርጋል፣ ክብደትን ይጨምራል፣ እና - ከጥላዎች እና ከቀለም ቅደም ተከተል ጋር ሲጣመር - ጠፍጣፋ ጽሑፍ እውነተኛ መገኘትን ይሰጣል። የጽሑፍ ውስጥ ዳራዎች ብዙ የካርቱን ርዕስ ካርዶች ሸካራነት፣ ቅልመት፣ ወይም በሥዕላዊ መግለጫው ላይ በዝርዝር በማከል ከጠፍጣፋ ቀለም አልፈው ይሄዳሉ። አንዳንድ ጊዜ ይህ ሸካራነት ነው፣ ሌላ ጊዜ ደግሞ ስውር የቃና ለውጥ ያለው ቅልመት ሊሆን ይችላል። በድሩ ላይ፣ ከጽሑፉ በስተጀርባ ያለውን የጀርባ ምስል ወይም ቅልመት በመጠቀም፣ እና ከዚያ ወደ ፊደሎቹ ቅርፅ በመቁረጥ ይህን ተፅእኖ እንደገና መፍጠር እችላለሁ። ይህ የሚመረኮዘው በአንድ ላይ በመሥራት ሁለት ንብረቶች ላይ ነው፡ ዳራ-ክሊፕ፡ ጽሑፍ እና የጽሑፍ ሙላ ቀለም፡ ግልጽ።
በመጀመሪያ ከጽሑፉ በስተጀርባ ያለውን ዳራ ተግባራዊ አደርጋለሁ። ይህ የቢትማፕ ወይም የቬክተር ምስል ወይም የሲኤስኤስ ቅልመት ሊሆን ይችላል። ለዚህ ምሳሌ ከ‹‹Baba Bait› የፈጣን ሥዕል ማክግራው ክፍል፣ የርዕስ ጽሑፉ ረቂቅ ከላይ እስከ ታች ከጨለማ ወደ ብርሃን ቅልመትን ያካትታል። ዳራ፡ መስመራዊ-ግራዲየንት(0deg፣ #667b6a፣ #1d271a);
በመቀጠል ያንን ዳራ ከግሊፍስ ጋር እቆራርጣለሁ እና ጽሑፉ ግልፅ እንዲሆን አደርገዋለሁ ይህም ዳራ በ: -webkit-background-clip: ጽሑፍ; -webkit-text-fill-color: ግልጽ;
በእነዚያ ሁለት መስመሮች ብቻ, የጀርባው ጀርባ ከጽሑፉ ጀርባ አይቀባም; ይልቁንስ በውስጡ ተስሏል. ይህ ዘዴ በተለይ ከጭረት እና ጥላዎች ጋር ሲጣመር በደንብ ይሰራል. የተቀነጠፈ ቅልመት ፊደሉን በቀለም እና በሸካራነት ያቀርባል፣ ስትሮክ ጠርዙን ስለታም ያደርገዋል እና ጥላ ከበስተጀርባ ከፍ ያደርገዋል። አንድ ላይ ሆነው፣ ከትንሽ CSS የዘለለ ምንም ነገር ሳይጠቀሙ በእጅ የተሳሉ የርዕስ ካርዶችን የተደራረበ መልክ ይፈጥራሉ። እንደ ሁልጊዜው፣ የአሳሽ ውጣ ውረድ አንዳንድ ጊዜ ጥላ እና አተረጓጎም ላይ ተጽዕኖ ስለሚያሳድር የተቀነጠበ ጽሑፍን በጥንቃቄ ሞክር። ጽሑፍን ወደ ግለሰባዊ ገጸ-ባህሪያት መከፋፈል አንዳንድ ጊዜ ሙሉ ቃል ወይም ርዕስ መሳል አልፈልግም። ነጠላ ፊደላትን መቅረጽ እፈልጋለሁ - ገጸ ባህሪን ወደ ቦታው ለመጠቅለል ፣ አንድ ግሊፍ ተጨማሪ ክብደት ለመስጠት ፣ ወይም የተወሰኑ ፊደላትን ለብቻው ለማንቀሳቀስ። በኤችቲኤምኤል እና በሲኤስኤስ ውስጥ፣ ይህንን ለማድረግ አንድ አስተማማኝ መንገድ ብቻ አለ፡ እያንዳንዱን ቁምፊ በራሱ የስፔን ኤለመንት መጠቅለል። ያንን በእጅ ማድረግ እችል ነበር፣ ነገር ግን ያ ደካማ፣ ለማቆየት ከባድ እና ቅጂ ሲቀየር በፍጥነት ይፈርሳል። በምትኩ፣ በፊደል ቁጥጥር ስፈልግ፣ እንደ splt.js (ሌሎች መፍትሄዎች ቢኖሩም) ጽሑፍ የሚከፋፍል ቤተ-መጽሐፍትን እጠቀማለሁ። ይህ የጽሑፍ መስቀለኛ መንገድ ይወስዳል እና ቃላትን ወይም ቁምፊዎችን በራስ-ሰር ይጠቀልላል፣ ይህም ምልክቴን ሳላበላሽበት እነማ እና ስታይል ለማድረግ ተጨማሪ መንጠቆዎችን ይሰጠኛል። የእኔን ኤችቲኤምኤል ተነባቢ እና ትርጉሙን የሚያቆይ አካሄድ ነው፣ ጥሩ ጥራት ያለው ቁጥጥር ሲሰጠኝ በጥንታዊ የካርቱን አርእስት ካርዶች ላይ የሚያዩትን ያልተስተካከለ እና ገጸ ባህሪ ያለው የፊደል አጻጻፍ እንደገና ለመፍጠር ያስፈልገኛል። ይሁን እንጂ ይህ አቀራረብ አብሮ ይመጣልአብዛኞቹ የማያ ገጽ አንባቢዎች የጽሑፍ አንጓዎችን በቅደም ተከተል ስለሚያነቡ የተደራሽነት ማስጠንቀቂያዎች። ስለዚህ ይህ፡-
ሀም ስዊት ሁም
…እንደጠበቁት ያነባል፡- ሁም ጣፋጭ ሁም
ግን ይህ፡-
H u ም
እንደ አሳሹ እና ስክሪን አንባቢው ላይ በመመስረት በተለየ መንገድ ሊተረጎም ይችላል። አንዳንዶች ፊደላትን ያጣምሩ እና ቃላቱን በትክክል ያነባሉ። ሌሎች በደብዳቤዎች መካከል ለአፍታ ማቆም ይችላሉ፣ ይህም በጣም በከፋ ሁኔታ ውስጥ የሚከተለውን ሊመስል ይችላል፡- “H…” “ዩ…” “መ…”
በሚያሳዝን ሁኔታ፣ አንዳንድ የመከፋፈያ መፍትሄዎች ሁልጊዜ ተደራሽ የሆነ ውጤት አያሳዩም፣ ስለዚህ አሁን በቅድመ-ይሁንታ ላይ ያለውን የራሴን የጽሁፍ መከፋፈያ፣ splinter.js ጻፍኩ። የግለሰብ ደብዳቤዎችን መለወጥ የእኔን Toon Text Splitterን ለማንቃት፣ ለመከፋፈል የምፈልገው አካል የውሂብ ባህሪን እጨምራለሁ፡
ሀም ስዊት ሁም
በመጀመሪያ፣ የእኔ ስክሪፕት እያንዳንዱን ቃል ወደ ግለሰባዊ ፊደሎች ይለያል እና በክፍል እና ARIA ባህሪዎች በተተገበረ የስፔን ክፍል ያጠቅልላቸዋል፡
ከዚያም ስክሪፕቱ የተከፋፈለውን ንጥረ ነገር የመጀመሪያ ይዘት ወስዶ ተደራሽነትን ለማስቀጠል እንደ ኤሪያ ባህሪ ያክላል፡
በእነዚያ የክፍል ባህሪያት ከተተገበሩ፣ እኔ እንደመረጥኩ የግለሰቦችን ቁምፊዎችን መቅረጽ እችላለሁ።
ለምሳሌ፣ ለ "Hum Sweet Hum" ፊደሎቹ እንዴት ከመነሻ መስመር እንደሚርቁ መድገም እፈልጋለሁ። የእኔን Toon Text Splitter ከተጠቀምኩ በኋላ፣ ከፊል የዘፈቀደ መልክ ለመፍጠር ብዙ :nth-child መራጮችን በመጠቀም አራት የተለያዩ የትርጉም እሴቶችን ተጠቀምኩ። /* 4ኛ፣ 8ኛ፣ 12ኛ... */ toon-char: ኛ-ልጅ (4n) { ትርጉም: 0 -8 ፒክስል; } /* 1ኛ፣ 5ኛ፣ 9ኛ...*/ ቶን-ቻር፡ኛ-ልጅ(4n+1) {መተርጎም፡ 0 -4px; } /*2ኛ፣ 6ኛ፣ 10ኛ...*/ ቶን-ቻር፡ኛ-ልጅ(4n+2) { ትርጉም፡ 0 4px; } /* 3ኛ፣ 7ኛ፣ 11ኛ... */ ቶን-ቻር፡ኛ-ልጅ(4n+3) { ትርጉም፡ 0 8px; }
ነገር ግን መተርጎም የእኔን የቶን ጽሑፌን ለመለወጥ ልጠቀምበት የምችለው አንድ ንብረት ብቻ ነው።
ለበለጠ ምስቅልቅል መልክ እነዚያን ነጠላ ቁምፊዎች ማሽከርከር እችላለሁ፡ /* 4ኛ፣ 8ኛ፣ 12ኛ... */ .toon-line .toon-char:nth-child (4n) { አሽከርክር: -4deg; } /* 1ኛ፣ 5ኛ፣ 9ኛ...*/ .toon-char: ኛ-ልጅ (4n+1) { አሽከርክር: -8deg; } /*2ኛ፣ 6ኛ፣ 10ኛ...*/ .toon-char: ኛ-ልጅ (4n+2) { አሽከርክር: 4deg; } /* 3ኛ፣ 7ኛ፣ 11ኛ... */ .toon-char: ኛ-ልጅ (4n+3) { አሽከርክር: 8deg; }
ነገር ግን መተርጎም የእኔን የቶን ጽሑፌን ለመለወጥ ልጠቀምበት የምችለው አንድ ንብረት ብቻ ነው። ለበለጠ ምስቅልቅል መልክ እነዚያን ነጠላ ቁምፊዎች ማሽከርከር እችላለሁ፡ /* 4ኛ፣ 8ኛ፣ 12ኛ... */ toon-line .toon-char:nth-child(4n) { አሽከርክር: -4deg; }
/* 1ኛ፣ 5ኛ፣ 9ኛ...*/ ቶን-ቻር፡ኛ-ልጅ(4n+1) { አሽከርክር: -8deg; }
/*2ኛ፣ 6ኛ፣ 10ኛ...*/ ቶን-ቻር፡ኛ-ልጅ(4n+2) { አሽከርክር: 4deg; }
/* 3ኛ፣ 7ኛ፣ 11ኛ... */ ቶን-ቻር፡ኛ-ልጅ(4n+3) { አሽከርክር፡ 8deg; }
እና፣ በእርግጥ፣ እነዛን ገፀ-ባህሪያት ለመቀያየር እና የቶን የፅሁፍ ስታይል አርዕስትን ወደ ህይወት ለማምጣት እነማዎችን ማከል እችላለሁ። በመጀመሪያ፣ ቁምፊዎችን የሚያዞር የቁልፍ ፍሬም እነማ ፈጠርኩ፡-
@የቁልፍ ክፈፎች ዥዋዥዌ { 0%፣ 100% {መቀየር፡ አሽከርክር(var(--base-roate፣ 0deg))); } 25% {መቀየር፡ አሽከርክር(ካልክ(var(--base-roate፣ 0deg)+ 3deg)); } 50% { ትራንስፎርመር፡ አሽከርክር (ካልሲ (var (--base-roate, 0deg) - 2deg)); } 75% {መቀየር፡ አሽከርክር(ካልሲ(var(--base-roate፣ 0deg)+ 1deg)); } }
በእኔ Toon Text Splitter በተፈጠሩት የስፔን አካላት ላይ ከመተግበሩ በፊት፡- ቶን-ቻር { አኒሜሽን፡ jiggle 3s ማለቂያ የሌለው ቀላል-ውጭ; ትራንስፎርመር፡ ማዕከላዊ ታች; }
እና በመጨረሻም ፣ እያንዳንዱ ገጸ ባህሪ መወዛወዝ ከመጀመሩ በፊት የማዞሪያውን መጠን እና መዘግየትን ማቀናበር፡- .toon-char: ኛ-ልጅ (4n) {--መሠረት-አሽከርክር: -2deg; } ቶን-ቻር፡ኛ-ልጅ(4n+1) {--base-rorate: -4deg; } ቶን-ቻር፡ኛ-ልጅ(4n+2) {--base-rorate፡ 2deg; } ቶን-ቻር፡ኛ-ልጅ(4n+3) {--base-rorate፡ 4deg; }
ቶን-ቻር፡ኛ-ልጅ(4n) {አኒሜሽን-ዘግይቶ፡ 0.1s; } .toon-ቻር፡ኛ-ልጅ(4n+1) {አኒሜሽን-ዘግይቶ፡ 0.3s; } .toon-ቻር፡ኛ-ልጅ(4n+2) {አኒሜሽን-ዘግይቶ፡ 0.5s; } ቶን-ቻር፡ኛ-ልጅ(4n+3) {አኒሜሽን-ዘግይቶ፡ 0.7s; }
እንድምታ ለመፍጠር አንድ ፍሬም የካርቱን አርእስት አርቲስቶች ስሜት ለመፍጠር አንድ ፍሬም ነበራቸው፣ እና የእነሱ የፊደል አጻጻፍ እንደ ሥዕል ሥራው አስፈላጊ ነበር። በድር ላይም ተመሳሳይ ነው. በደንብ የተነደፈ ራስጌ ወይም ጀግናአካባቢ ግልጽነት፣ ባህሪ እና መተማመን ይፈልጋል - በቀላሉ የደበዘዘ ባለ ሙሉ ስፋት የጀርባ ምስል አይደለም። በጥቂቱ በጥንቃቄ በተመረጡ የሲኤስኤስ ባህሪያት - ጥላዎች፣ ስትሮክ፣ የተቀነጠቁ ዳራዎች እና አንዳንድ የተከለከለ እነማ - ያንኑ ተጽዕኖ እንደገና መፍጠር እንችላለን። የቶን ጽሑፍን የምወደው ስለናፍቀኝ ሳይሆን ንድፉ ሆን ተብሎ የተደረገ ስለሆነ ነው። ሆን ብለው ምርጫዎችን ያድርጉ እና ትንሽ ቶን የፅሁፍ ትየባ በንድፍዎ ላይ ቡጢ እንዲጨምር ያድርጉ።
