A keyframe (or keyframe) in animation and filmmaking is a drawing or shot that defines the starting and ending points of any smooth transition. TwinCAT HMI allows us to create and configure animations that can be played using CSS or JavaScript. The Animation API is designed for use within controls.

It is very easy to use the animation framework in TwinCAT HMI.

Download the sample:  TcHmiAnimationExample_Hemelix.zip

In our fictitious home automation system, we have the yard door that we shall animate. We shall explain how do we achieve the animation.

Animation is made of numerous frames; when those frames are shown at a certain speed; we perceive the individual frames as moving images. Keyframes are the important frames that contain information on a start/endpoint of an action. A keyframe tells us about two things; first, it tells us what the action of our frame is at a certain point of time; second, it tells us what time that action occurs.

We need to do/use the following STEPS to achieve the animation for a control.

STEP 01:

=> Identify the control name (identifier), we have identified the yard door for our fictitious as “TcHmi_Controls_Beckhoff_TcHmiImage_5”

=> Create an animation object by using JavaScript

var animation = new TcHmi.Animation('TcHmi_Controls_Beckhoff_TcHmiImage_5', '');

Note that the second parameter is empty which selects an HTML element within the control to be animated. An empty string selects the root element of the control.

STEP 02: 

Now we need to add frames, there are few overloaded methods there. We need to select the right one depending on what types of animation we are expecting. The most important properties of addKeyframe methods are:

styles: A collection of CSS properties and their desired values as a dictionary.

progress point :  A value between 0 and 1 inclusive, which determines the point in time of the animation. 0 is the start and 1 is the end of the animation.

animation.addKeyframe('transform', 'translate(0px, 0px)', 0)
 .addKeyframe('transform', 'translate(30px, 30px)', 1);
animation.duration(15000);

Here we are telling the framework that moves the image for 30 pixels in diagonal in 15 seconds.

STEP 03: 

Another important point is what to do when it has done animated (in our example we are transforming the image to the desired location so it will stay there). We need to listen to the animation events. Following are the events that can be emitted by the framework

STEP 04:

 Another important p The final JavaScript code is shown in the following snippet. It can be called when an event has occurred. It can be, for example, a button event.

var animation = new TcHmi.Animation('TcHmi_Controls_Beckhoff_TcHmiImage_5', '')
animation.addKeyframe('transform', 'translate(0px, 0px)', 0)
    .addKeyframe('transform', 'translate(282px, 0px)', 1)
    .duration(5000);
animation.registerEventHandler('animationend', function (event) {
    console.log('Animation ended: ' + event.animationName);
    var someControl = TcHmi.Controls.get('TcHmi_Controls_Beckhoff_TcHmiImage_5');
    var t = [{
        "transformType": "Translate",
        "x": 282,
        "xUnit": "px",
        "y": 0,
        "yUnit": "px",
        "z": 0,
        "zUnit": "px",
    }
    ];
    someControl.setTransform(t);
    var formattedSymbol = '%s%PLC1.MAIN.yardGate.YardDoorOpenCommand%/s%';
    TcHmi.Symbol.writeEx(formattedSymbol, false, function (data) {
        if (data.error === TcHmi.Errors.NONE) {
            console.log("Writting YardDoorOpenCommand OK");
        } else {
            console.log("Writting YardDoorOpenCommand NOT OK");
        }
    });
});
animation.run();