CSS-i trigonomeetrilised funktsioonid: matemaatilise paigutuse ja animatsiooni valdamine

Pidevalt arenevas veebiarenduse maastikul nõuab keerukate ja dünaamiliste disainide saavutamine sageli standardsetest CSS-i omadustest kaugemale minekut. Kuigi Flexbox ja Grid on paigutusvõimalusi revolutsiooniliselt muutnud, on tõeliselt keerukate visuaalefektide jaoks veel avastamata piire. Üks selline piir asub matemaatiliste avaldiste valdkonnas, täpsemalt CSS-i trigonomeetriliste funktsioonide rakendamise kaudu. Need võimsad, sageli tähelepanuta jäetud tööriistad võivad avada uusi mõõtmeid nii staatilises paigutuses kui ka sujuvas animatsioonis, võimaldades arendajatel luua visuaalselt rabavaid ja matemaatiliselt täpseid liideseid.

See põhjalik juhend on mõeldud ülemaailmsele veebiarendajate, disainerite ja loovkodeerijate publikule, kes soovivad nihutada CSS-iga võimaliku piire. Süveneme CSS-is saadaolevatesse peamistesse trigonomeetrilistesse funktsioonidesse, uurime nende praktilisi rakendusi paigutuses ja animatsioonis ning pakume praktilisi teadmisi ja näiteid, mis aitavad teil neid tehnikaid oma projektidesse integreerida. Meie eesmärk on demüstifitseerida neid matemaatilisi kontseptsioone ja näidata nende tohutut potentsiaali elegantsete, jõudlusvõimeliste ja kaasahaaravate kasutajakogemuste loomisel kogu maailmas.

CSS-i peamiste trigonomeetriliste funktsioonide mõistmine

CSS, eriti kohandatud omaduste (CSS-i muutujate) ja uuemate funktsioonide tulekuga, on omaks võtnud matemaatilised tehted. Trigonomeetrilised funktsioonid, mis pärinevad geomeetriast ning mida kasutatakse laialdaselt füüsikas ja inseneriteadustes, on nüüd otse CSS-is kättesaadavad, võimaldades täpset kontrolli positsioneerimise, pööramise ja skaleerimise üle nurkade alusel.

Peamised CSS-is saadaolevad trigonomeetrilised funktsioonid on:

• sin(): Siinusfunktsioon. See tagastab nurga siinuse, mis on täisnurkses kolmnurgas nurga vastaskülje pikkuse ja hüpotenuusi pikkuse suhe. CSS-is võtab see nurga (kraadides või radiaanides) ja tagastab väärtuse vahemikus -1 kuni 1.
• cos(): Koosinusfunktsioon. See tagastab nurga koosinuse, mis on nurga lähiskülje pikkuse ja hüpotenuusi pikkuse suhe. Sarnaselt sin()-ga võtab see nurga ja tagastab väärtuse vahemikus -1 kuni 1.
• tan(): Tangensfunktsioon. See tagastab nurga tangensi, mis on vastaskülje pikkuse ja lähiskülje pikkuse suhe. See võtab nurga ja tagastab mis tahes reaalarvu.

Neid funktsioone kasutatakse tavaliselt koos CSS-i kohandatud omaduste ja calc() funktsiooniga, mis võimaldab dünaamiliselt arvutada väärtusi nagu translate(), rotate(), scale() ja isegi mõõtmeid nagu width ja height.

Rakendamise põhimõisted

Trigonomeetriliste funktsioonide tõhusaks kasutamiseks CSS-is on oluline mõista mõningaid põhimõisteid:

• Nurgad: kraadid vs. radiaanid: Kuigi CSS-i trigonomeetrilised funktsioonid aktsepteerivad väärtusi kraadides (nt 90deg) või radiaanides (nt 1.57rad), on oluline olla järjepidev. Radiaanid on sageli matemaatiliste arvutuste jaoks loomulikumad, kuna 2π radiaani võrdub 360 kraadiga.
• Ühikringjoon: Ühikringjoone visualiseerimine on fundamentaalne. Iga nurga θ puhul ühikringjoonel on punkti koordinaadid, kus nurga lõpphaar ringjoont lõikab, (cos(θ), sin(θ)). See seos on võtmetähtsusega nurkade teisendamisel X ja Y positsioonideks.
• calc() funktsioon: See CSS-i funktsioon võimaldab meil sooritada matemaatilisi arvutusi, kombineerides erinevaid ühikuid ja väärtusi. See on asendamatu trigonomeetriliste tulemuste integreerimisel tegelikesse stiiliomadustesse. Näiteks: transform: translateX(calc(var(--radius) * cos(var(--angle))));
• CSS-i kohandatud omadused (muutujad): Need on elutähtsad dünaamiliste väärtuste, nagu nurgad, raadiused ja vahearvutused, haldamiseks. Need muudavad meie CSS-i loetavamaks, hooldatavamaks ja kohandatavamaks.

Matemaatiline paigutus trigonomeetriliste funktsioonidega

Trigonomeetrilised funktsioonid on suurepärased ringikujuliste ja radiaalsete paigutuste loomisel, elementide ühtlasel jaotamisel keskpunkti ümber või keerukate geomeetriliste mustrite genereerimisel. See on eriti kasulik armatuurlaudade, navigatsioonielementide või kunstiliste esituste jaoks.

Ringikujulised paigutused

Üks levinumaid rakendusi on elementide paigutamine ringikujuliselt. Kujutage ette keskset elementi, mille ümber tiirleb mitu satelliitelementi. Trigonomeetriat kasutades saame arvutada iga satelliitelemendi täpse asukoha keskpunkti suhtes.

Oletame, et tahame paigutada N elementi ringi raadiusega R:

• Iga elemendi vaheline nurk on 360 kraadi / N või 2π radiaani / N.
• i-nda elemendi (kus i algab 0-st) nurk võrdluspunktist (nt kella 3 asendist) on i * (360 / N) kraadi.
• X-koordinaat keskpunkti suhtes on R * cos(nurk).
• Y-koordinaat keskpunkti suhtes on R * sin(nurk).

CSS-is tähendab see järgmist:

            .circle-container {
  position: relative; /* Või mis tahes positsioneerimiskontekst */
  width: 500px; /* Näidissuurus */
  height: 500px;
}

.circle-item {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Elemendi enda tsentreerimine */
  transform: translate(-50%, -50%); 
  /* Edasine transformatsioon ringi ümber paigutamiseks */
}

/* Näide N elemendi jaoks */

/* Kasutades CSS-i muutujaid ja for-tsükli sarnast käitumist (saab teha JS-i kaudu või korrates CSS-i) */

:root {
  --circle-radius: 150px;
  --num-items: 8;
}

.item-1 {
  --item-index: 0;
  /* Arvuta nurk kraadides */
  --item-angle: calc(var(--item-index) * (360 / var(--num-items)) * 1deg);
  /* Positsioneeri cos ja sin abil */
  transform: translate(calc(var(--circle-radius) * cos(var(--item-angle))), calc(var(--circle-radius) * sin(var(--item-angle)))) translate(-50%, -50%);
}

.item-2 {
  --item-index: 1;
  --item-angle: calc(var(--item-index) * (360 / var(--num-items)) * 1deg);
  transform: translate(calc(var(--circle-radius) * cos(var(--item-angle))), calc(var(--circle-radius) * sin(var(--item-angle)))) translate(-50%, -50%);
}
/* ... ja nii edasi iga elemendi jaoks */

            

              
                Copy
              
            
          

Rahvusvaheline näide: Kujutage ette muusika voogedastusteenust, mis kuvab albumikaasi ringikujulises karussellis. Keerulise JavaScripti asemel saaksid CSS-i trigonomeetrilised funktsioonid hakkama iga albumikaane täpse radiaalse positsioneerimisega, tagades täiusliku vahekauguse ja joondamise, mis on kohandatav erineva arvu albumitega.

Radiaalne jaotus

Lisaks täiuslikele ringidele saate elemente jaotada radiaalselt erinevate nurkade ja kaugustega. See võimaldab orgaanilisemaid või keerukamaid moodustisi.

Näiteks 'tähesära' efekti loomine:

            .starburst-container {
  position: relative;
  width: 300px;
  height: 300px;
}

.starburst-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--distance)) rotate(calc(-1 * var(--angle)));
}

:root {
  --burst-radius: 100px;
  --burst-count: 12;
}

.burst-1 {
  --burst-index: 0;
  --burst-angle: calc(var(--burst-index) * (360 / var(--burst-count)) * 1deg);
  --burst-distance: var(--burst-radius);
  /* Transformatsiooni rakendamine */
  transform: translate(-50%, -50%) rotate(var(--burst-angle)) translate(var(--burst-distance)) rotate(calc(-1 * var(--burst-angle)));
}

/* ... teiste säraelementide jaoks */

            

              
                Copy
              
            
          

Selles näites kasutame rotate(), et elementi õigesti raadiuse suunas orienteerida, ja seejärel translate(), et seda väljapoole lükata. Viimane rotate() on elemendi enda orientatsiooni lähtestamiseks.

Geomeetrilised mustrid

Trigonomeetriliste funktsioonide kombineerimine teiste CSS-i omadustega võib viia keerukate geomeetriliste mustriteni. Näiteks 'lille' efekti loomine, kus kroonlehed paigutatakse regulaarsete nurkintervallidega, või keerukate korduvate kujundite genereerimine.

Vaatleme kroonlehte:

            .petal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 100px;
  background-color: pink;
  border-radius: 50% 50% 0 0;
  transform-origin: bottom center;
}

:root {
  --flower-radius: 100px;
  --petal-count: 6;
}

.petal-1 {
  --petal-index: 0;
  --petal-angle: calc(var(--petal-index) * (360 / var(--petal-count)) * 1deg);
  /* Kroonlehe positsioneerimine ja pööramine */
  transform: translate(-50%, -100%) rotate(var(--petal-angle)) translateY(calc(-1 * var(--flower-radius)));
}

/* ... ja nii edasi */

            

              
                Copy
              
            
          

See loob põhilise kroonlehe kuju, paigutab selle alguspunkti konteineri keskele, pöörab seda ja seejärel nihutab seda raadiuse võrra ülespoole, paigutades selle tegelikult ümbermõõdule.

Edasijõudnud animatsioon trigonomeetriliste funktsioonidega

Trigonomeetrilised funktsioonid on äärmiselt võimsad sujuvate, tsükliliste ja matemaatiliselt määratletud animatsioonide loomiseks, mida on standardsete võtmekaadri animatsioonidega üksi raske või võimatu saavutada.

Ringliikumine

Elemendi animeerimine täiuslikus ringis liikumiseks on sin() ja cos() peamine kasutusjuhtum.

Saame defineerida pöörleva nurga ja kasutada seda X ja Y positsioonide uuendamiseks:

            .orbiting-element {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  background-color: blue;
  border-radius: 50%;
  /* Elemendi tsentreerimine */
  transform: translate(-50%, -50%);
}

@keyframes orbit {
  0% {
    transform: translate(-50%, -50%) translate(var(--orbit-radius), 0);
  }
  100% {
    transform: translate(-50%, -50%) translate(calc(var(--orbit-radius) * cos(90deg)), calc(var(--orbit-radius) * sin(90deg))); /* Näide 90deg sihtimiseks, ideaalis dünaamiline */
  }
}

/* Dünaamilisem lähenemine, kasutades kohandatud omadusi ja JS-i animatsiooni juhtimiseks, on sageli eelistatud */

:root {
  --orbit-radius: 100px;
  --orbit-angle: 0deg;
}

.orbiting-element {
  /* Dünaamiline positsioneerimine */
  transform: translate(-50%, -50%) translate(calc(var(--orbit-radius) * cos(var(--orbit-angle))), calc(var(--orbit-radius) * sin(var(--orbit-angle))));
}

/* JS uuendaks --orbit-angle aja jooksul */

            

              
                Copy
              
            
          

Selle animeerimiseks kasutaksite tavaliselt JavaScripti, et järk-järgult uuendada --orbit-angle kohandatud omadust. Kuid ka puhtad CSS-animatsioonid võivad selle saavutada, interpoleerides väärtusi üle trigonomeetrilise funktsiooni. Puhta CSS-i väljakutse on luua sujuv, pidev 360-kraadine pöörlemine, mis interpoleerib sujuvalt läbi siinuse ja koosinuse kõverate.

Tugevam CSS-i lähenemine hõlmab transform omaduse otsest määratlemist võtmekaartides, interpoleerides cos() ja sin() väärtusi.

            @keyframes circular-motion {
  0% {
    transform: translate(-50%, -50%) translateX(var(--orbit-radius)); /* Alusta 0 kraadist */
  }
  25% {
    transform: translate(-50%, -50%) translate(0, var(--orbit-radius)); /* 90 kraadi */
  }
  50% {
    transform: translate(-50%, -50%) translateX(calc(var(--orbit-radius) * -1)); /* 180 kraadi */
  }
  75% {
    transform: translate(-50%, -50%) translate(0, calc(var(--orbit-radius) * -1)); /* 270 kraadi */
  }
  100% {
    transform: translate(-50%, -50%) translateX(var(--orbit-radius)); /* 360 kraadi */
  }
}

.orbiting-element {
  --orbit-radius: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  background-color: blue;
  border-radius: 50%;
  animation: circular-motion 4s linear infinite;
}

            

              
                Copy
              
            
          

See võtmekaadri animatsioon määratleb käsitsi ringi põhipunktid. Sujuvamate, suvaliste nurkade või keerukamate trajektooride jaoks jääb JavaScripti kontroll kohandatud omaduste üle kõige paindlikumaks lähenemiseks.

Võnkuvad ja pulseerivad efektid

Siinuse ja koosinuse lainete tsükliline olemus muudab need täiuslikuks sujuvate, loomuliku välimusega võnkumiste või pulsatsioonide loomiseks.

Element, mis kasvab ja kahaneb:

            @keyframes pulsate {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

.pulsating-element {
  --animation-progress: 0;
  /* See on kontseptuaalne näide; tegelik animatsiooni edenemine vajab JS-i */
  /* scale: calc(1 + var(--sin-wave)); */
}

/* Parem CSS-i lähenemine võnkumiseks */

@keyframes subtle-oscillation {
  0% {
    transform: translate(-50%, -50%) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-20px);
  }
  100% {
    transform: translate(-50%, -50%) translateY(0);
  }
}

/* Keerukamate lainemustrite jaoks on parim JS, mis juhib kohandatud omadusi */

.wavy-text {
  display: inline-block;
}

.wavy-text span {
  display: inline-block;
  animation: wave 2s ease-in-out infinite;
}

/* Näide üksikute tähtede jaoks */
.wavy-text span:nth-child(1) { animation-delay: -0.4s; }
.wavy-text span:nth-child(2) { animation-delay: -0.2s; }
/* ... jne */

@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* sin/cos kasutamiseks laineanimatsioonis */

:root {
  --wave-amplitude: 10px;
  --wave-frequency: 0.1;
  --wave-progress: 0;
}

.animated-wave {
  transform: translateY(calc(var(--wave-amplitude) * sin(var(--wave-progress))));
}

/* JS uuendaks --wave-progress */

            

              
                Copy
              
            
          

Trigonomeetriliste funktsioonide tõeline jõud CSS-animatsioonis tuleb esile koos JavaScriptiga. Kontrollides kohandatud omadust, mis esindab aega või edenemist (nt --animation-progress) JavaScriptiga, saate luua keerulisi lainelisi animatsioone tekstile, joontele või isegi elementide asukohtadele, mis põhinevad täpsetel matemaatilistel funktsioonidel.

Keerukate trajektooride animatsioonid

Kuigi CSS-i motion-path on esile kerkimas, pakuvad trigonomeetrilised funktsioonid võimalust luua kohandatud trajektoore ja animeerida elemente mööda neid, kasutades transformatsioone.

Kujutage ette elementi, mis järgib Lissajous' kõverat või keerukamat parameetrilist võrrandit. Saate arvutada X ja Y koordinaadid iga kaadri jaoks, kasutades:

• x = R * cos(A * t + δ)
• y = R * sin(B * t)

Kus R on amplituud, A ja B on sagedused, t on aeg ja δ on faasinihe. JavaScript oleks nende väärtuste arvutamiseks ja elemendi transform omaduse uuendamiseks hädavajalik.

Rahvusvaheline näide: Teaduslik visualiseerimine, mis näitab planeetide orbiite, pendleid või lainenähtusi, võiks kasutada trigonomeetrilisi funktsioone nende liikumiste täpseks ja kauniks renderdamiseks, pakkudes selgeid ja intuitiivseid esitusi ülemaailmsele publikule, kes on huvitatud teadusest ja andmete visualiseerimisest.

CSS Houdini kasutamine edasijõudnud kontrolliks

CSS Houdini on kogum madala taseme API-sid, mis paljastavad CSS-mootori osi, võimaldades arendajatel laiendada CSS-i JavaScriptiga. See on eriti oluline edasijõudnud matemaatiliste paigutuste ja animatsioonide jaoks.

Omaduste ja väärtuste API

Omaduste ja väärtuste API võimaldab teil registreerida kohandatud omadusi ja määratleda nende tüübid, algväärtused ja pärilikkuse käitumise. See on fundamentaalne kohandatud omaduste tõhusaks kasutamiseks trigonomeetriliste funktsioonidega.

            CSS.registerProperty({
  name: '--angle',
  syntax: '',
  initialValue: '0deg',
  inherits: false
});

CSS.registerProperty({
  name: '--radius',
  syntax: '',
  initialValue: '100px',
  inherits: false
});

            

              
                Copy
              
            
          

Nende omaduste registreerimisega tagate, et brauser neid õigesti parsib ja käsitleb, isegi kui neid kasutatakse keerulistes `calc()` avaldistes või animatsioonides.

Animatsiooni Workleti API

Animatsiooni Workletid võimaldavad teil käivitada animatsiooniloogikat eraldi lõimes, pakkudes sageli sujuvamat jõudlust kui traditsioonilised JavaScripti animatsioonitsüklid, mis manipuleerivad DOM-i.

Saate luua animatsiooni workleti, mis arvutab asukohti trigonomeetriliste funktsioonide põhjal:

            // animation-worklet.js
const circleRadius = 100;

registerAnimator('circular-motion', class CircularMotionAnimator {
  constructor(options) {
    this.options = options;
    this.startTime = null;
  }

  animate(currentTime, effect) {
    if (!this.startTime) {
      this.startTime = currentTime;
    }

    const elapsedTime = currentTime - this.startTime;
    const duration = this.options.duration || 1000;
    const progress = (elapsedTime % duration) / duration;

    const angle = progress * 2 * Math.PI; // Nurk radiaanides Math.cos/sin jaoks

    const x = circleRadius * Math.cos(angle);
    const y = circleRadius * Math.sin(angle);

    /* Rakenda transformatsioon elemendi sihtefektile */
    effect.setTranslate(x, y);
  }
});

/* Teie peamises JS-failis */
const element = document.getElementById('orbiting-element');
const animation = element.animate([
  { transform: 'translate(0px, 0px)' } /* Algne transformatsioon */
], {
  duration: 2000,
  fill: 'auto'
});

animation.effect.sprite.setAnimator('circular-motion', {
  duration: 2000
});

            

              
                Copy
              
            
          

Kuigi see on lihtsustatud näide, pakuvad animatsiooni workletid koos võimalusega pääseda juurde ja manipuleerida kohandatud omadustega võimsat viisi keerukate, matemaatiliselt juhitud animatsioonide rakendamiseks parema jõudlusega.

Praktilised kaalutlused ja parimad tavad

Kuigi trigonomeetrilised funktsioonid pakuvad tohutut loomingulist vabadust, on oluline neid kasutada kaalutletult.

• Jõudlus: Keerulised arvutused calc() sees ja kohandatud omaduste laialdane kasutamine võivad mõjutada renderdamise jõudlust, eriti vähem võimsatel seadmetel. Testige põhjalikult. Houdini animatsiooni workletite kasutamine võib leevendada mõningaid neist muredest animatsioonide puhul.
• Loetavus ja hooldatavus: Liiga keerulised trigonomeetrilised avaldised võivad muuta CSS-i raskesti loetavaks. Kasutage kirjeldavate nimedega kohandatud omadusi ja kaaluge keerukate arvutuste jaotamist vahemuutujateks.
• Brauseri tugi: Kuigi calc() ja kohandatud omadustel on suurepärane tugi, võib uuematel Houdini API-del olla piiratum tugi. Kontrollige alati ühilduvustabeleid ja pakkuge vajadusel varuvariante.
• Juurdepääsetavus: Veenduge, et animatsioonid ei oleks häirivad ega kahjulikud. Pakkuge võimalusi animatsioonide keelamiseks kasutajatele, kes on liikumise suhtes tundlikud. Trigonomeetriliste funktsioonidega animeeritud elemendid peaksid olema endiselt navigeeritavad ja arusaadavad abitehnoloogiate kaudu.
• JavaScripti täiendus: Tõeliselt dünaamiliste ja interaktiivsete paigutuste või animatsioonide jaoks, mis reageerivad kasutaja sisendile, on JavaScript sageli asendamatu. See suudab hallata olekut, arvutada väärtusi reaalajas andmete põhjal ja vastavalt uuendada CSS-i kohandatud omadusi.

Kokkuvõte

CSS-i trigonomeetrilised funktsioonid esindavad võimsat, kuid sageli alakasutatud tööriistakomplekti veebiarendajatele. Mõistes sin(), cos() ja tan() koos calc() ja CSS-i kohandatud omadustega, saate liikuda kaugemale tavapärastest paigutus- ja animatsioonitehnikatest.

Olenemata sellest, kas teie eesmärk on täiuslikud ringikujulised paigutused, sujuv orbitaalne liikumine või keerukad geomeetrilised mustrid, pakuvad need matemaatilised tööriistad vajalikku täpsust ja paindlikkust. Kuna veebitehnoloogiad arenevad jätkuvalt, eriti madala taseme API-de, nagu Houdini, integreerimisega, kasvab matemaatiliselt juhitud veebidisaini potentsiaal veelgi.

Võtke omaks matemaatika jõud oma CSS-is. Katsetage nende funktsioonidega, uurige nende rakendusi ja alustage dünaamilisemate, kaasahaaravamate ja matemaatiliselt elegantsemate veebikogemuste loomist oma ülemaailmsele publikule. Matemaatika ja disaini ristumiskoht CSS-is on viljakas pinnas innovatsiooniks, mis ootab teid avastama.