Մետաղադրամ ու վճռաբաժին անիվ անվճար

Ինչպես է այն աշխատում

Երեք ռեժիմներն էլ — մետաղադրամի նետում, անիվի պտույտ և ընտրանքի ընտրիչ — օգտագործում են դիտարկիչի ներկառուցված Web Crypto API-ն (crypto.getRandomValues)՝ հաղթող արդյունքը ստեղծելու համար, ապա ամբողջովին կողմնային CSS ձևափոխումներով և requestAnimationFrame-ով վարում են անիմացիան։ Ոչ մի կետում սերվեր ներգրավված չէ։

1. 1
   Web Crypto-ն ընտրում է հաղթողին

   Մինչև ցանկացած անիմացիայի սկսելը, crypto.getRandomValues-ը Uint32Array-ը լցնում է ծպտագրորեն պատահական 32-բիթանոց ամբողջ թվով։ Մոդուլո գործողությունը այն քարտեզագրում է ընտրանքների քանակին (2՝ գլուխ/կրծք, N՝ անիվի կամ ընտրիչի համար), ուստի յուրաքանչյուր արդյունք ունի ուղիղ հավասար հավանականություն։
2. 2
   Պտույտի անկյունը հաշվարկվում է արդյունքի վրա ընկնելու համար

   Մետաղադրամի համար կոդը հաշվարկում է ամենակարճ լրացուցիչ պտույտը (ընթացիկ կուտակային անկյան վրայից), որն ավարտվում է ճիշտ երեսով վերև — գլուխը 0°-ում, կրծքը 180°-ում — ապա ավելացնում 5 ամբողջական պտույտ, որպեսզի այն նման լինի իրական թռիչքի։ Անիվն անում է նույնը. այն գտնում է անկյունային շեղումը, որը հաղթող հատվածը բերում է ցուցիչի տակ, ավելացնում 6 ամբողջական պտույտ, և կիրառում է փոքր պատահական ցնցում, որպեսզի ցուցիչը միշտ չկանգնի հատվածի հենց կենտրոնում։
3. 3
   CSS անցումները և requestAnimationFrame-ը վարում են անիմացիան

   Մետաղադրամն ու անիվն անիմացվում են CSS transform-ով՝ մեկ կուտակված պտույտի արժեքի վրա կիրառված cubic-bezier հարթեցման կորով — ոչ մի կադրային JavaScript պետք չէ, հենց անկյունը սահմանվելուց հետո։ Ընտրանքի ընտրիչն ընդհակառակը օգտագործում է requestAnimationFrame. ամեն կադրում քառակուսիաբար աճող ընդմիջումը որոշում է, թե արդյոք առաջ շարժել ընդգծումը, արտադրելով slot-մեքենայի դանդաղեցում, որը միշտ կանգնում է նախապես որոշված հաղթողի վրա։
4. 4
   Արդյունքը բացահայտվում և գրանցվում է աշխատաշրջանի պատմության մեջ

   setTimeout-ը գործարկվում է, երբ անիմացիան ավարտվում է (1.3 վ մետաղադրամի, 4.3 վ անիվի համար), և գրում է արդյունքը state-ում։ Մետաղադրամի ռեժիմը պահում է մինչև 24 նետումների ընթացիկ աշխատաշրջանի պատմություն՝ գլուխ/կրծք հաշվարկներով։ prefers-reduced-motion միացրած օգտագործողները ամբողջովին բաց են թողնում անիմացիան և անմիջապես տեսնում են արդյունքը։

Առնչվող գործիքներ