You must be a Pro member to watch this episode.

Get Access Now

Sign in now if you're already Pro.

1

Use ContextKit to Add Realism to Your Origami Prototype

5:21FreeDone
2

Set Up Custom Fonts in Origami Studio

1:53FreeDone
3

Create Scatter Designs with the Random Patch in Origami

7:06ProsDone

Animate a Splash Screen in Origami with Repeating Animation

6:38ProsDone
5

Build Screen Transitions in Origami Studio

6:31ProsDone
6

Build a Card UI with Components

9:30ProsDone
7

Add Missing Patch Options

1:29ProsDone

Animate a Splash Screen in Origami with Repeating Animation

Published by Chris Slowik

Episode Notes

Extra tips from the author

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.

Episode Topics: