One of the biggest challenges of creating app animations is the absurd difficulty of recreating them in code. Most animation editors allow the creation of complex animations only to discover that they are nearly impossible to code. This difficulty lies in the differences between design editors and real apps:
- Animation editors
animate design layers, which are not present in the final product
- Animation editors usually
interpolate the initial and final state of screens. This is completely disconnected from how software is done, where animations always change properties of code components based on their timing and are invoked by actions that call them, like tapping on the button
- Animation editors have
no resemblance of platform limitations, if there are any - by allowing to create things that are impossible to code, they also allow for the production of unusable results, leading to a large amount of time wasted on the constant back and forth
- Lastly, animation editors have
no resemblance of the targeted output platformsand the properties are usually incompatible with the code. For example, physics-based animations behave very differently on each platform and they are not smart enough to do proper conversion based on the platform rules
We have long craved for an editor that would fix all those problems, and so we created one. Supernova boasts state-of-the-art animation editor where everything you create always produces a real, valid production code, making the life of both designers and developers significantly easier.
There are few basic concepts worth talking about before we dive into how to actually create animations:
Triggers- Trigger is a component that invokes the animation. Triggers can be anything that user can interact with. Each animation has exactly one trigger, with the exceptions of animations that should play at the load of the screen - those don't have any trigger
Components- Every component in the component tree can be animated
Animated Properties- Every component consists of attributes like shadows, borders, background color and so on. When animating, you change the values of those properties at certain timepoints - keyframes
Keyframes- Signify one point at the time of animation where values are recorded. Animations are then interpolated between those key points. For example, to create fade-in transition you'd create 2 keyframes, the first one at the beginning, the second one at the end, and set opacity values to 0 and 1 respectively. The animation is then interpolated between those 2 points
Animation Chains- The entire animation doesn't have to be limited to just one component, you can animate multiple ones. Animation trigger is then what groups those animations together (when you click on the button, it will play any animation connected to it at the same time)
To create an animation, you first define its trigger. Select the component you wish to use to invoke the animation, right-click and select
trigger animation. This creates an empty animation ready to be filled with all the beautiful transitions.
Creating a trigger immediately opens the Animation Editor. You can close the animation editor by clicking on
exit animation. You can then reopen the editor by selecting any animation from the list of components. The component list always shows only animations specific to the selected screen.
Creating on-load and on-appear animations
On load animation (when a user sees the screen for the first time) and on appear animation (when a user comes to the screen, even using back button) can be created by creating any trigger from any component and then changing its trigger in the right panel to "none". We are currently implementing a better way to do it.
But empty animations are not exactly exciting. Select the component you wish to animate and it will be immediately added to timeline without any animated properties:
There are 2 ways how to animate the component - by using
custom animations, or creating one from predefined
template animations. Let's explore them now.
Custom animations allow you complete control over how the animation looks like. They are very useful when you want to go wild and create complex animations, such as transitions, chained animation and similar. To create custom animation, either right-click the component and select
add custom animation > type or click
+ add > type in the timeline itself.
Following properties can be animated:
Move X, Y- will move component on X or Y-axis
Scale X, Y- will scale component width or height
Rotate X, Y, Z- will rotate component on given axis. Z-axis rotation is used to rotate element visually in a percieved 2D plane, while X and Y-axis rotation will flip the component horizontally or vertically
Opacity- Opacity ranging from 0 to 1, usually used to fades and transitions
Corner Radius- Corner radius of the component
Border- Border around the component. The border allows you to set color and width dynamically
Shadow- Shadow under the component. There are many properties of shadow like colors, intensity, and radius which allow you to achieve a lot of interesting effects
Background Color- Background color of the component. Some components don't have a background color and this option will not be available
Once you select which property you want to get animated, it will be added to the timeline and you can set its values using keyframes.
There is also a quick, convenient way how to do the most common animations - using template animations. Right-click the component and this time, select
add template animation > type > subtype. Once you select the option, animation including all the keyframes will be created for you. You can of course further customize it through the timeline as well.
Keyframes are the way how to tell the animation that value will change in a specific time. One keyframe contains exactly 1 piece of information always specific to that animation property. For example, when you create a keyframe on the background color and select it, you'll be able to change the color for that specific time. In order to change different property at the same time, add keyframe corresponding to that property.
You create keyframe by dragging the red line (signalizing current time) to the desired time and right-clicking the property row where it intersects with it. This will bring the menu with only one option
add keyframe. When you add a keyframe, it locks its state to the specific time.
Removing keyframe is equally easy - again, right-click the keyframe and the option to
remove keyframe will be presented. Select it and keyframe will be done. If the keyframe was between other ones, Supernova will interpolate between two nearest ones again.
You can move keyframes freely on the horizontal axis. Hover over the keyframe and then drag it where you'd like to move. If you also shift-select multiple keyframes and drag them all at once. Lastly, you can select multiple keyframes by creating selection rectangle around them.
Changing keyframe properties
Simply select the keyframe in the timeline and look to the right panel - there will be two options specific to that keyframe:
Time- Specific time in seconds when the keyframe value gets applied
Value- Keyframe value specific to that property (can be color, number and so on)
When adding any property, you can configure advanced variables to make some really nice effects that would be hard to achieve otherwise, like reversing the animations, repeating them and so on.
Specifically, you can set the following:
Begin Time- Time of the first keyframe. If you change the begin time, all keyframes will move by that value
Duration- Total duration of the animation. If you change the duration, all keyframes will automatically reposition using the set ratio
Repeat Count- Number of times the animation will repeat itself before stopping
Autoreverse- When the animation is set to repeat (meaning the repeat count is larger than 1), every odd animation cycle will play in reverse. This is great to achieve things like bounce, glow and so on.
Finally, you can set the animation timing function. Timing function signifies how the values change over time. By default, the animation plays as ease-out, but you can select from many options including creating completely custom ones.
In order to test the animation, you have multiple options:
Manual timeline testing
The first one is to simply drag the current time (the red line). This changes the preview even in edit mode to show you the state of the animation in the exact time. This allows for precise debugging of animations down to a single frame.
The second option is to play the animation using the timeline controls. Timeline control are located at the top of the timeline. You can start, restart and pause the animation, and the speed option allows you to slow it down to see possibly overlooked details.
Live mode testing
The last option is to switch Supernova to live mode - the simulation. In this case, you are free to click around in the screen itself. Tapping our newly enhanced button will invoke the animation and play nice bounce animation.
Pro tip: Chained animations
You are not limited to one component in one animation. You can select another one and either add
template animationin a same fashion. Animations to those components will be triggered at the same time, but you can also play them in sequence - simply by moving the keyframe begin time to later time.
Updated about 2 years ago