Overview of animation capabilities (to be honest, a lot of this was over my head, and probably explains why my apps don’t have a lot of animation).
Anatomy of an update
- SwiftUI tracker view’s dependencies – if anything changes the view is invalid and the close of the body will call another body to redraw the view.
- If you add an animation, the body is called with new values, including a animatable attribute. If that attribute changes, then it makes a copy and interpolates to transition from old value to new value. It will then update off the main thread for built in animations, which is very efficient and doesn’t call your view code.
- There are two aspects – Animatable attributes and Animations that describes how it changes over time.
Animatable
- You must conform to Vector Arithmetic to allow you to process a list of points in the animation
- ScaleEffect let’s you to independently define 4 different vectors so animation. It is public type so you can look at it if you want to learn how to create your own animatable views.
- Really good demo of the actual updates along the timeline of the animation
Animation
- You can customize withAnimation by passing in a specific animation, there are three basic categories – Timing Curve, Spring, and Higher Order animations (which modify a base animation)
- Apple recommends using Spring animations – and it is the default (.smooth) if you use withAnimation { }
- New category – “Custom” animations. Animate, shouldMerge and Velocity are the three requirements to create a custom animation
- All three of these are vectors only Animate is required
- ShouldMerge allows you to handle if a user interrupts your executing animation
- Velocity allows velocity to be preserved when a running animation is combined with a new one
Transaction
- This is a family of APIs, Transaction is a dictionary to propagate all the context for the current update
- This section of the talk explains what the actual transaction dictionary is used across the attribute graph
- This behavior enables APIs to control an animation, use a view modifier like .transaction { //action in there }
- Be careful with overriding – you should just .animation(.bouncy, value: selected) instead to remove accidental animation
- There is a new version of .animation(.smooth) this will scope it only to that modifier. So you can have it only react to the .smooth animation , this will reduce the likelihood of accidental animation.
- You can now update the Transaction Dictionary via an extension for use in Custom Animations, with your own TransactionKey
- There are two new variants of the transaction modifier to make it even more unlikely to have accidental animation