Printable Page

ክፍል 5፥ ትዕይንተ-ሥዕል

የዌብ ገጽ መልክ ይዘቱን ማንፀባረቅ አለበት። ይዘትን ላንባቢ ባመቺና ባስደሳች ሁኔታ ማቅረብ የይዘቱን የመነበብ ዕድል ይጨምራል። አንድን ፅንሰ-ሐሳብ በቃል ብቻ ሳይሆን በምስል ወይም ሥዕል አስተባብሮ ማቅረብ ገለጻውን ቀላል ሊያደርገው እንደሚችል ጥርጥር የለውም። እንዲያውም ትዕይንተ-ሥዕል ቢታከልበት አንባቢውን የበለጠ ይማርካል፥ ይዘቱን በእውን መልክ ለማቅረብ ይረዳል።

ለምሳሌ ያንድ ማስታወቂያ ንባብ ካለበት ተለጥፎ ከሚገተር፥ በተለያየ አቅጣጫ ቢንቀሳቀስ ያንባቢውን ትኩረት ሊያገኝ ይችላል። በልዩ ልዩ የሕብረ-ቀለም በተለያየ የጊዜ ደረጃ ቢቀባ ዓይንን መንካቱ አይቀርም። በሌላ አነጋገር፥ አንድን ንባብ፥ ሥዕል ወይም ምስል ሕይወት መስጠት ተነባቢነቱን ብቻ ሳይሆን ማራኪነቱን ይጨምራል። የትዕይንተ-ሥዕል ዓላማ ይኸው ነው። ለሥዕሎች ሕይወትን ይለግሳል።

5.1 የትዕይንተ-ሥዕል አሠራር

ባንድ ሥዕል ላይ ልንፈጽማቸው የምንችላቸው የትዕይንተ-ሥዕል ዓይነቶች አያሌ ሆነው ጥገኝነተቻው እንደ ሥዕሉ ባሕሪ ይሆናል። ለምሳሌ የክብ ሥዕል ባሕሪያት ሬድየስ፥ ጠርዝ፥ ሰውነት፥ ቀለም፥ መጠንና ሌሎችን ይጨምራሉ።

ከነዚህ ውስጥ የትኛውንም ባሕሪ በተወሰነ የጊዜ ክልል ወይም ደረጃ መለዋወጥ ይቻላል። ለውይይት ያህል ከትንሽ ወደ ትልቅ የሚያድግ ክብ የያዘ ትዕይንተ-ሥዕል እንዴት ሊሠራ እንደሚችል እንመልከት። የክቡ ሬድየስ መነሻ ርቀት 10 ፒክስል ይሁን። ማደግ ያለበት እስከ 100 ሆኖ የጊዜው ክልል 10 ሰከንድ ይሁን። የትዕይንተ-ሥዕሉ ቀደም-ተከተል ይኸን ይመስላል።

1. ሬድየሱ 10 ፒክስል የሆነ ክብ ይሣላል። የወደሰው ጊዜ 1 ሰከንድ።
2. ያለፈው ክብ ይሰረዝና ሬድየሱ 20 ፒክስል የሆነ ክብ ይሣላል። የወሰደው ጊዜ 1 ሰከንድ።
3. ያለፈው ክብ ይዘረዝና ሬድየሱ 30 ፒክስል የሆነ ክብ ይሣላል። የወሰደው ጊዜ 1 ሰከንድ።
4. የሬድየሱ ርቀት 100 ፒክስል እንዲሁም የጊዜው ክልክ 10 ሰከንድ እስከሚደርስ ሂደቱ ይደጋገማል።

ይህ በተመለካቹ ዓይን ክቡ ከትንሽ አካል ወደ ትልቅ ሲያድግ ይታያል።

ተግባራዊ ምሳሌ፦ svg_animate_with_xml_attribute.svg

ደግነቱ አንድ ትዕይንተ-ሥዕል ስንፈጥር ከሞላ ጐደል ሁሉንም ሥራ የሚሠራው SVG ነው። መመሪያ ቃላቱን በሥነ ሥርዓት እስካስገባን ድረስ፥ የተመኘነውን ውጤት እናገኛለን።

5.2 የትዕይንተ-ሥዕል ዓይነቶች

SVG አምስት የትዕይንተ-ሥዕል ዓይነቶች አሉት። ዝርዝራቸውን ቀጥለን እንመለከታለን። እያንዳንዳቸውን ለብቻ ወይም በጋራ መጠቀም እንችላለን።

5.2.1 <animate ...>

የማንኛውንም ሥዕል ባህሪ በተወሰነ የጊዜ ክልል ውስጥ በተከታታይ መቀየር እንድ ወጥ እንቅስቃሴ ይፈጥራል ብለናል። የዚህ ትዕይንተ-ሥዕል አብይ ዓላማ በተሰጠ የጊዜ ክልል ውስጥ ያንድ ሥዕልን ባሕሪያት በተከታታይ መቀያየር ነው። የሰፋን ማጥበብ ወይም የጠበበን ማስፋት፤ ያጠረን ማርዘም ወይም የረዘመን ማሳጠር፤ ቀለምን ከነበረበት ወደሌላ መቀየር ወይም በደረጃ ማድመቅ እንዲሁም ማደብዘዝ እና የመሳሰሉት ይገኙበታል።

የ<animate ...> ቃል አጻጻፍ

01.   <circle cx="150" cy="150" r="10" style="fill: red">
02.      <animate attributeName="r"   
03.          from="10px" to="100px" begin="0s" dur="10s"/>
04.   </circle>


				

• ተራ ቍጥር 1 እና 4 የክብ ሥዕል የሚቀርጹ ከፋችና ዘጊ ሥዕላዊ-ቃል ናቸው። የክቡ መኻከል በካርትዣን ሥፍራ ላይ (150,150) ነው። የክቡ ሬድየስ መነሻ ርቀት 10 ፒክስል ነው።
• ተራ ቍጥር 2-3 የትዕይንተ-ሥዕል ቃል ነው።
  1. የትዕይንተ-ሥዕል ቃሉ ዓይነቱን ይገልጻል።
  2. attributeName፦ መቀያየር ያለበት የሥዕሉ ባሕሪ። በምሳሌው ረገድ፥ ያ ባሕሪ «r» ነው። የክቡ ሬድየስ።
  3. from፦ የባሕሪው መነሻ መጠን። በምሳሌው ረገድ የሬድየሱ መነሻ ርቀት 10 ፒክስል ነው።
  4. to፦ የባሕሪው መድረሻ መጠን። በምሳሌው ረገድ የሬድየሱ መድረሻ ርቀት 100 ፒክስል ነው።
  5. begin፦ የባሕሪው ቅየራና የሥዕሉ ሥራ መጀመሪያ ሰዓት። በምሳሌው ረገድ መጀመሪያ ሰዓቱ 0 ሰከንድ ነው።
  6. dur፦ የትዕይንተ-ሥዕሉ የሕይወት ጊዜ (የጊዜ ክልል)። በምሳሌው ረገድ ትዕይንተ-ሥዕሉ ዕድሜ 10 ሰከንድ ነው።

ከምሳሌው እንደምንረዳው፥ የ<circle> ቃል መዋቅር ውጫዊ ሲሆን የ<animate> ግን ውስጣዊ ነው። በሌላ አነጋገር፥ የ<animate> ቃል ተግባሩን የሚያከናውነው በከበበው ሥዕላዊ-ቃል ላይ ነው። ሁልጊዜ የከበበውን ያገለግላል። በነገራችን ላይ በዚህ ጥናት ውስጥ የምንጠቀመው ዘዴ ይህ ብቻ ይሆናል።

ተግባራዊ ምሳሌ፦ svg_animate_with_css_attribute.svg

ተግባራዊ ምሳሌ፦ svg_animate_with_xml_attribute.svg

5.2.2 <animateMotion ...>

ዓላማው፥ አንድን ሥዕል በተሰጠ ፓዝ ወይም ዱካ ላይ በተወሰነ የጊዜ ክልል ውስጥ እንዲጓዝ ያደርጋል። ፓዙ (ዱካው) እንደ ጐዳና ማለት ነው። የጉዞው ፍጥነት የሚወስነው በፓዙ ርቀትና በተሰጠው የጊዜ ክልል ነው። ይኸን ትዕይንተ-ሥዕል ለመገንባት እነዚህ ነገሮች ተፈላጊ ናቸው።

• ፓዝ፦ ሥዕሉ የሚጓዝበት ወይም የሚንቀሳቀስበት፤ ለምሳሌ፦

  <path id="godana" d="M200,200 A100,100 0 1,1 200,300 A100,100 0 0,1 200,200" style="fill: none; stroke: reds"/>

  ይህ ቃል ሦስት አበይት ክፍሎች አሉት። መጠሪያ ስሙ «godana»፥ ዱካውን የሚዘረጋው ዴታ «d»፥ እና የፓዙን መልክ የሚወስነው «style» ናቸው።

• ተንቀሳቃሹ ሥዕል እንዲሁም የ<animateMotin> ቃል፤ ለምሳሌ፦

  01. <circle cx="-24" cy="-24" r="24" 02. style="stroke: black; fill: slateblue"> 03. <animateMotion rotate="auto" dur="10s"> 04. <mpath xlink:href="#godana"/> 05. </animateMotion> 06. </circle>

  ማብራሪያ እነሆ። ተራ ቍጥር 1፥ 2 እና 6 ተጓዡን ሥዕል ይገነባል። በርግጥ ያ ሥዕል ክብ ነው። ከተራ ቍጥር 3 እስከ 5 ያለው የትዕይንተ-ሥዕሉ ቃል ነው። ተጓዡን ሥዕል በተራ ቍጥር 4 በተጠቀሰው ፓዝ መሠረት ያንቀሳቀሳል። ሥዕሉን ከፓዙ ጫፍ እስከ ጫፍ ለማጓጓዝ የተሰጠው ጊዜ 10 ሰከንድ ነው። በጉዞው ላይ በፓዙ የተነሳ ሥዕሉን ማሽከርከር ካስፈለገ ይፈቀዳል።

ተግባራዊ ምሳሌ፦ svg_animate_motion_overview.svg

ተግባራዊ ምሳሌ፦ svg_animate_motion.svg

5.2.3 <animateColor ...>

በተወሰነ የጊዜ ክልል ውስጥ ያንድን ሥዕል ቀለም በተከታታይ ወይም ደረጀ በደረጃ ለመቀያየር ይኸን ትዕይንተ-ሥዕል ዓይነት እንጠቀማለን። ካንድ የቀለም ዓይነት ተነስቶ ወደሌላ ለመሸጋገር ወይም ባንድ የቀለም ድንበር ውስጥ ከጉልህነት ወደ ደብዛዛነት ወይም ከደብዛዛነት ወደ ጉልህነት ለመዝለቅ መፍትሔው ይህ ነው።

የ<animateColor> ቃል አጻጻፍና መዋቅር ይኸን ይመስላል።

   <animateColor attributeName="fill" 
                 from="black" to="white" 
                 begin="0s" dur="10s"/>

				

ይህ ምሳሌ አጣቃላይ አጻጻፉን ለማሳየት ነው እንጂ ማቀፍ የሚችላቸውን ሌሎች ክፍሎቹን በሙሉ አያሳይም። በዚህ መልኩ ብቻ ቃሉ ፋይዳ የለውም። የቀለሙ ሥራ ለየትኛው ሥዕል እንደሆነ በሚከተለው አጻጻፍና መዋቅር እንገልጻለን።

   <rect x="50" y="50" width="500" height="100">
       <animateColor attributeName="fill" 
                   from="black" to="white" 
                   begin="0s" dur="10s"/>
   </rect>

				

የ<rect> ቃል ውጫዊ ሲሆን የ<animateColor> ቃል ግን ውስጣዊ ነው። በዚህ መዋቅር መሠረት የቀለሙ ሥራ የሚካሄደው በ<rect> ሥዕል ላይ ይሆናል። ተግበሩ፥ የሥዕሉን ሰውነት ከጥቁር ቀለም ጀምሮ እስከ ነጭ በ10 ሰከንድ ውስጥ መቀባት ነው። ቅቡ በመጀመሪያ ጥቁር ከዛ ነጭ አይደለም። ከጥቁር ጀምሮ የግሬይ ቀለማትን ደረጃ በደረጃ እየቀባ ወደ ነጭ ያመራና እዛ ላይ ይቆማል። ሽግግሩ ብልጭና ደርግም አይደለም።

ተግባራዊ ምሳሌ፦ svg_animate_color_overview.svg

ተግባራዊ ምሳሌ፦ svg_animate_color.svg

5.2.4 <animateTransform ...>

ዓላማው፥ የሉኩን የመነሻ ቦታ (0,0) ወደ ሌላ ማስፈር፤ ፊደላትን ከዘወትራዊ አቋቋማቸው ወደ ዘመማነት በተወሰነ የጊዜ ክልል ውስጥ መቀየር፤ ሥዕልን ካንድ ዓይነት መጠን ወደ ሌላ ማሳደግ ወይም ማሳነስ፤ ሥዕልን በተሰየመ ማእዘን ማሽከርከር፤ እና የመሳሰሉት። አምስቱ ተግባሮቹ ቀጥለው ቀርበዋል።

• scale( size )፦ ሥዕልን ካንድ መጠን ወደ ሌላ በተሰጠው የጊዜ ክልል ውስጥ ያሳድጋል ወይም ያሳንሳል። እያደረገ፥ ከቦታ ቦታ መደረግ ያለበትን ሽግግር በራሱ ወስኖ ሥራውን ይፈጽማል። የዚህ ክፍል ጥቅም ሥዕልን ማሳደግ ወይም ማሳነስ ብቻ ሳይሆን በስተጀርባ የትራንስሌት (translate) ተግባራትን ይፈጽማል። አጻጻፉ፦

  <animateTransform attributeName="transform" attributeType="XML" type="scale" from="3" to="1" .../>

  ተግባራዊ ምሳሌ፦ svg_animate_transform_scale.svg

• rotate( angle )፦ በተሰጠው ማእዘን (angle) መጠን መሠረት ሥዕሉን ያሽከረክራል ወይም ያዞራል። የማእዘኑ ዋጋ አውንታዊ ከሆነ ሽክርክሩ ወደ ቀኝ ይሆናል፤ አለዛ ወደ ግራ። አጻጻፉ፦

  <animateTransform attributeName="transform" attributeType="XM" type="rotate" from="0" to="360" .../>

  ተግባራዊ ምሳሌ፦ svg_animate_transform_rotate.svg

• translate(x,y)፦ በንድፈ-ሐሳብ ደረጃ የSVG የመሣያ ቦታ የሞኒተሩ ገጽ ይሸፍናል። አለካኩ በስተግራ በኩል ከላይ ካለው የሞኒተሩ ጥግ ይጀምራል። እሱም (0,0) ነው። በx-አክሰስ ከግራ ወደ ቀኝ መጠኑ እየጨመረ ሲሄድ በy-አክሰስ ረገድ ከላይ ወደ ታች ይሆናል። አንዳንድ ጊዜ የመነሻ ሥፍራውን ካለበት አንስቶ ሌላ ላይ ማስቀመጥ ጥቅም ይኖረዋል። ለምሳሌ የምንሥለው ሥዕል አሉታዊ ቍጥሮች (negative numbers) የሚያሳትፍ ከሆነ ወይም ተለምዷዊ የካርትዣን ግራፍ መንድፍ የምንሻ ከሆነ የመነሻ ሥፍራውን መቀየር እጅግ በጣም ሥራውን ያቀለዋል። አጻጻፉ፦

  <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0,0" to="300,200" .../>

  ተግባራዊ ምሳሌ፦ svg_animate_transform_translate.svg

• skewX( angle ) | skewY( angle )፦ በተሰጠው የማእዘን (angel) መጠን መሠረት ሥዕልን በጐን ወይም በቁም የጠመዝዛል። የማእዘኑ ዋጋ አሉታዊ ከሆነ ሥዕሉን ወደ ግራ ይጠመዝዛል፤ አለዛ ወደ ቀኝ። አጻጻፉ፦

  <animateTransform attributeName="transform" attributeType="XML" type="skewX" from="-45" to="0" .../>

  ተግባራዊ ምሳሌ፦ svg_animate_transform_skewx.svg

የ<animateTransform ...> ቃል አጠቃቀም እንዲህ ነው። በተደጋጋሚ አስቀድሞ እንዳየነው፥ የትዕይንተ-ሥዕሉ ቃል ውስጣዊ ይሆንና የሥዕሉ ቃል ውጫዊ ይሆናል። ሌላ አንድ መንገድ አለ። ነገር ግን ያንን እዚህ ጥናት ውስጥ አንጠቀምም።

   <text x="0" y="0" ...>
      S
      <animateTransform attributeName="transform" 
                        attributeType="XML"
                        type="rotate" 
                        from="0" to="360" dur="5s"
                        repeatCount="indefinite"/>
   </text>

				

ከዚህ ቃል እንደምናየው፥ የውጫዊው ቃል ንባብ ጸሓፊ ነው። የ<animateTransform> ቃል የተሰጠውን ፊደል በተጠየቀው መሠረት ያሽከረክራል። አንዱ ዙር የሚፈጅበት ጊዜ 5 ሰከንድ ነው። ድግግሞሹ ወሰን ስሌለው፥ የማሽከርከሩን ተግባር በተደጋጋሚ ይቀጥላል።