Sunday, December 29, 2019

Want to learn more about SwiftUI Transition Animations?


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.



exercise.gif

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.

SwiftUI Search & Filter with Combine - Part 3 (iOS, Xcode 13, SwiftUI, 2...

In part 3 of the Searchable video series, I show you how to use Combine in #SwiftUI for the search and filter logic connected to the searcha...