CSS trigonometriskās funkcijas: matemātiski izkārtojumi modernam tīmekļa dizainam

Gadiem ilgi CSS izkārtojumu veidošanā balstījās uz kastes modeļiem. Lai gan tie ir elastīgi, šie modeļi bieži vien ir nepietiekami, kad nepieciešami patiesi dinamiski, matemātiski precīzi vai organiski veidoti dizaini. Šeit nāk palīgā CSS trigonometriskās funkcijas: cos(), sin() un tan(). Šīs jaudīgās funkcijas paver jaunu iespēju pasauli sarežģītu animāciju, responsīva dizaina un vizuāli satriecošas tīmekļa pieredzes radīšanai, un tas viss notiek CSS ietvaros.

Trigonometrisko funkciju izpratne

Pirms iedziļināmies CSS implementācijā, atkārtosim trigonometrisko funkciju pamatus. Matemātikā šīs funkcijas saista taisnleņķa trijstūra leņķus un malas.

• Kosinuss (cos): Piekatetes attiecība pret hipotenūzu.
• Sinuss (sin): Pretkatetes attiecība pret hipotenūzu.
• Tangenss (tan): Pretkatetes attiecība pret piekateti.

CSS šīs funkcijas pieņem leņķi kā ievades vērtību (izteiktu grādos, radiānos, apgriezienos vai grados) un atgriež vērtību no -1 līdz 1 (cos() un sin() gadījumā) vai jebkuru reālu skaitli (tan() gadījumā). Šo vērtību pēc tam var izmantot tādās CSS īpašībās kā transform, width, height, left, top un citās.

Pārlūkprogrammu saderība

Trigonometriskās funkcijas ir salīdzinoši jauna CSS iespēja, un pārlūkprogrammu atbalsts joprojām attīstās. Uz 2023. gada beigām/2024. gada sākumu atbalsts ir pieejams vairumā moderno pārlūkprogrammu, tostarp Chrome, Firefox, Safari un Edge. Ir ļoti svarīgi pārbaudīt jaunākās saderības tabulas tādās vietnēs kā Can I use, pirms ieviest šīs funkcijas produkcijā. Apsveriet iespēju izmantot polyfill vai rezerves risinājumu vecākām pārlūkprogrammām.

Pamata sintakse

Trigonometrisko funkciju izmantošanas sintakse CSS ir vienkārša:

property: cos(angle);
property: sin(angle);
property: tan(angle);

Kur angle var izteikt dažādās mērvienībās:

• deg: Grādi (piem., cos(45deg))
• rad: Radiāni (piem., sin(0.785rad))
• turn: Apgriezieni (piem., cos(0.125turn) - ekvivalents 45deg)
• grad: Gradi (piem., tan(50grad) - ekvivalents 45deg)

Praktiski pielietojumi un piemēri

1. Apļveida pozicionēšana

Viens no visbiežāk sastopamajiem un vizuāli pievilcīgākajiem trigonometrisko funkciju pielietojumiem ir apļveida pozicionēšana. Jūs varat izvietot elementus aplī ap centrālo punktu. Tas ir īpaši noderīgi, lai izveidotu ielādes indikatorus, radiālās izvēlnes vai vizuāli saistošas navigācijas sistēmas.

.container {
  position: relative;
  width: 200px;
  height: 200px;
}

.item {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #3498db;
}

/* CSS mainīgo izmantošana labākai kontrolei */
:root {
  --item-count: 8;
  --radius: 80px;
}

@property --angle {
  syntax: '';
  inherits: false;
  initial-value: 0deg;
}

.container {
  animation: rotate 10s linear infinite;
}

@keyframes rotate {
  from {--angle: 0deg;}
  to {--angle: 360deg;}
}

/* Dinamiski pozicionējam elementus, izmantojot cos() un sin() */
.item:nth-child(n) {
  --index: calc(n - 1);
  --angle-item: calc(var(--index) * (360deg / var(--item-count)));
  left: calc(50% + var(--radius) * cos(var(--angle-item)) - 15px); /* 15px ir puse no elementa platuma */
  top: calc(50% + var(--radius) * sin(var(--angle-item)) - 15px); /* 15px ir puse no elementa augstuma */
}

Paskaidrojums:

• Mēs izveidojam konteineri ar position: relative.
• Katram elementam konteinerī ir position: absolute.
• Mēs izmantojam CSS mainīgos (--item-count, --radius, --angle), lai kontrolētu elementu skaitu un apļa rādiusu.
• Katram elementam left un top īpašības tiek aprēķinātas, attiecīgi izmantojot cos() un sin(). Leņķis katram elementam tiek noteikts, pamatojoties uz tā indeksu.
• Animācija ir pievienota galvenajam konteinerim, lai elementi rotētu ap centru

Variācijas: Jūs varat viegli mainīt elementu skaitu, rādiusu un krāsas, lai radītu dažādus vizuālos efektus. Varat arī pievienot animācijas katram elementam atsevišķi, lai panāktu sarežģītākas mijiedarbības.

2. Viļņu animācijas

Trigonometriskās funkcijas ir lieliski piemērotas, lai radītu plūstošas, svārstīgas viļņu animācijas. Tās var izmantot, lai veidotu vizuāli pievilcīgus ielādes indikatorus, fona animācijas vai interaktīvus elementus.

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

.wave::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 100%;
  background-color: #2ecc71;
  animation: wave-move 5s linear infinite;
}

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

Paskaidrojums:

• Mēs izveidojam .wave konteineri ar overflow: hidden, lai apgrieztu viļņa efektu.
• Pseidoelements ::before attēlo pašu vilni.
• Animācija wave-move izmanto sin(), lai radītu viļņa vertikālās svārstības.

Pielāgošana: Jūs varat pielāgot animācijas ilgumu, viļņa amplitūdu (5px vērtību) un krāsas, lai pielāgotu viļņa efektu.

3. Attēlu deformēšana ar transform: matrix()

Lai gan cos(), sin() un tan() netiek tieši izmantotas transform: matrix() iekšienē, matricas funkcija gūst lielu labumu no iepriekš aprēķinātām vērtībām, kas balstītas uz trigonometriskām funkcijām. Funkcija matrix() ļauj ļoti precīzi kontrolēt transformācijas, un pamatā esošās matemātikas izpratne ļauj veikt sarežģītas deformācijas, kas pārsniedz vienkāršu rotāciju vai mērogošanu.

.distorted-image {
  width: 300px;
  height: 200px;
  background-image: url('image.jpg'); /* Aizstājiet ar savu attēlu */
  background-size: cover;
  transition: transform 0.3s ease;
}

.distorted-image:hover {
    /*Šis piemērs neuzrāda trigonometriskās funkcijas tieši matricas iekšienē. Tomēr sarežģītākā pielietojumā matricas vērtības varētu aprēķināt, izmantojot cos() un sin(), pamatojoties uz peles pozīciju, ritināšanas pozīciju vai citiem mainīgajiem.*/
  transform: matrix(1, 0.2, 0.1, 1, 0, 0); /*Bīdes transformācijas piemērs*/
}

Paskaidrojums:

• Funkcija matrix() pieņem sešas vērtības, kas definē 2D transformācijas matricu. Šīs vērtības kontrolē mērogošanu, rotāciju, bīdi un pārvietošanu.
• Rūpīgi pielāgojot šīs vērtības, var panākt dažādus deformācijas efektus. Lineārās algebras izpratne ir noderīga, lai apgūtu matricas funkciju.

Sarežģītāks pielietojums (konceptuāls):

Iedomājieties, ka matrix() vērtības tiek aprēķinātas dinamiski, pamatojoties uz peles pozīciju. Pelei tuvojoties attēlam, deformācija kļūst izteiktāka. Lai to panāktu, būtu nepieciešams izmantot JavaScript, lai fiksētu peles koordinātas un aprēķinātu atbilstošās cos() un sin() vērtības, ko ievadīt matrix() funkcijā.

4. Responsīvs dizains un dinamiski izkārtojumi

Trigonometriskās funkcijas var iekļaut responsīvajos dizainos, lai izveidotu izkārtojumus, kas eleganti pielāgojas dažādiem ekrāna izmēriem. Piemēram, jūs varētu pielāgot apļveida izvēlnes rādiusu atkarībā no skatloga platuma, nodrošinot, ka izvēlne paliek vizuāli pievilcīga un funkcionāla gan uz lieliem, gan maziem ekrāniem.

:root {
  --viewport-width: 100vw;
  --min-radius: 50px;
  --max-radius: 150px;
  --calculated-radius: calc(var(--min-radius) + (var(--max-radius) - var(--min-radius)) * (var(--viewport-width) / 1000)); /* Pieņemot, ka maksimālais skatloga platums ir 1000px */
}

.container {
  position: relative;
  width: 200px;
  height: 200px;
}

.item {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #3498db;
  left: calc(50% + var(--calculated-radius) * cos(calc(var(--index) * (360deg / var(--item-count))))) - 15px); /* 15px ir puse no elementa platuma */
  top: calc(50% + var(--calculated-radius) * sin(calc(var(--index) * (360deg / var(--item-count))))) - 15px); /* 15px ir puse no elementa augstuma */
}

Paskaidrojums:

• Mēs izmantojam --viewport-width, lai saglabātu pašreizējo skatloga platumu.
• --min-radius un --max-radius nosaka apļa minimālo un maksimālo rādiusu.
• --calculated-radius dinamiski aprēķina rādiusu, pamatojoties uz skatloga platumu, izmantojot lineāro interpolāciju starp minimālo un maksimālo rādiusu.
• Mainiet loga izmēru, lai redzētu izmaiņas

Mediju vaicājumi: Jūs varat vēl vairāk uzlabot responsīvo uzvedību, izmantojot mediju vaicājumus, lai pielāgotu CSS mainīgo vērtības, pamatojoties uz konkrētiem pārtraukumpunktiem.

Padomi un labākā prakse

• Izmantojiet CSS mainīgos: CSS mainīgie (pielāgotās īpašības) atvieglo trigonometriskajās funkcijās izmantoto vērtību pārvaldību un atjaunināšanu. Tas uzlabo koda lasāmību un uzturēšanu.
• Optimizējiet veiktspēju: Sarežģītas animācijas, kas ietver trigonometriskās funkcijas, var būt skaitļošanas ietilpīgas. Optimizējiet savu kodu, samazinot aprēķinu skaitu un izmantojot aparatūras paātrinājumu, kur tas iespējams (piemēram, izmantojot transform: translateZ(0)).
• Nodrošiniet rezerves risinājumus: Dažādā pārlūkprogrammu atbalsta dēļ nodrošiniet rezerves mehānismus vecākām pārlūkprogrammām vai vidēm, kur trigonometriskās funkcijas netiek atbalstītas. Tas varētu ietvert vienkāršāku CSS tehniku izmantošanu vai vizuālā efekta pakāpenisku degradāciju.
• Ņemiet vērā pieejamību: Pārliecinieties, ka jūsu dizains ir pieejams visiem lietotājiem, tostarp tiem, kam ir invaliditāte. Izvairieties paļauties tikai uz vizuāliem efektiem, ko ne visi var uztvert. Nodrošiniet alternatīvus veidus, kā piekļūt informācijai un funkcionalitātei.
• Rūpīgi testējiet: Pārbaudiet savu dizainu dažādās pārlūkprogrammās, ierīcēs un ekrāna izmēros, lai nodrošinātu konsekventu darbību un pozitīvu lietotāja pieredzi.

CSS izkārtojuma nākotne

CSS trigonometriskās funkcijas ir nozīmīgs solis uz priekšu CSS izkārtojuma iespēju attīstībā. Tās dod izstrādātājiem iespēju radīt dinamiskāku, matemātiski precīzāku un vizuāli satriecošāku tīmekļa pieredzi. Tā kā pārlūkprogrammu atbalsts turpina uzlaboties un izstrādātāji arvien labāk iepazīst šīs funkcijas, nākotnē varam sagaidīt vēl inovatīvākus un radošākus pielietojumus. Spēja izmantot matemātiskos principus tieši CSS paver aizraujošas jaunas iespējas tīmekļa dizainam un izstrādei.

Noslēgums

CSS trigonometriskās funkcijas piedāvā jaudīgu rīku komplektu, lai izveidotu sarežģītus un vizuāli saistošus tīmekļa izkārtojumus. Lai gan tās prasa nedaudz dziļāku izpratni par matemātiskajiem jēdzieniem, potenciālie ieguvumi dizaina elastības un lietotāja pieredzes ziņā ir ievērojami. Eksperimentējot ar cos(), sin() un tan(), jūs varat atvērt jaunus radošuma līmeņus un veidot patiesi unikālu un interaktīvu tīmekļa pieredzi.

Uzsākot savu ceļojumu ar CSS trigonometriskajām funkcijām, atcerieties par prioritātēm: pārlūkprogrammu saderību, veiktspējas optimizāciju, pieejamību un rūpīgu testēšanu. Ņemot vērā šos apsvērumus, jūs varat droši izmantot šīs jaudīgās funkcijas, lai radītu pārliecinošus un matemātiski pamatotus dizainus, kas paplašina modernās tīmekļa izstrādes robežas.

Nebaidieties eksperimentēt un izpētīt iespējas. Matemātiski balstīta CSS izkārtojuma pasaule ir plaša un potenciāla pilna. Veiksmīgu kodēšanu!