HT 动画手册

索引

概述

HT系统可通过入门手册介绍的ht.Default.startAnim函数， 或者调度手册介绍的DataModel#addScheduleTask函数，动态改变模型属性以达到动画效果。 本手册将要介绍的动画插件则更进一步对动画进行封装，用户只需用描述性的说明HT即可自动实现动画过程，动画插件可以将图元的一个或多个属性值 (如width、height、opacity等)从一个值平滑的缓动至另一个值，同时提供了丰富的缓动方式用于实现各种效果，如闪烁、跳跃、变色等。

使用此插件之前，需要引入ht-animation.js文件：

<script src="ht.js"></script> <!--先引入ht.js-->
<script src="ht-animation.js"></script>

要使用动画，首先您需要调用ht.DataModel#enableAnimation(interval)启动全局动画定时器，参数interval指定全局动画间隔，默认为requestAnimFrame的时间(16ms左右，因浏览器而异)， 也就是说，如果不指定interval参数，DataModel定时器每隔16ms左右就会遍历自己所有的Data，根据Data的animation配置执行动画

除了enableAnimation，DataModel上还有另外两个API经常用到：

此插件在ht.Data上扩展了一个setAnimation(config)方法用于配置当前图元的动画设置，一个简单的配置示例如下：

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

可以看到，参数config是一个js对象，在这个对象里除了start有特殊含义，您可以使用任意字符串定义一个或多个动画过程

上面的配置中，定义了一个名为show的动画过程，这个动画过程改变图元的opacity样式(透明度)，将其从1变化至0，repeat表示动画一直会重复，直到您调用setAnimation(null) 清除动画。需要注意：

通过API清除动画后，属性可能处于任何状态，如上面的例子，opaciy样式可能是0-1之间的任何数字，您可能需要重设此样式。

start是一个数组，用于指定要启动的一个或多个动画，上面的例子里只定义了一个名为show的动画，事实上，您可以定义任意多个，动画的配置参数列举如下：

ht.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"]
});

start参数指定了从blend动画开始执行，染色动画实际一直在改变图元的body.color样式，这里我们没有指定property和accessType，因为 body.color不是单纯的数字类型，而是一个表示RGB颜色的字符串，所以我们用到了onUpdate回调函数，每一帧都组合字符串改变图元的body.color

示例二

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;
    }
};

在这个例子里，我们没有调用ht.Data#setAnimation，而是通过重写ht.DataModel#getDataAnimation，根据图元的名字生成动画配置， 在某些要求灵活生成动画的场景下非常有用

示例三

这个例子演示如何让虚线样式流动起来：

示例四

这个例子演示如何让图元告警图标闪烁：

欢迎交流 service@hightopo.com