CSS Trigonometrinės Funkcijos: Matematiniai Išdėstymai Šiuolaikiniam Interneto Dizainui

Ilgus metus CSS rėmėsi dėžutės modeliais kurdama išdėstymus. Nors šie modeliai yra lankstūs, jie dažnai nepateisina lūkesčių, kai mums reikia tikrai dinamiškų, matematiškai tikslių ar organiškos formos dizainų. Pristatome CSS trigonometrines funkcijas: cos(), sin() ir tan(). Šios galingos funkcijos atveria naują galimybių sritį kuriant sudėtingas animacijas, reaguojančius dizainus ir vizualiai stulbinančias interneto patirtis, visa tai CSS ribose.

Trigonometrinių Funkcijų Supratimas

Prieš pasinerdami į CSS implementaciją, prisiminkime trigonometrinių funkcijų pagrindus. Matematikoje šios funkcijos sieja stačiojo trikampio kampus ir kraštines.

• Kosinusas (cos): Santykis tarp gretimos kraštinės ir įžambinės.
• Sinusas (sin): Santykis tarp priešingos kraštinės ir įžambinės.
• Tangentas (tan): Santykis tarp priešingos kraštinės ir gretimos kraštinės.

CSS šios funkcijos priima kampą kaip įvestį (išreikštą laipsniais, radianais, apsisukimais arba gradais) ir grąžina reikšmę tarp -1 ir 1 (cos() ir sin()) arba bet kurį realųjį skaičių (tan()). Ši reikšmė gali būti naudojama CSS savybėse, tokiose kaip transform, width, height, left, top ir kt.

Naršyklių Suderinamumas

Trigonometrinės funkcijos yra palyginti naujos CSS ir naršyklių palaikymas vis dar vystosi. 2023 m. pabaigos / 2024 m. pradžios duomenimis, palaikymas yra prieinamas daugumoje šiuolaikinių naršyklių, įskaitant Chrome, Firefox, Safari ir Edge. Būtina patikrinti naujausias suderinamumo lenteles tokiose svetainėse kaip Can I use prieš diegiant šias funkcijas gamyboje. Apsvarstykite galimybę naudoti „polyfill“ arba atsarginį variantą senesnėms naršyklėms.

Pagrindinė Sintaksė

Trigonometrinių funkcijų naudojimo CSS sintaksė yra paprasta:

savybė: cos(kampas);
savybė: sin(kampas);
savybė: tan(kampas);

Kur kampas gali būti išreikštas įvairiais vienetais:

• deg: Laipsniai (pvz., cos(45deg))
• rad: Radianai (pvz., sin(0.785rad))
• turn: Apsisukimų skaičius (pvz., cos(0.125turn) – atitinka 45deg)
• grad: Gradianai (pvz., tan(50grad) – atitinka 45deg)

Praktiniai Pritaikymai ir Pavyzdžiai

1. Apskritiminis Pozicionavimas

Vienas iš labiausiai paplitusių ir vizualiai patrauklių trigonometrinių funkcijų pritaikymų yra apskritiminis pozicionavimas. Galite išdėstyti elementus apskritime aplink centrinį tašką. Tai ypač naudinga kuriant įkėlimo indikatorius, radialinius meniu arba vizualiai patrauklias navigacijos sistemas.

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

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

/* CSS Kintamųjų Naudojimas geresniam valdymui */
: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;}
}

/* Dinamiškai pozicionuokite elementus naudodami cos() ir 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 yra pusė elemento pločio */
  top: calc(50% + var(--radius) * sin(var(--angle-item)) - 15px); /* 15px yra pusė elemento aukščio */
}

Paaiškinimas:

• Sukuriame konteinerį su position: relative.
• Kiekvienas elementas konteineryje turi position: absolute.
• Mes naudojame CSS kintamuosius (--item-count, --radius, --angle), kad valdytume elementų skaičių ir apskritimo spindulį.
• Kiekvieno elemento left ir top savybės apskaičiuojamos naudojant atitinkamai cos() ir sin(). Kiekvieno elemento kampas nustatomas pagal jo indeksą.
• Animacija pridedama prie pagrindinio konteinerio, kad elementai suktųsi aplink centrą

Variacijos: Galite lengvai modifikuoti elementų skaičių, spindulį ir spalvas, kad sukurtumėte skirtingus vizualinius efektus. Taip pat galite pridėti animacijų kiekvienam elementui atskirai, kad sukurtumėte sudėtingesnes sąveikas.

2. Bangų Animacijos

Trigonometrinės funkcijos puikiai tinka kuriant sklandžias, osciliuojančias bangų animacijas. Tai gali būti naudojama kuriant vizualiai patrauklius įkėlimo indikatorius, fono animacijas arba interaktyvius 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)));
  }
}

Paaiškinimas:

• Sukuriame .wave konteinerį su overflow: hidden, kad apkarpytume bangos efektą.
• ::before pseudo-elementas atspindi pačią bangą.
• wave-move animacija naudoja sin(), kad sukurtų vertikalią bangos osciliaciją.

Tinkinimas: Galite koreguoti animacijos trukmę, bangos amplitudę (5px reikšmę) ir spalvas, kad pritaikytumėte bangos efektą.

3. Vaizdų Iškreipimas su transform: matrix()

Nors cos(), sin() ir tan() nėra tiesiogiai naudojami transform: matrix() viduje, matricos funkcija labai naudinga iš anksto apskaičiuotomis reikšmėmis, pagrįstomis trigonometrinėmis funkcijomis. Funkcija matrix() leidžia labai smulkiai valdyti transformacijas, o supratimas apie pagrindinę matematiką leidžia sudėtingus iškraipymus, kurie viršija paprastą sukimąsi ar mastelio keitimą.

.distorted-image {
  width: 300px;
  height: 200px;
  background-image: url('image.jpg'); /* Pakeiskite savo vaizdu */
  background-size: cover;
  transition: transform 0.3s ease;
}

.distorted-image:hover {
    /*Šis pavyzdys nerodo trigonometrinių funkcijų tiesiogiai matricoje. Tačiau pažangesnis naudojimas galėtų apskaičiuoti matricos reikšmes naudojant cos() ir sin(), atsižvelgiant į pelės padėtį, slinkties padėtį ar kitus kintamuosius.*/
  transform: matrix(1, 0.2, 0.1, 1, 0, 0); /*Šlyties transformacijos pavyzdys*/
}

Paaiškinimas:

• Funkcija matrix() priima šešias reikšmes, kurios apibrėžia 2D transformacijos matricą. Šios reikšmės valdo mastelio keitimą, sukimąsi, iškreipimą ir perkėlimą.
• Atsargiai koreguodami šias reikšmes, galite pasiekti įvairių iškraipymo efektų. Norint įsisavinti matricos funkciją, naudinga suprasti tiesinę algebrą.

Pažangus Naudojimas (Konceptualus):

Įsivaizduokite, kad matrix() reikšmės apskaičiuojamos dinamiškai, atsižvelgiant į pelės padėtį. Kai pelė priartėja prie vaizdo, iškraipymas tampa ryškesnis. Tam reikėtų naudoti JavaScript, kad būtų užfiksuotos pelės koordinatės ir apskaičiuotos atitinkamos cos() ir sin() reikšmės, kurios būtų perduodamos į matrix() funkciją.

4. Reaguojantis Dizainas ir Dinamiški Išdėstymai

Trigonometrines funkcijas galima įtraukti į reaguojančius dizainus, kad būtų sukurti išdėstymai, kurie elegantiškai prisitaiko prie skirtingų ekrano dydžių. Pavyzdžiui, galite koreguoti apskritiminio meniu spindulį pagal peržiūros srities plotį, užtikrindami, kad meniu išliktų vizualiai patrauklus ir funkcionalus tiek dideliuose, tiek mažuose ekranuose.

: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)); /* Darome prielaidą, kad maksimalus peržiūros srities plotis yra 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 yra pusė elemento pločio */
  top: calc(50% + var(--calculated-radius) * sin(calc(var(--index) * (360deg / var(--item-count))))) - 15px); /* 15px yra pusė elemento aukščio */
}

Paaiškinimas:

• Mes naudojame --viewport-width, kad išsaugotume dabartinį peržiūros srities plotį.
• --min-radius ir --max-radius apibrėžia minimalų ir maksimalų apskritimo spindulį.
• --calculated-radius dinamiškai apskaičiuoja spindulį pagal peržiūros srities plotį, naudodamas tiesinę interpoliaciją tarp minimalaus ir maksimalaus spindulio.
• Pakeiskite lango dydį, kad pamatytumėte pakeitimus

Medijos Užklausos: Galite dar labiau patobulinti reaguojantį elgesį naudodami medijos užklausas, kad koreguotumėte CSS kintamųjų reikšmes pagal konkrečius lūžio taškus.

Patarimai ir Geriausia Praktika

• Naudokite CSS Kintamuosius: CSS kintamieji (vartotojo apibrėžtos savybės) palengvina trigonometrinėse funkcijose naudojamų reikšmių valdymą ir atnaujinimą. Tai pagerina kodo skaitomumą ir prižiūrimumą.
• Optimizuokite Našumą: Sudėtingos animacijos, susijusios su trigonometrinėmis funkcijomis, gali būti daug skaičiavimo reikalaujančios. Optimizuokite kodą sumažindami skaičiavimų skaičių ir, jei įmanoma, naudodami aparatinį pagreitį (pvz., naudodami transform: translateZ(0)).
• Pateikite Atsarginius Variantus: Dėl skirtingo naršyklių palaikymo, pateikite atsarginius mechanizmus senesnėms naršyklėms arba aplinkoms, kuriose trigonometrinės funkcijos nepalaikomos. Tai gali apimti paprastesnių CSS technikų naudojimą arba laipsnišką vizualinio efekto pablogėjimą.
• Atsižvelkite į Prieinamumą: Užtikrinkite, kad jūsų dizainai būtų prieinami visiems naudotojams, įskaitant neįgaliuosius. Venkite pasikliauti vien vizualiniais efektais, kurie gali būti nepastebimi visiems. Pateikite alternatyvius būdus pasiekti informaciją ir funkcionalumą.
• Kruopščiai Išbandykite: Išbandykite savo dizainus skirtingose naršyklėse, įrenginiuose ir ekrano dydžiuose, kad užtikrintumėte nuoseklų elgesį ir teigiamą naudotojo patirtį.

CSS Išdėstymo Ateitis

CSS trigonometrinės funkcijos yra reikšmingas žingsnis į priekį CSS išdėstymo galimybių evoliucijoje. Jie suteikia kūrėjams galimybę kurti dinamiškesnes, matematiškai tikslesnes ir vizualiai stulbinančias interneto patirtis. Naršyklių palaikymui toliau tobulėjant ir kūrėjams vis labiau susipažįstant su šiomis funkcijomis, galime tikėtis pamatyti dar daugiau novatoriškų ir kūrybingų pritaikymų ateityje. Galimybė panaudoti matematikos principus tiesiogiai CSS atveria naujas įdomias interneto dizaino ir kūrimo galimybes.

Išvada

CSS trigonometrinės funkcijos siūlo galingą įrankių rinkinį kuriant pažangius ir vizualiai patrauklius interneto išdėstymus. Nors jiems reikia šiek tiek daugiau supratimo apie matematines sąvokas, potenciali nauda dizaino lankstumo ir naudotojo patirties požiūriu yra didelė. Eksperimentuodami su cos(), sin() ir tan(), galite atrakinti naujus kūrybiškumo lygius ir sukurti tikrai unikalias ir interaktyvias interneto patirtis.

Pradėdami savo kelionę su CSS trigonometrinėmis funkcijomis, atminkite, kad turite teikti pirmenybę naršyklių suderinamumui, našumo optimizavimui, prieinamumui ir kruopščiam testavimui. Turėdami omenyje šiuos aspektus, galite užtikrintai panaudoti šias galingas funkcijas, kad sukurtumėte įtikinamus ir matematiškai pagrįstus dizainus, kurie peržengia šiuolaikinio interneto kūrimo ribas.

Nebijokite eksperimentuoti ir tyrinėti galimybes. Matematiškai pagrįsto CSS išdėstymo pasaulis yra didelis ir kupinas potencialo. Sėkmingo kodavimo!