Add Color Animation

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

About this task

You can animate to change the color of the SVG graphic element.

Procedure

  1. Right-click the element you want to animate.
  2. Select Add Color Animation.
    Adds an entry for color animation under the element.
  3. On the Details panel, access the color 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.
    Color Table Configure one or more colors to change the color based on a specific value.
    To configure a color:
    1. Select the + icon.
    2. Select a logical Operator. For example, <
    3. Enter a Value. For example, 50
    4. Choose a Color. For example, green.
    5. Select Update.
    Result: If the value is less than 50, the color remains green.

    Configured colors appear in a table with options to modify and delete the colors. You can also drag-to-reorder the list of colors in a table.
  5. On the toolbar, select Save.
    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.