Description
Virtually any Intuiface asset or collection property represented by a range of numbers - or property that implies a range of values, like hide vs. show - can be animated. Animation is a step-wise progression from one numeric value to another. The Speed, repetition and acceleration profile of this progression can be fine-tuned. Multiple animation actions can also be choreographed to occur at specific, timed intervals following a shared trigger.
Like all actions, animation is configured within the Triggers and Actions panel. You will know an action can be animated when the Parameter(s) column contains a link named "Show Timing and Animation".
Clicking that button reveals - on the right side of the panel - a timeline at the top and a set of configurable animation parameters at the bottom.
Video Summary
The following video provides and overview of Animation basics.
Timing and Animation - Parameters
The Timing and Animation panel enables you to fine tune the profile of the progression your selected asset or collection will follow as the selected property changes from its original value to the end value.
- Start time number of seconds that should pass before initiating the animation
- Animated toggle whether or animation should occur. If deselected, the target property value is immediately applied.
- Duration number of second that should pass between starting the animation and reaching the target property value.
- Easing effect acceleration profile of the animation throughout the specified Duration.
- Linear no acceleration
- Ease in starts slowly then speeds up
- Ease out starts fast then slows down
- Ease out starts and ends quickly but slows in the middle
- Bounce exceeds end point of animation and bounces back
- Frequency number of times the animation from beginning value to end value should occur.
- If set to One time, one additional property is mandatory and a second - appearing only if the first property is toggled on - is optional
- Reverse at end toggle whether the asset/collection should return to its original value. If so, it will use the Reverse behavior.
- Reverse behavior acceleration profile of the animation from end value back to original value. Animated means use the same profile as applied to the forward animation. Jump to start means use no animation, just set the property back to its original value.
- If more than One time, three additional properties are available
- Reverse at end after the final transition from original value to end value, toggle whether the asset/collection should return to its original value. If so, it will use the Reverse behavior.
- Reverse behavior acceleration profile of the animation from end value back to original value. Animated means use the same profile as applied to the forward animation. Jump to start means use no animation, just set the property back to its original value.
- Delay before repeat number of seconds between completion of Reverse behavior and initiating a new round of forward animation.
- If set to One time, one additional property is mandatory and a second - appearing only if the first property is toggled on - is optional
Timing and Animation - Timeline
As with actions in general, animated actions can share the same trigger. The results are multiple timelines you can use to choreograph all of the changes together. The following graphic shows three separate animations for the same Image asset but you can combine actions for multiple assets as well.
As a best practice, creating several actions in the same trigger is recommended vs creating several triggers with one action in each. In other words, it is best not to multiply the same trigger.
To change the timing of any action, Use either the Start time property of each animated action OR click-and-drag individual timelines directly.
Animation Shortcuts
Two particularly powerful features are Animation Preview and Parameter Capture.
- Animation Preview: Click this button (see image below) to preview all animation actions execute in real time.
- Parameter Capture: Click this button (see image below) to select end values by directly manipulating the target asset or collection. No need for guesswork or trial and error.
Limitations
- Animation scripted with "Indefinitely" Frequency will not stop if using show/hide actions on the animation target.
- A repeating animation will not be stopped when re-firing the trigger that started the animation.
Video Explanation - Mastering relative movement for advanced animation.
You will find in the Quarterly Q&A Fall Edition 2023 video more information on how to use advanced animation in your experiences.
Comments
0 comments
Article is closed for comments.