Skip to main content
LanguageNorsk bokmål
Engineering5 min lesingoktober 2026

Hvordan fungerer våranimasjoner i SwiftUI?

Kort svar

I SwiftUI legger du til en fjær med .animation(.spring) eller withAnimation(.spring). Siden iOS 17 er hovedinnstillingene varighet og sprett, og det er forhåndsinnstillinger: .smooth (ingen sprett), .snappy (litt) og .bounce (mer). Eldre kode bruker respons og dempingFraction. SwiftUI-fjærer beholder hastigheten når en ny animasjon avbryter dem, noe som gjør at bevegelser føles naturlige.

Kjerne takeaway

  • Bruk withAnimation(.spring) for tilstandsendringer, eller .animation(.spring, value:) på en visning
  • iOS 17+: .spring(varighet:sprett:) pluss .smooth, .snappy og .bounce forhåndsinnstillinger
  • Eldre API: .spring(respons:dempingFraction:blendDuration:)
  • Fjærer er SwiftUIs standard animasjonsstil siden iOS 17
  • Avbrutte fjærer holder hastigheten, slik at bevegelser avgis jevnt

SwiftUI animerer endringer i tilstanden. Når en verdi som isExpanded endres inne med Animation(.spring), flyttes hver visning som avhenger av den til sin nye layout ved hjelp av en fjær.

I iOS 17 og nyere er den enkleste måten å beskrive en fjær med to verdier: varighet, omtrent hvor lang tid det tar å sette seg, og sprett, hvor mye den overskrider. En sprett på 0 gir jevn bevegelse uten overskridelse; høyere verdier legger til sprett. Apple tilbyr også forhåndsinnstillinger: .smooth, .snappy og .bouncy.

Eldre kode bruker .spring(respons:dempingFraction:). Responsen er lik varighet, og en dempende brøkdel på 1 betyr ingen sprett mens lavere verdier legger til sprett. Begge former beskriver den samme fysiske våren.

Den store fordelen med fjærer er avbrudd. Hvis en bruker trykker igjen eller en drabevegelse avslutter midt i animasjonen, starter den nye fjæren fra gjeldende posisjon og hastighet, så det er ikke noe hopp. For dragbevegelser passerer du bevegelsens hastighet når brukeren slipper, slik at elementet fortsetter i retningen det ble kastet.

Hvis den samme komponenten også må kjøres på nettet eller Android, hjelper det å beholde vårverdier som delte bevegelsestokener. ExodeUI, som vi lager, har en SwiftUI kjøretid, så en designet komponent med fjærene kan spille i SwiftUI og på andre plattformer.

Ofte stilte spørsmål

Hva er standardanimasjonen i SwiftUI?

Siden iOS 17 er standardanimasjonen en jevn fjær.

Hva er forskjellen mellom .snappy og .bouncy?

.snappy legger seg raskt med en liten oversving; .hoppen overskrider mer. .smooth har ingen overskridelse.

Hvordan konverterer jeg respons og dempingFraction til varighet og sprett?

Respons kartlegges grovt etter varighet. En dempende fraksjon på 1 er sprett 0; lavere dempingsfraksjoner betyr mer sprett.

Hvordan legger jeg til hastighet fra en drabevegelse?

Les hastigheten når draget slutter og bruk en interpolerende fjær eller de nyere fjær-API-ene som aksepterer en starthastighet.

Relaterte veiledninger og eksempler

Still inn en fjær før du skriver kode

Dra glidebryterne, se bevegelsen og kopier fjærverdier for SwiftUI, CSS og andre plattformer.

Åpne fjærgeneratoren
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →