Övergångar vid infogning och borttagning
Animera när vyer visas och försvinner.
Övergångar vid infogning och borttagning är en gratis lektion i SwiftUI Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för SwiftUI Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i SwiftUI Academy innehåller totalt 4 lektioner.
Vyer som kommer och går
När en vy läggs till eller tas bort beskriver en transition hur den animeras in och ut i stället för att bara dyka upp eller försvinna.
Övergångar behöver animering
En övergång spelas bara upp när insättningen eller borttagningen sker inuti en animering, till exempel när en boolesk växling görs med withAnimation.
Modifieraren .transition
Du kopplar .transition till vyn som visas eller försvinner och väljer hur den ska visas och tas bort.
if show {
Banner().transition(.opacity)
}Tona med .opacity
Den enklaste övergången är .opacity, som tonar in en vy när den läggs till och tonar ut den när den tas bort.
Glid in och ut
Övergången .slide flyttar in en vy från ena kanten och ut genom den andra, vilket passar bra för banderoller och rader.
.transition(.slide)Skala upp
Övergången .scale förstorar en vy från liten till full storlek när den läggs till och förminskar den när den tas bort.
.transition(.scale)Flytta in från en kant
Använd .move(edge:) för att flytta in en vy från en viss sida, till exempel från nederkanten för ett toast-meddelande.
.transition(.move(edge: .bottom))Kombinera övergångar
Slå ihop effekter med .combined(with:) så att en vy kan tonas samtidigt som den glider, vilket ger en rikare rörelse.
.transition(.opacity.combined(with: .slide))Asymmetriska övergångar
Med .asymmetric anger du olika effekter för insättning och borttagning, till exempel att skala in men tona ut.
.transition(.asymmetric(
insertion: .scale,
removal: .opacity))Utlös förändringen
Omslut den booleska växlingen i withAnimation så att den villkorliga vyn kör sin övergång i stället för att visas direkt.
withAnimation {
show.toggle()
}Övergångar och identitet
SwiftUI spelar upp en övergång baserat på vyns identity: att en vy verkligen träder in i eller lämnar hierarkin, inte bara ändrar värden.
Snabb kontroll
Vad krävs för att en övergång faktiskt ska spelas upp?
Repetition: Övergångar
Du har lärt dig att .transition styr hur vyer kommer in och lämnar hierarkin, från toningar och glidningar till asymmetriska kombinationer, allt utlöst av animerade ändringar. 🎬
Lär dig Swift med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Övergångar vid infogning och borttagning” gratis?
Ja – hela texten till ”Övergångar vid infogning och borttagning” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i SwiftUI Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i SwiftUI Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Övergångar vid infogning och borttagning”?
Animera när vyer visas och försvinner. Ni övar på SwiftUI Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig SwiftUI Academy?
Du behöver inga förkunskaper. Utbildningen i SwiftUI Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Övergångar vid infogning och borttagning”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här SwiftUI Academy-lektionen?
Ja. Varje SwiftUI Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Implicita animationer
- Explicita animationer med withAnimation
- Övergångar vid infogning och borttagning
- Fjädrar och anpassade tidskurvor