HT for Web Animation Manual

Index

Overview

The HT system can dynamically change the properties of model to achieve animation effects by the ht.Default.startAnim function introduces in Beginners Manual, or the DataModel#addScheduleTask function. The animation plug-in to be introduced in this manual will further encapsulate the animation, the user can only uses descriptive description that HT will automate the animation process, the animation plug-in can be one or more of the attributes of the data values (such as width, height, opacity, etc.) from a value smoothly change to another value, while providing a rich easing method for various effects, such as flashing, jumping, discoloration, etc.

Before using this plug-in, you need to introduce ht-animation.js file:

<script src="ht.js"></script> <!--Introduce ht.js file first-->
<script src="ht-animation.js"></script>

To use animations, you need to call ht.DataModel#enableAnimation(interval) to start global animation timer first, parameter interval specifies the global animation interval, the default is requestAnimFrame time (16ms around, browser-specific), in other words, if you do not specify interval parameters, DataModel timer will traverse all of their Data in every 16ms, according to Data animation configuration to perform animation

In addition to enableAnimation, there are two other APIs in DataModel that are often used:

This plug-in is expands an setAnimation(config) function based in ht.Data to configure the animation settings for the current data, and a simple configuration example is as follows:

data.setAnimation({
    show: {
        property: "opacity",
        accessType: "style", 
        from: 1, 
        to: 0,
        repeat: true
    },
    start: ["show"]
});

As you can see, the parameter config is a js object in which you can define one or more animation processes with any string other than start in particular meaning

The configuration above defines an animation process called show, which changes the opacity style (transparency) of the data, and changes it from 1 to 0, repeat means the animation repeats until you call setAnimation(null) clears the animation. Need attention:

After you clear the animation through the API, the property can be in any state, as in the example above, the opacity style can be any number between 0-1, and you may need to reset this style.

start is an array that specifies one or more animations to start, and the example above defines only one animation named show, in fact, you can define as many as you want, and the animation configuration parameters are listed as follows:

ht.Data Supports the following functions for pausing and continuing animations:

Demo1

Note the configuration of the dyeing data:

node2.setAnimation({
    blend: {
        from: 255, 
        to: 0,
        next: "clear",
        onUpdate: function (value) {
            value = parseInt(value);
            this.s("body.color", "rgb(255, " + value + ", " + value + ")");
        }
    },
    clear: {
        from: 0, 
        to: 255,
        next: "blend",
        onUpdate: function (value) {
            value = parseInt(value);
            this.s("body.color", "rgb(255, " + value + ", " + value + ")");
        }
    },
    start: ["blend"]
});

The start parameter specifies the start of the blend animation, and the dyeing animation has actually been changing the data's body.color style, where we don't specify property and accessType because body.color is not just a numeric type, but a string that represents the RGB color, so we used the onUpdate callback function, each of which combines strings to change the data's body.color

Demo2

dm.getDataAnimation = function (data) {
    if (data.getName() === "node1") {
        if (data.getAnimation() != null) {
            return data.getAnimation();
        } else {
            return {
                hide: {
                    property: "opacity",
                    accessType: "style", 
                    from: 1, 
                    to: 0,
                    frames: 1,
                    next: "show"
                },
                show: {
                    property: "opacity",
                    accessType: "style", 
                    from: 0, 
                    to: 1,
                    frames: 1,
                    next: "hide"
                },
                start: ["hide"]
            };
        }
    } else {
        return null;
    }
};

In this example, we did not call ht.Data#setAnimation, but by rewriting ht.DataModel#getDataAnimation, create an animation configuration based on the name of the data, which is useful in some scenes that require flexible animation

Demo3

This example demonstrates how to make a dashed line style flow:

Demo4

This example shows how to blink the data alert icon:

Welcome to contact us service@hightopo.com