ነፃ ሳንቲም ገልብጥ እና ጎማ ማሽከርከሪያ

እንዴት እንደሚሠራ

ሦስቱም ሁነታዎች — ሳንቲም መገልበጥ፣ ጎማ ማሽከርከር እና አማራጭ መምረጥ — አሸናፊውን ውጤት ለማመንጨት የአሳሹን አብሮገነብ Web Crypto API (crypto.getRandomValues) ይጠቀማሉ፤ ከዚያም እንቅስቃሴውን ሙሉ በሙሉ በአሳሹ ውስጥ በCSS transform እና በrequestAnimationFrame ያከናውናሉ። በየትኛውም ደረጃ አገልጋይ አይሳተፍም።

1. 1
   Web Crypto አሸናፊውን ይመርጣል

   ማንኛውም እንቅስቃሴ ከመጀመሩ በፊት crypto.getRandomValues አንድ Uint32Arrayን በምስጠራ ደረጃ በዘፈቀደ በተገኘ ባለ 32 ቢት ኢንቲጀር ይሞላል። የmodulo ስሌት ቁጥሩን ከአማራጮቹ ብዛት ጋር ያዛምዳል (ለዘውድ/ጎፈር 2፣ ለጎማው ወይም ለመራጩ N)፤ ስለዚህ እያንዳንዱ ውጤት በትክክል እኩል ዕድል አለው።
2. 2
   የማሽከርከሪያ ማዕዘኑ ውጤቱ ላይ እንዲያርፍ ይሰላል

   ለሳንቲሙ ኮዱ ትክክለኛው ገጽ ወደ ላይ እንዲሆን (ዘውድ በ0°፣ ጎፈር በ180°) አሁን ባለው ድምር ማዕዘን ላይ የሚጨመረውን አጭሩን ተጨማሪ ዙር ያሰላል፣ ከዚያም እውነተኛ መገልበጥ እንዲመስል 5 ሙሉ ዙሮችን ይጨምራል። ጎማውም እንደዚሁ ነው፤ አሸናፊውን ክፍል ከጠቋሚው ሥር የሚያመጣውን የማዕዘን ልዩነት ያገኛል፣ 6 ሙሉ ዙሮችን ይጨምራል፣ እና ጠቋሚው ሁልጊዜ በክፍሉ መሀል ላይ እንዳይቆም ትንሽ የዘፈቀደ ልዩነት ያክላል።
3. 3
   የCSS ሽግግሮች እና requestAnimationFrame እንቅስቃሴውን ያከናውናሉ

   ሳንቲሙ እና ጎማው የሚንቀሳቀሱት በአንድ የተጠራቀመ የማሽከርከሪያ እሴት ላይ cubic-bezier የፍጥነት ኩርባ በተተገበረበት CSS transform ነው — ማዕዘኑ ከተዘጋጀ በኋላ በየፍሬሙ JavaScript አያስፈልግም። አማራጭ መራጩ ግን requestAnimationFrame ይጠቀማል፤ በእያንዳንዱ ፍሬም በካሬ የሚያድግ ክፍተት ማድመቂያው ወደፊት ይሂድ እንደሆነ ይወስናል፤ ይህም እንደ ቁማር ማሽን ቀስ እያለ የሚቆም እና ሁልጊዜ አስቀድሞ በተወሰነው አሸናፊ ላይ የሚያርፍ እንቅስቃሴ ይፈጥራል።
4. 4
   ውጤቱ ይገለጣል እና በክፍለ-ጊዜው ታሪክ ውስጥ ይመዘገባል

   እንቅስቃሴው ሲያበቃ (ለሳንቲሙ 1.3 s፣ ለጎማው 4.3 s) setTimeout ይነሳና ውጤቱን ወደ state ይጽፋል። የሳንቲም ሁነታው እስከ 24 የሚደርሱ መገልበጦችን ከዘውድ/ጎፈር ቆጠራ ጋር በክፍለ-ጊዜ ታሪክ ውስጥ ይይዛል። prefers-reduced-motion ያበሩ ተጠቃሚዎች እንቅስቃሴውን ሙሉ በሙሉ ይዘሉና ውጤቱን ወዲያውኑ ያያሉ።

ተዛማጅ መሳሪያዎች