Animation Component

2D animation for logos, objects and characters.

To create the 2D animation we support Spine ( which is a fantastic third party tool for creating 2D animation. Once you have created the animation files in Spine you need to save them into the ‘Resources Folder’ for that App project inside the “Animations” folder.

  • The Animation component loads a default ‘Umajin’ text animation so the ‘Start animation’ and ‘Press animation’ dropdowns already have ‘Text’ and ‘Fade in’ as options.
  • For a new animation, you need to have exported your animation files from SPINE and save the files into your App’s ‘Resource Folder’.
  • Insert the files you want into the Animation component and set the properties for size, start, loop or not, time delay and on press if required.

There are a special set of actions for controlling animations. These are under the animation tab. Animation actions

Here is a project with some sample animations you can add to your new templates list with this link Install Template. Alternatively here are the animations in a zip file that you can download and add to your own projects.

How to use the Animation Component

Exporting from Spine

  • Click the Export button (CTRL+E for windows or CMD+E for Mac).
  • Have JSON selected.
  • Have ‘Create atlas’ selected.
  • Click on settings next to ‘Create atlas’
  • Check the output is PNG and the packaging is Atlas.
  • Also adjust the size. It must be a square size e.g. 1024 x 1024 or 2048 x 2048.
  • Click ok and then click Export.
  • Spine will create 3 files, an Atlas, a JSON file and a PNG.

Getting your animation to work in Umajin

  • Copy these files and paste them in your Umajin App in the ‘Resource Folder’ in the ‘animation’ folder.
  • Go to the page you’d like to add the animation, click the + button, and find the Animation component (under Basic category). Click Insert.
  • In the ‘Properties Inspector’ click the folder icon and select your animation.
  • Select the animation in the drop-down for Start Animation.
  • You can choose to loop the animation or not.
  • You can choose to play the animation on ”Press’.
  • Press play and check your animation is working as you’d expect it to.

Properties for Animation Component

Name When components are placed on a page they appear highlighted blue in the scene tree and can be renamed by double clicking in this panel and typing the new name. Components can also be set to be visible/invisible on the page, using the ‘eye’ icon on this panel.
Position and Size Sets position and size. As long as measurements are maintained as percentages it deals automatically with dynamic layout and resizing for different devices and orientations. You can use millimeters to control aspects of size like width or height in order to create a group that will be well positioned across devices.
Appearance Sets up the main animation file and size.
Animation file Type in the exact filename of your previously created main animation file that you have saved in the app’s ‘Resources Folder’ inside the ‘animation’ folder.
Scale Re-size using the scale slider. Scale of 0 to 3, 3 being the largest.
Behavior Sets up the action for your animation.
Start animation The dropdown will display a list of all of the animations in the file. The file can be text or an animation. If you select an animation here, it will play at the start of the page being visible.
Start loop Check the box if you want your animation to loop.
Delay before start(ms) On a sliding scale of 0 to 5000 milliseconds you can set a delay before your animation will play.
Press animation The drop-down will display a list of all of the animations in the file. If you select an animation here, it will play when the user presses on the animation component.
Origin X Set the horizontal position.
Origin Y Set the vertical position.


Events that can Trigger an Action on the Animation Component

On Press Action occurs when component is pressed.
On Completion Action occurs when the animation is completed.