Transition
Dec 30, 2023
- Regular animations render the objects on the screen already.
- If we have an object that isn’t on the screen, we use transition.
- Required conditional logics to use transition.
- Due to that transition is under utilized.
1. Create a button and a rounded rectangle with half-height of canvas size.
- We will use GeometryReader to make it half-canvas size.
- Wrap the content with
GeometryReader{ geometry in …} - Set the height with
geometry.size.height * 0.5
2. Add a animation
- Add a boolean variable.
- use @State to create a boolean
- Add withAnimation function in button.
withAnimation(Animation.default){boolean.toggle()}
- add boolean to see the animation.
3. Change the opacity animation to opacity transition.’
- We wrap the rounded rectangle with if Statement
- add
.transition(.opacity)instead of.opacity
List of transitions to use
// .transition(.scale)
// .transition(.slide)
// .transition(.move(edge: .top))
// .transition(.opacity)
4. We can customize the transition animation by using AnyTransition
- instead of
.opacity, we can wrap it withAnytransition.opacity.animation(.easeIn(duration: 1))
5. We can add a entering and exiting transition.
- use
.asymmetric
Use .transition to animate an object's entry and exit.
❓When should we use .animation and .transition?
💛 Playing with the .asymmetric transition effect can be fun.
🫥 So, which one do we use the most?
#visionOS #applevisionpro #swiftUI #appdevelopment
