Dynamic svg animation

Hi,

How can the attached dynamic svg animated (in rotation) when running the HMI program?

Hello AutoGen_8472461,

You can rotate the object by dynamizing the value of the RotationAngle property between 0 and 360 via a dynamization script.

Hello AutoGen_8472461,

Hello MindFlayer,

Would you be able to provide an example on what you are trying to convey?

Thanks.

Hello,
I can think of 3 ways this could be done.
1. Add a script in any convenient place for you. For example, in the “Loaded” event.
Pros: works quite smoothly if the script is called once every 10-50ms.
Cons: Not very intuitive script.

let angle = 0;
HMIRuntime.Timers.SetInterval(() => {
  Screen.Items('DynamicSVG_10').RotationAngle += 5;
  if (Screen.Items('DynamicSVG_10').RotationAngle > 360) {
    Screen.Items('DynamicSVG_10').RotationAngle -= 360;
  }
}, 20);

2. Add a small script directly in the “Rotation - angle” field.
Pros: convenience, short script, it is clear what it is responsible for.

Cons: animation works jerkily.

export function DynamicSVG_11_RotationAngle_Trigger(item) {
  angle += 10;
  if (angle > 360) {
  angle = angle - 360;
  }
  return angle;
}

3. animation inside the svghmi widget.

Pros: very smooth animation, convenient control
Cons: It is hard to quickly set all the attributes of the animation, such as the center of rotation (but there are programs that speed it up).

<animateTransform

  attributeName="transform"

  type="rotate"

  from="0 95.52 95.52"

  hmi-bind:to="{{ ParamProps.Run ? '360 95.52 95.52' : '0 95.52 95.52'}}"

  dur="1"

  fill="freeze"

  repeatDur="indefinite"

/>

By the way how to make such animation, you can make a request in Youtube something like this “svghmi animation wincc unified”. There is a detailed video about it there.

And if you are interested, I can tell you more about each option if you have any questions.

 And a couple of examples of how it can look like: