CSS Motion Path-koordinatsystem: Definition af stier for dynamiske animationer

CSS Motion Path er en kraftfuld funktion, der giver dig mulighed for at animere elementer langs en defineret sti. Det åbner op for en verden af kreative muligheder for webanimation, så du kan flytte elementer på måder, der tidligere var vanskelige eller umulige. Denne guide dykker ned i finesserne i CSS Motion Path-koordinatsystemet og fokuserer på, hvordan man definerer disse stier og udnytter deres potentiale for dynamiske weboplevelser.

Forståelse af de grundlæggende koncepter

I sin kerne drejer CSS Motion Path sig om konceptet med en sti. Denne sti fungerer som den bane, et element vil bevæge sig langs. Dette opnås ved at bruge offset-path-egenskaben, som specificerer stien. Animationen bruger derefter egenskaber som offset-distance, offset-rotate og offset-anchor til at kontrollere elementets position, rotation og ankerpunkt langs den sti. Stien kan defineres ved hjælp af forskellige metoder, herunder SVG-stier, former og endda grundlæggende geometriske primitiver.

Definition af stier: Grundlaget for bevægelse

Præcisionen og kreativiteten i dine animationer afhænger af den nøjagtighed, hvormed du definerer dine stier. Egenskaben offset-path er dit primære værktøj til dette, og dens værdi accepterer forskellige stidefinitioner.

1. Brug af SVG-stier

SVG (Scalable Vector Graphics) giver den mest fleksible og kraftfulde metode til at definere stier. SVG-stier bruger en dedikeret syntaks til at beskrive linjer, kurver og komplekse former, hvilket giver mulighed for utrolig detaljegrad og kontrol. Du kan oprette SVG-stier direkte i din HTML eller ved at henvise til en ekstern SVG-fil.

Eksempel: En simpel buet sti

Lad os oprette en simpel buet sti ved hjælp af SVG's path-element og d-attributten (sti-data):

            <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
              
            
          

I dette eksempel:

• M 10 10: Flytter det aktuelle punkt til (10, 10).
• C 40 10, 65 85, 95 95: Definerer en kubisk Bézier-kurve. Koordinaterne repræsenterer kontrolpunkter, der former kurven. Elementet vil derefter bevæge sig langs denne kurve.

For at bruge denne sti i din CSS, ville du målrette den ved hjælp af dens ID. Overvej følgende CSS-regel:

            .animated-element {
 offset-path: path('url(#myPath)');
 offset-distance: 0%; /* Start ved begyndelsen af stien */
 animation: moveAlongPath 5s linear infinite;
}

@keyframes moveAlongPath {
  100% {
    offset-distance: 100%; /* Slut ved enden af stien */
  }
}
            

              
                Copy
              
            
          

Denne CSS-regel definerer en animation, hvor .animated-element vil følge SVG-stien defineret af #myPath.

2. Brug af grundlæggende former og geometri

Mens SVG-stier tilbyder den største fleksibilitet, kan du også definere stier ved hjælp af grundlæggende geometriske former med path()-funktionen. Dette er især nyttigt til simple bevægelser som at bevæge sig i en lige linje eller langs en cirkulær sti. Disse grundlæggende former forenkler definitioner, når komplekse stier ikke er påkrævet.

path()-funktionen accepterer forskellige formfunktioner som circle(), ellipse(), rect(), polygon() og line(). Lad os se på et simpelt eksempel:

Eksempel: En simpel cirkelsti

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

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

              
                Copy
              
            
          

Her er offset-path sat til en cirkel. circle(50px at 50% 50%) indstiller cirklens radius til 50px og placerer centrum i midten af elementet ved at specificere 50% for både x- og y-koordinater. Dette får elementet til at bevæge sig langs en cirkulær bane.

3. Brug af funktionerne `ray()` og `inset()`

ray()-funktionen er en del af path()-definitionen. Den skaber en lige linje, der stråler ud fra et givent punkt. Du definerer startvinklen, vinkeløgningen (hvor meget retningen ændrer sig over stiens længde) og afstanden. Selvom den er alsidig, kan ray()-funktionen være lidt kompleks og er velegnet til specifikke behov.

inset()-funktionen er en anden specialiseret formfunktion til brug med path()-værdien. Den definerer et indsat rektangel. De anvendte værdier kan være længdeværdier eller procenter, der specificerer afstanden fra elementets kanter for at skabe den indre rektangulære sti. Dette er nyttigt for stier, der kræver en ramme eller kant, hvilket giver en visuel effekt, når den følger de indre eller ydre kanter.

Forståelse af koordinatsystemet

Det koordinatsystem, der bruges til at definere dine stier, er afgørende for nøjagtigt at positionere og animere elementer. Der er to hovedkoordinatsystemer i spil: SVG-koordinatsystemet og elementets koordinatsystem. At forstå, hvordan disse systemer interagerer, er nøglen.

1. SVG-koordinatsystem

Når du definerer stier ved hjælp af SVG, arbejder du inden for SVG-koordinatsystemet. Dette system er typisk defineret af width- og height-attributterne for SVG-elementet. Oprindelsen (0, 0) er placeret i øverste venstre hjørne. X-aksen øges mod højre, og y-aksen øges nedad.

Overvejelser:

• Skalering og transformationer: SVG-elementer kan skaleres og transformeres ved hjælp af attributter som viewBox og transform. Vær opmærksom på disse transformationer, da de vil påvirke den måde, dine stier fortolkes på.
• Enheder: SVG bruger forskellige enheder til koordinater. Den mest almindelige er pixels (px), men du kan også bruge procenter (%) eller andre enheder.

2. Elementets koordinatsystem

Det element, du animerer, har også sit eget koordinatsystem. Dette system er defineret af dets position i forhold til dets forældreelement. Oprindelsen (0, 0) er normalt i øverste venstre hjørne af selve elementet, eller i forhold til elementets transform-origin, hvis det er sat.

Vigtig bemærkning: Egenskaben offset-path bruger det koordinatsystem, der er defineret af *forældreelementet*, hvis SVG-stien henvises via en url() og er placeret uden for selve elementet. Hvis stien er defineret inline (inden i det samme element eller et barn af elementet), så fungerer den inden for elementets nuværende kontekst og koordinatsystem.

Praktiske eksempler og anvendelser

Lad os udforske nogle praktiske eksempler for at styrke din forståelse.

1. Animering af et logo langs en buet sti

Scenarie: Du ønsker at animere et firmalogo, der følger en buet sti på en hjemmesides header.

Implementering:

1. Opret en SVG-sti: Tegn en jævn, buet sti ved hjælp af et SVG-redigeringsværktøj eller skriv sti-data manuelt. Dette kan være en "S"-form eller enhver kreativ sti.
2. Inkluder SVG'en: Tilføj SVG-koden til din HTML, enten direkte eller ved at henvise til en ekstern SVG-fil.
3. Anvend CSS: Brug offset-path-egenskaben til at henvise til din SVG-sti og animere logoet.

            <div class="logo-container">
 <img src="logo.svg" alt="Company 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; /* Få toppen til at flugte med logostiens oprindelse */
  left: 0; /* Få venstre til at flugte med logostiens oprindelse */
}

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

              
                Copy
              
            
          

2. Oprettelse af en cirkulær indlæsningsanimation

Scenarie: Du ønsker at oprette en cirkulær indlæsningsanimation.

Implementering:

1. Brug path()-funktionen: Brug path()-funktionen med circle() til at definere den cirkulære sti.
2. Animer offset-distance: Animer offset-distance-egenskaben fra 0% til 100% for at få indlæsningsindikatoren til at bevæge sig rundt i cirklen.
3. Overvej offset-rotate: Du kan kombinere offset-distance med offset-rotate for mere avancerede effekter.

            <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. Animering af tekst langs en brugerdefineret sti

Scenarie: Du ønsker at få tekst til at følge en specifik form eller sti.

Implementering:**

1. Definer en SVG-sti: Opret en SVG-sti, der matcher tekstens ønskede bane. Dette kan være en signatur, en form eller et hvilket som helst brugerdefineret design.
2. Indpak tekst i spans: Indpak hvert tegn eller ord i et span-element.
3. Anvend CSS: Brug offset-path og offset-distance på hvert span og keyframe offset-distance. Bemærk: denne metode er muligvis ikke universelt understøttet; test i dine mål-browsere.

            <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; /* For at placere tekstelementer side om side */
}

.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;
  /* Andre stilarter */
}
            

              
                Copy
              
            
          

            .animated-element {
  offset-anchor: 0% 0%; /* Øverste venstre hjørne */
  /* Andre stilarter */
}
            

              
                Copy
              
            
          

            @media (prefers-reduced-motion: reduce) {
  .animated-element {
    animation: none; /* Deaktiver animationer */
    /* Eller brug en simplere animation */
  }
}
            

              
                Copy