Easily create multiple complex animations

In this article, we discuss how to easily create complex animation structures. This allows objects to have several independent animations so the animations can be "performed" in any combination/order/pattern, allowing for complex movements, scaling, fading, blinking, or any combination! If you have seen GUIs with advanced animations where objects/menus fly onto the screen while fading in or gently pulse opacity while changing size, all of that can be done using the concepts in this article.

Please see the attached dsn file a working example of the KB lesson content described below:


The example dsn above shows how to give any object (or a child group of many objects) a parent animation structure of multiple unique animations (animations like X/Y movement, X/Y scale, opacity, show/hide, etc).

Each animation is fully independent because it is defined at its own group level (1 animation per group level). This is the key concept, and must be done to prevent conflicts and create fully independent animation behavior.

Navigator names have been renamed to match the defined animations in the Animation pane as shown below.

TIP: As of Altia Design 12.1, you can right click in Navigator, and choose "Auto-Compute All Object Names" so that Navigator properly matches the group/object names to the animations defined at each level. This is a big time-saver for making the Navigator pane look nice and clean and match your animation names. (Additional details on the other menu options are in the User's Guide).

NOTE: While it is a best-practice to name the Object Name the same as the defined animation on that Group level, the additional notes in parentheses are only there to provide information about the animations for this KB and can be removed.

TIP: You can quickly click through the animation names in the Animation pane to highlight each animation one at a time to test them out using the Scrubber Bar on the Animation pane (as shown above with the opacity animation being changed by the Scrubber Bar):

This animation structure may seem complex, but keep in mind that you can easily replicate these animations onto other objects, and you don't have to define the animations yourself. Instead, you can start from the attached dsn and then follow the steps below.

  1. Copy/paste the top level group to retain all of the independent animations per group.
  2. Rename all the animations to be unique for the new copy.
  3. Replace the content in the _show card 1 to be the new content/objects that need its own set of these independent animations.
  4. If applicable (if some animations are not needed in your GUI of for specific objects), remove unneeded animations by selecting the animation Group level, and using the Ungroup command (Ctrl + U). This might be required at times, for example when generating code for a DeepScreen hardware target that may be too limited by its capability to support a Scale transformation.

While this structure provides for X/Y movement, X/Y scaling, opacity, and show/hide, you can add additional group levels to create things like a Distort animation, a rotation animation, etc.

TIP: It is best to create the rotation animations as a child level (below) the Group levels for movement animations.

Please email Altia Support for any questions on this topic, and happy animating!

Have more questions? Submit a request


Article is closed for comments.