M

MLOG

Latviešu

Izpētiet CSS trigonometrisko funkciju (sin(), cos(), tan(), asin(), acos(), atan(), atan2()) spēku sarežģītu, dinamisku un matemātiski precīzu izkārtojumu veidošanai.

CSS Trigonometriskās funkcijas: Matemātiski izkārtojuma aprēķini dinamiskam dizainam

CSS, kas tradicionāli pazīstams ar statisku elementu stilu, ir attīstījies, piedāvājot spēcīgus rīkus dinamiskam un adaptīvam tīmekļa dizainam. Starp tiem ir trigonometriskās funkcijas, kas ļauj izstrādātājiem izmantot matemātiskos principus tieši CSS ietvaros. Šis raksts pēta, kā izmantot `sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()` un `atan2()`, lai izveidotu sarežģītus, dinamiskus un matemātiski precīzus izkārtojumus.

Izpratne par CSS trigonometriskajām funkcijām

Trigonometriskās funkcijas CSS ļauj veikt aprēķinus, pamatojoties uz leņķiem, iegūstot vērtības, kuras var izmantot dažādiem CSS rekvizītiem, piemēram, `transform`, `width`, `height` un citiem. Tas paver iespējas izveidot apļveida izkārtojumus, sarežģītas animācijas un adaptīvus dizainus, kas matemātiski pielāgojas dažādiem ekrāna izmēriem.

Galvenās funkcijas: sin(), cos() un tan()

Šīs funkcijas ir trigonometrisko aprēķinu pamats:

Apgrieztās trigonometriskās funkcijas: asin(), acos(), atan() un atan2()

Apgrieztās trigonometriskās funkcijas ļauj aprēķināt leņķi, pamatojoties uz zināmu attiecību:

Praktiski pielietojumi un piemēri

Apskatīsim vairākus praktiskus CSS trigonometrisko funkciju pielietojumus.

1. Apļveida izkārtojuma izveide

Viens no izplatītākajiem lietošanas gadījumiem ir elementu sakārtošana aplī. To var panākt, aprēķinot katra elementa pozīciju, pamatojoties uz tā indeksu un kopējo elementu skaitu, izmantojot `sin()` un `cos()`, lai noteiktu x un y koordinātas attiecībā pret apļa centru.

HTML:

<div class="circle-container">
 <div class="item">1</div>
 <div class="item">2</div>
 <div class="item">3</div>
 <div class="item">4</div>
 <div class="item">5</div>
</div>

CSS:

.circle-container {
 position: relative;
 width: 200px;
 height: 200px;
 border: 1px solid black;
 border-radius: 50%;
 margin: 50px auto;
}

.item {
 position: absolute;
 width: 30px;
 height: 30px;
 border-radius: 50%;
 background-color: lightblue;
 text-align: center;
 line-height: 30px;
}

.circle-container .item:nth-child(1) {
 top: calc(50% + sin(calc(1 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(1 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(2) {
 top: calc(50% + sin(calc(2 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(2 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(3) {
 top: calc(50% + sin(calc(3 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(3 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(4) {
 top: calc(50% + sin(calc(4 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(4 * 360deg / 5)) * 85px - 15px);
}

.circle-container .item:nth-child(5) {
 top: calc(50% + sin(calc(5 * 360deg / 5)) * 85px - 15px);
 left: calc(50% + cos(calc(5 * 360deg / 5)) * 85px - 15px);
}

Šajā piemērā mēs aprēķinām katra `.item` elementa pozīciju, izmantojot `sin()` un `cos()`. Leņķi nosaka, dalot 360 grādus ar elementu skaitu (5) un reizinot to ar elementa indeksu. Iegūtās `sin()` un `cos()` vērtības pēc tam izmanto, lai aprēķinātu `top` un `left` pozīcijas, efektīvi izvietojot elementus apļveida izkārtojumā. Vērtība `85px` apzīmē apļa rādiusu, un `15px` kompensē elementa izmēru.

2. Viļņveidīgu animāciju izveide

Trigonometriskās funkcijas ir lieliskas, lai izveidotu vienmērīgas, viļņveidīgas animācijas. Jūs varat izmantot `sin()` vai `cos()`, lai modulētu elementa pozīciju, necaurredzamību vai citus rekvizītus laika gaitā.

HTML:

<div class="wave-container">
 <div class="wave-item"></div>
</div>

CSS:

.wave-container {
 width: 100%;
 height: 100px;
 overflow: hidden;
 position: relative;
}

.wave-item {
 position: absolute;
 width: 200%;
 height: 100%;
 background-color: lightblue;
 animation: wave 5s linear infinite;
}

@keyframes wave {
 0% {
 transform: translateX(0) translateY(calc(sin(0deg) * 20px));
 }
 50% {
 transform: translateX(-50%) translateY(calc(sin(180deg) * 20px));
 }
 100% {
 transform: translateX(-100%) translateY(calc(sin(360deg) * 20px));
 }
}

Šajā piemērā `wave` animācija izmanto `sin()`, lai aprēķinātu `.wave-item` elementa vertikālo pozīciju (`translateY`). Animācijai progresējot, sinusa vērtība mainās, radot vienmērīgu, viļņojošu efektu. `translateX` nodrošina nepārtrauktu viļņu kustību.

3. Adaptīvu loku un līkņu izveide

CSS trigonometriskās funkcijas var kombinēt ar skata laukuma vienībām (piemēram, `vw` un `vh`), lai izveidotu adaptīvus lokus un līknes, kas pielāgojas dažādiem ekrāna izmēriem.

HTML:

<div class="arc-container">
 <div class="arc-element"></div>
</div>

CSS:

.arc-container {
 width: 100vw;
 height: 50vh;
 position: relative;
 overflow: hidden;
}

.arc-element {
 position: absolute;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background-color: red;
 left: calc(50vw + cos(var(--angle)) * 40vw - 10px);
 top: calc(50vh + sin(var(--angle)) * 20vh - 10px);
 animation: arc 5s linear infinite;
}

@keyframes arc {
 0% {
 --angle: 0deg;
 }
 100% {
 --angle: 360deg;
 }
}

Šajā piemērā mēs izmantojam pielāgotus CSS rekvizītus (`--angle`) un trigonometriskās funkcijas, lai novietotu `.arc-element` gar loku. `left` un `top` rekvizīti tiek aprēķināti, pamatojoties uz `cos()` un `sin()`, attiecīgi, leņķim mainoties laika gaitā, izmantojot `arc` animāciju. Skata laukuma vienības (`vw` un `vh`) nodrošina, ka loks pielāgojas proporcionāli ekrāna izmēram.

4. Attālumu aprēķināšana ar `atan2()`

`atan2()` var noteikt leņķi starp diviem punktiem, kas ir noderīgi, lai izveidotu efektus, kur elementi reaģē viens uz otra pozīcijām.

Apsveriet scenāriju, kur jums ir divi elementi un jūs vēlaties pagriezt vienu, lai tas vienmēr būtu vērsts pret otru:

HTML:

<div class="container">
 <div class="target">Target</div>
 <div class="pointer">Pointer</div>
</div>

CSS (ar JavaScript):

.container {
 position: relative;
 width: 300px;
 height: 300px;
 border: 1px solid black;
 margin: 50px auto;
}

.target {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 50px;
 height: 50px;
 background-color: lightcoral;
 text-align: center;
 line-height: 50px;
}

.pointer {
 position: absolute;
 top: 20%;
 left: 50%;
 transform: translateX(-50%);
 width: 80px;
 height: 20px;
 background-color: lightgreen;
 text-align: center;
 line-height: 20px;
 transform-origin: left center; /* Important for correct rotation */
}

JavaScript:

const target = document.querySelector('.target');
const pointer = document.querySelector('.pointer');
const container = document.querySelector('.container');

container.addEventListener('mousemove', (e) => {
 const containerRect = container.getBoundingClientRect();
 const targetRect = target.getBoundingClientRect();

 const centerX = containerRect.left + containerRect.width / 2;
 const centerY = containerRect.top + containerRect.height / 2;

 const angle = Math.atan2(e.clientY - centerY, e.clientX - centerX) * 180 / Math.PI;

 pointer.style.transform = `translateX(-50%) rotate(${angle}deg)`;
});

Šajā piemērā JavaScript tiek izmantots, lai iegūtu peles koordinātas attiecībā pret konteineru. `Math.atan2()` aprēķina leņķi starp konteinera centru (kas darbojas kā sākumpunkts) un peles pozīciju. Šis leņķis pēc tam tiek izmantots, lai pagrieztu `.pointer` elementu, nodrošinot, ka tas vienmēr ir vērsts pret peles kursoru. `transform-origin: left center;` ir ļoti svarīgi, lai nodrošinātu, ka rādītājs pareizi rotē ap savu kreiso centra punktu.

CSS trigonometrisko funkciju izmantošanas priekšrocības

Apsvērumi un labākā prakse

Secinājums

CSS trigonometriskās funkcijas nodrošina spēcīgu rīku komplektu dinamiska, adaptīva un matemātiski precīza tīmekļa dizaina izveidei. Izprotot un izmantojot šīs funkcijas, izstrādātāji var atvērt jaunas iespējas izkārtojumam, animācijai un interaktīviem elementiem, ievērojami uzlabojot lietotāja pieredzi. Sākot ar apļveida izkārtojumiem un viļņveidīgām animācijām un beidzot ar adaptīviem lokiem un elementu pozicionēšanu, pielietojumi ir plaši un dažādi. Lai gan ir svarīgi rūpīgi apsvērt pārlūkprogrammu saderību, veiktspēju un lasāmību, trigonometrisko funkciju iekļaušanas priekšrocības jūsu CSS darbplūsmā ir nenoliedzamas, ļaujot jums izveidot patiesi saistošas un sarežģītas tīmekļa pieredzes. CSS turpinot attīstīties, šo paņēmienu apgūšana kļūs arvien vērtīgāka tīmekļa dizaineriem un izstrādātājiem visā pasaulē.

Šīs zināšanas ļauj izveidot sarežģītāku un vizuāli pievilcīgāku dizainu. Izpētiet šos paņēmienus un eksperimentējiet ar dažādiem parametriem, lai atraisītu pilnu CSS trigonometrisko funkciju potenciālu savos tīmekļa izstrādes projektos.