Skip to main content
LanguageSvenska
Teknik5 min läsningoktober 2026

Hur fungerar våranimationer i SwiftUI?

Kort svar

I SwiftUI lägger du till en fjäder med .animation(.spring) eller withAnimation(.spring). Sedan iOS 17 är huvudinställningarna varaktighet och studs, och det finns förinställningar: .smooth (ingen studs), .snappy (lite) och .bouncy (mer). Äldre kod använder respons och dampingFraction. SwiftUI fjädrar behåller sin hastighet när en ny animation avbryter dem, vilket gör att gester känns naturliga.

Core Takeaway

  • Använd withAnimation(.spring) för tillståndsändringar, eller .animation(.spring, value:) på en vy
  • iOS 17+: .spring(duration:bounce:) plus .smooth, .snappy och .bouncy förinställningar
  • Äldre API: .spring(respons:dampingFraction:blendDuration:)
  • Fjädrar är SwiftUI:s standard animationsstil sedan iOS 17
  • Avbrutna fjädrar behåller sin hastighet, så att gester lämnas smidigt

SwiftUI animerar tillståndsändringar. När ett värde som isExpanded ändras inuti withAnimation(.spring), flyttas varje vy som beror på det till sin nya layout med hjälp av en fjäder.

I iOS 17 och senare är det enklaste sättet att beskriva en fjäder med två värden: varaktighet, ungefär hur lång tid det tar att sätta sig, och studs, hur mycket den överskrider. En studs på 0 ger jämna rörelser utan överskjutning; högre värden lägger till studs. Apple tillhandahåller även förinställningar: .smooth, .snappy och .bouncy.

Äldre kod använder .spring(respons:dampingFraction:). Svaret liknar varaktigheten, och en dämpningsandel på 1 betyder ingen studs medan lägre värden lägger till studs. Båda formerna beskriver samma fysiska vår.

Den stora fördelen med fjädrar är avbrott. Om en användare trycker igen eller en draggest avslutas mitt i animeringen, startar den nya fjädern från den aktuella positionen och hastigheten, så det finns inget hopp. För draggester, passera gestens hastighet när användaren släpper, så att elementet fortsätter i den riktning som det kastades.

Om samma komponent också behöver köras på webben eller Android, hjälper det att behålla fjädervärden som delade rörelsetokens. ExodeUI, som vi tillverkar, har en SwiftUI körtid, så en designad komponent med sina fjädrar kan spela i SwiftUI och på andra plattformar.

Vanliga frågor

Vad är standardanimationen i SwiftUI?

Sedan iOS 17 är standardanimationen en mjuk fjäder.

Vad är skillnaden mellan .snappy och .bouncy?

.snappy lägger sig snabbt med ett litet överskott; .bouncy överskrider mer. .smooth har inget överskott.

Hur konverterar jag respons och dampingFraction till duration och studs?

Svaret avbildar ungefär varaktigheten. En dämpningsfraktion på 1 är studs 0; lägre dämpningsfraktioner betyder mer studs.

Hur lägger jag till hastighet från en draggest?

Läs av hastigheten när draget slutar och använd en interpolerande fjäder eller de nyare fjäder-API:erna som accepterar en initial hastighet.

Relaterade guider och exempel

Trimma en fjäder innan du skriver kod

Dra reglagen, titta på rörelsen och kopiera fjädervärden för SwiftUI, CSS och andra plattformar.

Öppna fjädergeneratorn
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 →