Add Fill Animation

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

About this task

You can animate the fill color of the SVG graphic element.

Procedure

  1. Right-click the element you want to animate.
  2. Select Add Fill Animation.
    Adds an entry for fill animation under the element.
  3. On the Details panel, access the fill animation properties for the entry.
  4. Enter information in the following fields:

    Need to make distinction between level, min, and max. Each of these three properties have ability to define data item, attribute, and default

    Field Name Description
    Animation Name Provide a name for reference.
    Color Select a color to fill the SVG element. For example, sets the color of the liquid or the substance represented by the SVG tank.
    Fill Direction Select from these directional modes, in which a gauge or pump is filled with data:
    • left-to-right
    • right-to-left
    • bottom-to-top
    • top-to-bottom
    Level The values entered in this section apply to an object's fill-level, such as the progress of a loading bar or the level of a liquid in a container.
    Minimum The values entered in this section apply to minimum values of a range. For example, minimum levels of a gauge.
    Maximum The values entered in this section apply to maximum values of a range. For example, maximum levels of a gauge.
    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.
  5. On the toolbar, select Save.