Here is an exercise I take you through step-by-step when learning about #SwiftUI transition animations.
Think animations in apps are cool? 😎
Get started with my FREE SwiftUI Animations book: http://bit.ly/2u518LH
More Details:
Here are all the individual animations and transitions that make up this completed animation. There are a lot of them!
1. “Ready to travel?” Transition: move to leading. Animation: ease out over 1.1 seconds.
2. Image transition: move to leading. Animation: ease in over 1 second.
3. “Let’s go!” Text and shape behind it use the same transition: move to leading but they use two different animations:
a. Text animation: ease in out over 0.6.
b. Shape animation: ease out over 0.6 seconds to give it the appearance of having a different speed.
4. First red button will rotate 180 over 1 second with an easeOut animation.
5. Second red button transition: move from trailing combined with opacity. Animation: easeOut over 1 second (uses the same animation as the first red button.)
Screen 2
1. “Where do you want to go?” transition: move from top. Animation: easeOut over 0.8 seconds.
2. Info VStack transition: move from trailing. Animation: ease in over 1 second.
3. Airplane image transition: move in from bottom. Animation: ease out over 0.8 seconds.
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.