Animation

    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".

    ShowTimingAndAnimation.jpg

    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.

    TimingAndAnimationParameters.jpg

    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 after final   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.

    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.


    MultipleAnimations.jpg

    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.


    OtherCoolStuffForAnimation.jpg