This episode is all about animation - we have a pretty good splash screen design but it's static. Adding animation will hopefully distract the user from the fact that they're waiting!
Start by animating the fade-in of the star field. Place a
Classic Animation patch,set the duration to
1s and connect it to the Opacity property of the Star and Dot layers.
The text and logo elements on the canvas will fade in, but with a staggered timing. It's all based on one animation though, so start by placing a
Wait patch, set to
0.4s, called "launchDelay". This will delay our animation so that the app has a chance to animate open. Connect the
launchDelay patch to a
Classic Animation patch, with a
0.4s duration. Connect it to the Opacity property of the Observatory. This icon can start the fade-in animation. Now, to create a staggered animation, add two
Delay patches. Set one to
0.2s and the other to
0.4s. Connect the
Classic Animation patch driving the Observatory animation to these
Delay patches. The outputs of these should connect to the title and the description text Opacity.
Now the spinner needs to rotate! Place a
Repeating Animation patch, turn off Mirrored, and set the Style to Linear. This will drive the looping rotation animation, but it needs to be connected to a
Transition patch with an end point of
-360. A negative value for the rotation will cause it to rotate counter-clockwise, which matches our design. Setting the duration of the
Repeating Animation patch to a lower number will make it faster - setting the duration higher will make the animation slower.
To bring in the spinner, we'll use a
Pop Animation patch. Set the Bounciness to
15, and the Speed to
20. Connect it to a
Transition patch with a Start of
0.3 and an end of
1. Finally, connect the output of this patch to the Scale property of the spinner. Connect both this animation block and the repeating one to the
App Launched trigger. Now the spinner will spring into view when the app launches.