Sérsniðin hugbúnaðarþróun. Stutt saga um vörumerkjabylgjur

Lausnartillögur

Við byrjuðum með einfaldri SVG-einingu sem var hreyfimynduð með mismunandi bókasöfnum. Þar sem við vildum hafa þrjár SVG-einingar á einni síðu var niðurstaðan ekki mjög ánægjuleg. Allar hreyfimyndirnar voru einfaldlega hægar – allar brautir einnar SVG-einingar þurftu að vera uppfærðar á mjög stuttum tíma, sem gerði alla síðuna jafn hæga og snigill. Við urðum að hafna lausninni sem fólst í því að setja hreint SVG inn í skjal. Það skildi eftir okkur með tveimur öðrum lausnum til að velja úr.

Þeir myndband þátturinn var önnur kosturinn. Við byrjuðum með tvö vandamál:

– gagnsæið bakgrunn, sem ekki er hægt að nota með vinsælustu myndbandsformötunum, svo sem .mp4 eða .webm,

– viðbragðshraði, sem var raunverulegt vandamál vegna þess að myndbönd eru ekki stigstærð sem slík.
​
Við ákváðum að setja þessa lausn á bið – “ef við finnum ekkert annað, munum við velja þessa”.

Síðasta valkosturinn var að nota striga með VefGL rendering. Þetta var svo óvenjulegur kostur því við þurftum að hanna alla rendering-vélfræði sjálf. Það var vegna þess að morphic-bylgjurnar sem við höfum voru sérsniðnar – sem neyddi okkur til að hanna sérsniðna lausn. Og það var kosturinn sem við vildum fara eftir og einbeita okkur að.

Arkitektúr lausnarinnar

​Byrjum frá grunni. Hvert var efnið sem við þurftum að nota til að búa til þessar bylgjur? Hugmyndin var sú að allar bylgjur væru SVG-skrár af stærðinni 1×1 með tilteknum brautum staðsettum í kringum svæðið. Hreyfimyndin af þessu SVG var búin til með mismunandi stöðum í skránni. Þannig voru allar hreyfimyndir táknaðar sem safn skráa sem innihéldu stigin í hreyfingu forms.

Skoðum nánar hvað rýmin eru – allir vegirnir eru í raun bara fylki með tilteknum gildum raðað í ákveðinni röð. Með því að breyta gildum í ákveðnum stöðum í þessu fylki breytist lögunin í tilteknum hlutum. Við getum einfaldað þetta með eftirfarandi dæmi:


ástand 1: [1, 50, 25, 40, 100]
ástand 2: [0, 75, -20, 5, 120]
ástand 3: [5, 0, -100, 80, 90]


Svo getum við gert ráð fyrir að formið sem við viljum birta samanstendur af fylki með fimm þáttum sem breytast með línulegu mýkingu á ákveðnum tímabilum. Þegar hreyfimyndin lýkur síðasta stigi byrjar hún aftur frá fyrsta stigi til að gefa okkur tilfinningu um endalausa hreyfimynd.

En… bíddu – hvað er raunverulega fylkið sem sýnt er hér að ofan? Eins og ég nefndi, er það braut sem sér um að birta ákveðna lögun. Allur galdurinn er innifalinn í d Eiginleiki SVG-slóðar. Þessi eiginleiki inniheldur safn af “skipunum” til að teikna form og hver skipun hefur ákveðin rök. Raðinn sem nefndur var hér að ofan samanstendur af öllum gildunum (röksemdum) sem tengjast þessum skipunum.

Eini munurinn á þessum “ríksskrám” var gildi ákveðinna skipana, þar sem röð skipana var sú sama. Þannig snerist allt galdurinn um að fá öll gildin og hreyfa þau.

Galdramaðurinn sem kallast Eðlisfræði

Í fyrri málsgreininni nefndi ég að eina galdurinn við að hreyfa hlut væri að búa til yfirfærslur milli allra stiga formsins. Spurningin er – hvernig á að gera það með canvas?
​
Fallið sem allir sem unnu með striga ætti að vita er beiðni um rammamyndun. Ef þú sérð þetta í fyrsta sinn, trúi ég af einlægni að þú ættir að byrja á því að lesa þetta. Svo, það sem við höfum áhuga á við þessa falli er argumentið – Háskerpu tímaskammtur DOM. Það lítur virkilega ógnvekjandi út en í raun er það ekki svo erfitt að skilja. Við getum sagt að þetta sé tímasetning sem merkir liðinn tíma frá fyrstu birtingu.

Ok, en hvað getum við gert með þetta? Eins og beiðni um rammamyndun Fallið ætti að kalla sjálft sig endurkvæmt, við getum nálgast tímamuninn á milli kalla þess. Og hér förum við með vísindin! ⚛️ (ok, kannski ekki eldflaugavísindi… ennþá)
​
Eðlisfræði kennir okkur að breyting á fjarlægð sé jöfn breytingu á tíma margfölduð með hraða. Í okkar tilfelli er hraðinn óbreytanlegur því við viljum ná endapunktinum á tilteknum tíma. Svo skulum við skoða hvernig við getum sýnt þetta með ofangreindum stöðum:

Segjum að við viljum skipta á milli þessara ástanda á einni þúsundustu úr sekúndu, þá verða hraðagildin eftirfarandi:


delta: [ -1, 25, -45, -35, 20]
hraði: [-1/1000, 25/1000, -45/1000, -35/1000, 20/1000]


Hraðinn hér að ofan segir okkur: fyrir hverja millisekúndu skulum við auka gildið um -1/1000. Og hér er punkturinn þar sem við getum farið aftur til okkar beiðni um rammamyndun og tímaafbrigði. Gildi ákveðinnar stöðu sem við viljum auka er tímaafbrigði margfaldað með hraða þeirrar stöðu. Eitt fleira sem þarf að gera án vandræða er að takmarka gildið svo það fari ekki yfir ástandið sem það stefnir að.
​
Þegar umbreytingin lýkur köllum við aðra og svo framvegis. Og það virðist ekki vera svo erfitt að innleiða en eitt af helstu reglum í hugbúnaðarþróun er ekki að eyða tíma í hluti sem þegar hafa verið innleiddir. Svo – við völdum a lítil bókasafn sem gerir okkur kleift að búa til þessar umbreytingar á auðveldan hátt.
​
Svona bjuggum við til eina hreyfða öld sem lítur út eins og lifandi vera.

Fá orð um klónun forma

Eins og þú sérð, The Codest Vörumerki-bylgjur eru ekki ein hreyfð mynd. Þær samanstanda af mörgum myndum með sama form en mismunandi stærð og staðsetningu. Í þessu skrefi munum við kíkja stuttlega á hvernig á að afrita á þennan hátt.
​
Svo gerir striga-samhengi okkur kleift að Stærðarhlutfall teiknisvæðis (undir vélarhúsinu – má segja að það margfaldar allar víddir sem sendar eru í drawable-aðferðir með “k”, þar sem “k” er stærðarstuðull sem sjálfgefið er stilltur á “1”), Þýða striga, það er eins og að breyta festipunkti teiknisvæðis. Og við getum líka hoppað á milli þessara ástanda með þessum aðferðum: vista og Endurheimta.
​
Þessar aðferðir gera okkur kleift að vista ástandið “engar breytingar” og síðan búa til ákveðinn fjölda bylgna í lykkjunni með rétt stærðar- og staðsetningarbreyttum striga. Strax í kjölfarið getum við farið aftur í það vistaða ástand. Þetta er allt sem snýr að klónun myndanna. Mikið auðveldara en að klóna kindur, er það ekki?

Kirsuber á toppinn

Ég nefndi að við höfðum hafnað einni hugsanlegri lausn vegna frammistöðu. Valkosturinn með canvas er nokkuð hraður, en enginn sagði að ekki væri hægt að fínstilla hann enn frekar. Við skulum byrja á því að okkur er í raun alveg sama um að breyta formum þegar þau eru utan sýnissvæðis vafra.
​
Það er annar vafri forritaskil sem forritarar elskuðu – Gatnamótavaktari. Það gerir okkur kleift að fylgjast með tilteknum þáttum síðu og meðhöndla atburði sem kallaðir eru þegar þessir þættir birtast eða hverfa úr sýnissvæðinu. Núna er staðan frekar einföld – skulum búa til sýnileikastöðu, breyta henni með atburðarhöndlum IntersectionObserver og einfaldlega kveikja eða slökkva á birtingarkerfinu fyrir tilteknar myndir. Og … bam! Frammistaðan hefur batnað verulega! Við erum að birta eingöngu þær hluti sem sjást í sýnissvæðinu.

Yfirlit

Það er oft erfitt að velja hvernig skuli framkvæma hlutina, sérstaklega þegar tiltæku valkostirnir virðast hafa svipuð kost og galla. Lykillinn að því að taka rétta ákvörðun er að greina hvern þeirra og útiloka þá sem okkur þykja síður gagnlegir. Ekki er allt jafn skýrt – ein lausn krefst meiri tíma en hinar, en hún gæti verið auðveldari í fínstillingu eða sveigjanlegri.

Þó að nýtt JS Bókasöfn birtast nánast á hverri mínútu, en það eru hlutir sem þau geta ekki leyst. Og þess vegna ætti hver front-end verkfræðingur (og ekki aðeins þeir) að þekkja vafraviðmótforritaskil (API), fylgjast með tæknifréttum og stundum bara hugsa: “Hvernig myndi útfærsla mín á þessu bókasafni líta út ef ég þyrfti að gera þetta?”. Með meiri þekkingu á vöfrum getum við smíðað virkilega glæsilega hluti, tekið góðar ákvarðanir um þau verkfæri sem við notum og orðið sjálfsöruggari um okkar kóði.

Lesa meira:

– Ruby 3.0. Ruby og minna þekktar aðferðir til stjórnunar persónuverndar

– Þegðu og taktu peningana þína #1: Falinn kostnaður og raunveruleg sveigjanleiki í vöruþróunarferli

– CTO áskoranir – stækkun og vöxtur hugbúnaðarafurða