CSS Motion Path koordinaatsüsteem: teekondade defineerimine dünaamiliste animatsioonide jaoks

CSS Motion Path on võimas funktsioon, mis võimaldab teil animeerida elemente mööda defineeritud teekonda. See avab veebianimatsioonide jaoks terve hulga loomingulisi võimalusi, lastes teil liigutada elemente viisidel, mis varem olid keerulised või võimatud. See juhend süveneb CSS Motion Path koordinaatsüsteemi keerukustesse, keskendudes sellele, kuidas neid teekondi defineerida ja nende potentsiaali dünaamiliste veebikogemuste jaoks ära kasutada.

Põhimõistete mõistmine

Oma olemuselt keerleb CSS Motion Path teekonna mõiste ümber. See teekond toimib trajektoorina, mida mööda element liigub. See saavutatakse atribuudi offset-path abil, mis määrab teekonna. Seejärel kasutab animatsioon atribuute nagu offset-distance, offset-rotate ja offset-anchor, et kontrollida elemendi asukohta, pöörlemist ja ankurpunkti mööda seda teekonda. Teekonda saab defineerida erinevate meetoditega, sealhulgas SVG teekondade, kujundite ja isegi lihtsate geomeetriliste primitiividega.

Teekondade defineerimine: liikumise alus

Teie animatsioonide täpsus ja loovus sõltuvad sellest, kui täpselt te oma teekondi defineerite. Atribuut offset-path on teie peamine tööriist selleks ja selle väärtus aktsepteerib erinevaid teekonna definitsioone.

1. SVG teekondade kasutamine

SVG (Scalable Vector Graphics) pakub kõige paindlikumat ja võimsamat meetodit teekondade defineerimiseks. SVG teekonnad kasutavad spetsiaalset süntaksit joonte, kõverate ja keerukate kujundite kirjeldamiseks, võimaldades uskumatut detailsust ja kontrolli. Saate luua SVG teekondi otse oma HTML-is või viidates välisele SVG-failile.

Näide: lihtne kõver teekond

Loome lihtsa kõvera teekonna, kasutades SVG path elementi ja d atribuuti (teekonna andmed):

            <svg width="200" height="200">
 <path id="myPath" d="M 10 10 C 40 10, 65 85, 95 95" fill="none" stroke="black"/>
</svg>
            

              
                Copy
              
            
          

Selles näites:

• M 10 10: Liigutab praeguse punkti koordinaatidele (10, 10).
• C 40 10, 65 85, 95 95: Defineerib kuup-Bézier' kõvera. Koordinaadid esindavad kontrollpunkte, mis kujundavad kõverat. Seejärel liigub element mööda seda kõverat.

Selle teekonna kasutamiseks oma CSS-is viidake sellele selle ID kaudu. Vaatleme järgmist CSS-reeglit:

            .animated-element {
 offset-path: path('url(#myPath)');
 offset-distance: 0%; /* Alustab teekonna algusest */
 animation: moveAlongPath 5s linear infinite;
}

@keyframes moveAlongPath {
  100% {
    offset-distance: 100%; /* Lõpetab teekonna lõpus */
  }
}
            

              
                Copy
              
            
          

See CSS-reegel defineerib animatsiooni, kus .animated-element järgib SVG teekonda, mille on defineerinud #myPath.

2. Põhikujundite ja geomeetria kasutamine

Kuigi SVG teekonnad pakuvad kõige rohkem paindlikkust, saate teekondi defineerida ka põhiliste geomeetriliste kujunditega, kasutades funktsiooni path(). See on eriti kasulik lihtsate liikumiste jaoks, nagu sirgjooneline liikumine või liikumine mööda ringikujulist teekonda. Need põhikujundid lihtsustavad defineerimist, kui keerulisi teekondi pole vaja.

Funktsioon path() aktsepteerib erinevaid kujundifunktsioone nagu circle(), ellipse(), rect(), polygon() ja line(). Vaatleme ühte lihtsat näidet:

Näide: lihtne ringikujuline teekond

            .circle-element {
 offset-path: path('circle(50px at 50% 50%)');
 animation: rotateAround 5s linear infinite;
}

@keyframes rotateAround {
  100% {
    offset-distance: 100%;
  }
}
            

              
                Copy
              
            
          

Siin on offset-path määratud ringiks. circle(50px at 50% 50%) määrab ringi raadiuseks 50 pikslit ja paigutab keskpunkti elemendi keskele, määrates nii x- kui ka y-koordinaadiks 50%. See paneb elemendi liikuma mööda ringikujulist teekonda.

3. Funktsioonide `ray()` ja `inset()` kasutamine

Funktsioon ray() on osa path() definitsioonist. See loob sirgjoone, mis kiirgab antud punktist väljapoole. Te defineerite algusnurga, nurga juurdekasvu (kui palju suund teekonna pikkuse jooksul muutub) ja kauguse. Kuigi mitmekülgne, võib ray() funktsioon olla veidi keeruline, sobides spetsiifilisteks vajadusteks.

Funktsioon inset() on veel üks spetsialiseeritud kujundifunktsioon, mida kasutatakse koos path() väärtusega. See defineerib sisestatud ristküliku. Kasutatavad väärtused võivad olla pikkuse väärtused või protsendid, mis määravad kauguse elemendi servadest, et luua sisemine ristkülikukujuline teekond. See on kasulik teekondade jaoks, mis nõuavad raami või piirjoont, andes visuaalse efekti, kui see liigub mööda sise- või välisservi.

Koordinaatsüsteemi mõistmine

Teekondade defineerimiseks kasutatav koordinaatsüsteem on elementide täpseks positsioneerimiseks ja animeerimiseks ülioluline. Mängus on kaks peamist koordinaatsüsteemi: SVG koordinaatsüsteem ja elemendi koordinaatsüsteem. Nende süsteemide koostoime mõistmine on võtmetähtsusega.

1. SVG koordinaatsüsteem

SVG abil teekondi defineerides töötate SVG koordinaatsüsteemis. See süsteem on tavaliselt defineeritud SVG elemendi width ja height atribuutidega. Alguspunkt (0, 0) asub üleval vasakus nurgas. x-telg kasvab paremale ja y-telg kasvab allapoole.

Mõttekohad:

• Skaleerimine ja teisendused: SVG elemente saab skaleerida ja teisendada, kasutades atribuute nagu viewBox ja transform. Olge nendest teisendustest teadlik, kuna need mõjutavad teie teekondade tõlgendamist.
• Ühikud: SVG kasutab koordinaatide jaoks erinevaid ühikuid. Kõige levinumad on pikslid (px), kuid võite kasutada ka protsente (%) või muid ühikuid.

2. Elemendi koordinaatsüsteem

Elemendil, mida te animeerite, on samuti oma koordinaatsüsteem. See süsteem on defineeritud selle asukoha järgi vanem-elemendi suhtes. Alguspunkt (0, 0) on tavaliselt elemendi enda ülemises vasakus nurgas või on seotud elemendi atribuudiga transform-origin, kui see on määratud.

Oluline märkus: atribuut offset-path kasutab *vanem-elemendi* poolt defineeritud koordinaatsüsteemi, kui SVG teekonnale viidatakse url() kaudu ja see asub elemendist endast väljaspool. Kui teekond on defineeritud rea sees (sama elemendi sees või elemendi lapsena), siis see töötab elemendi praeguses kontekstis ja koordinaatsüsteemis.

Praktilised näited ja rakendused

Uurime mõningaid praktilisi näiteid, et teie arusaamist kinnistada.

1. Logo animeerimine mööda kõverat teekonda

Stsenaarium: soovite animeerida ettevõtte logo, mis järgib veebisaidi päises kõverat teekonda.

Teostus:

1. Looge SVG teekond: joonistage sujuv, kõver teekond, kasutades SVG redigeerimisvahendit või kirjutage teekonna andmed käsitsi. See võib olla "S" kuju või mis tahes loominguline teekond.
2. Lisage SVG: lisage SVG-kood oma HTML-i kas otse või viidates välisele SVG-failile.
3. Rakendage CSS: kasutage atribuuti offset-path, et viidata oma SVG teekonnale ja animeerida logo.

            <div class="logo-container">
 <img src="logo.svg" alt="Ettevõtte logo" class="animated-logo">
</div>

<svg style="position: absolute; left: 0; top: 0; width: 0; height: 0;">
 <path id="logoPath" d="M 10 10 C 50 10, 50 90, 90 90" stroke="none" fill="none" />
</svg>

.logo-container {
  position: relative;
  width: 100px;
  height: 100px;
}

.animated-logo {
  position: absolute;
  offset-path: path('url(#logoPath)');
  offset-distance: 0%;
  animation: logoAnimation 5s linear infinite;
  width: 50px;
  height: 50px;
  top:0; /* Seadista ülemine serv logo teekonna alguspunktiga */
  left: 0; /* Seadista vasak serv logo teekonna alguspunktiga */
}

@keyframes logoAnimation {
  100% {
    offset-distance: 100%;
  }
}
            

              
                Copy
              
            
          

2. Ringikujulise laadimisanimatsiooni loomine

Stsenaarium: soovite luua ringikujulise laadimisanimatsiooni.

Teostus:

1. Kasutage funktsiooni path(): kasutage funktsiooni path() koos funktsiooniga circle(), et defineerida ringikujuline teekond.
2. Animeerige offset-distance: animeerige atribuuti offset-distance väärtusest 0% kuni 100%, et panna laadimisindikaator mööda ringi liikuma.
3. Kaaluge offset-rotate kasutamist: saate kombineerida atribuuti offset-distance atribuudiga offset-rotate, et saavutada täpsemaid efekte.

            <div class="loading-container">
 <div class="loading-indicator"></div>
</div>

.loading-container {
  position: relative;
  width: 100px;
  height: 100px;
}

.loading-indicator {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #3498db;
  border-radius: 50%;
  offset-path: path('circle(40px at 50% 50%)');
  offset-distance: 0%;
  animation: rotateAround 2s linear infinite;
}

@keyframes rotateAround {
  100% {
    offset-distance: 100%;
  }
}
            

              
                Copy
              
            
          

3. Teksti animeerimine mööda kohandatud teekonda

Stsenaarium: soovite panna teksti järgima kindlat kuju või teekonda.

Teostus:**

1. Defineerige SVG teekond: looge SVG teekond, mis vastab teksti soovitud trajektoorile. See võib olla allkiri, kuju või mis tahes kohandatud disain.
2. Pange tekst span-elementidesse: pange iga märk või sõna span-elementi.
3. Rakendage CSS: kasutage iga span-elemendi puhul atribuute offset-path ja offset-distance ning animeerige offset-distance võtmekaadritega. Märkus: see meetod ei pruugi olla universaalselt toetatud; testige oma sihtbrauserites.

            <div class="text-container">
 <span class="letter">H</span>
 <span class="letter">e</span>
 <span class="letter">l</span>
 <span class="letter">l</span>
 <span class="letter">o</span>
</div>

<svg width="200" height="100" style="position: absolute; left: 0; top: 0;">
  <path id="textPath" d="M 10 80 C 50 10, 150 10, 190 80" stroke="none" fill="none" />
</svg>

.text-container {
  position: relative;
  width: 200px;
  height: 100px;
  font-size: 2em;
  font-family: sans-serif;
  display: flex; /* Tekstielementide kõrvuti paigutamiseks */
}

.letter {
  position: absolute;
  offset-path: path('url(#textPath)');
  offset-distance: 0%;
  animation: textAnimation 5s linear infinite;
}

.letter:nth-child(1) { animation-delay: 0s; }
.letter:nth-child(2) { animation-delay: 1s; }
.letter:nth-child(3) { animation-delay: 2s; }
.letter:nth-child(4) { animation-delay: 3s; }
.letter:nth-child(5) { animation-delay: 4s; }

@keyframes textAnimation {
  100% {
    offset-distance: 100%;
  }
}
            

              
                Copy
              
            
          

            .animated-element {
  offset-rotate: auto;
  /* Muud stiilid */
}
            

              
                Copy
              
            
          

            .animated-element {
  offset-anchor: 0% 0%; /* Ülemine vasak nurk */
  /* Muud stiilid */
}
            

              
                Copy
              
            
          

            @media (prefers-reduced-motion: reduce) {
  .animated-element {
    animation: none; /* Keela animatsioonid */
    /* Või kasuta lihtsamat animatsiooni */
  }
}
            

              
                Copy