Add Visibility Animation

This topic describes how to create visibility animation for SVG graphics.

About this task

Lets you control the visibility of graphical elements.
Note: Modifying graphic templates in an application affect the rendering of data and animations in the runtime environment. You need to manually replace the instances of the graphic template with its latest version in all affected pages. Refer to the table:
Graphic Template Modifications What To Do
Added new animation Update graphic instances to see the new animations.
Deleted existing animation Update graphic instances to reflect the changes.
Modified visual elements (adding shapes, changing colors, etc.) No manual action required. Changes are automatically recognized by graphic instances in the runtime.

Procedure

  1. Right-click the element you want to animate.
  2. Select Add Visibility Animation.
    Adds an entry for visibility animation under the element.
  3. On the Details panel, access the visibility animation properties for the entry.
  4. Enter information in the following fields:
    Field Name Description
    Animation Name Provide a name for reference.
    Data Item Select the data item you want to apply to the element.

    See Create Data Item.
    Attribute The drop-down list contains several attributes, which can be associated with the data item in order to animate the HMI Graphic. The animation will apply to the selected attribute.
    Default Value Enter a default value for the selected attribute.

    This default value is used only when the data source is set to Manual in page designer. See Bind Your Data to Plug-ins.
    Visibility Table Configure one or more values to animate the visibility status of the element.
    To configure visibility status:
    1. Select the + icon.
    2. Select a logical Operator. For example, <
    3. Enter a Value. For example, 50
    4. Select the check box for Visible.
    5. Select Update.
    Similarly, add another value to the table that is >= 50 with visible check box cleared.

    Result: The element is visible only when the value is less than 50. If the value is greater than or equal to 50, the element is hidden.

    The visibility configuration values appear in a table with options to modify and delete them. You can also drag-to-reorder the visibility list.
  5. On the toolbar, select Save.