HT 动画手册

索引


概述

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

使用此插件之前,需要引入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,根据Dataanimation配置执行动画

除了enableAnimationDataModel上还有另外两个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变化至0repeat表示动画一直会重复,直到您调用setAnimation(null) 清除动画。需要注意:

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

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

示例一

需要注意染色图元的配置:

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样式,这里我们没有指定propertyaccessType,因为 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