HT for Web 调度手册

索引


概述

HT系统可通过入门手册介绍的ht.Default.startAnim函数, 或者动画手册介绍的动画插件扩展包的方式来实现动画效果。 本手册将介绍的DataModel的调度函数功能,则主要用于在指定的时间间隔进行函数回调处理,常用于实现图形的流动和闪烁等动画效果。

上例需注意:Graph3dView默认关闭虚线功能,如需启用可通过graph3dView.setDashDisabled(false)启动虚线绘制功能, 虚线详见形状手册的空间管线章节。

调度

HT中调度进行的流程是,先通过DataModel添加调度任务,DataModel会在调度任务指定的时间间隔到达时, 遍历DataModel所有图元回调调度任务的action函数,可在该函数中对传入的Data图元做相应的属性修改以达到动画效果。

增删调度任务

DataModel#addScheduleTask(task)添加调度任务,其中taskjson对象,可指定如下属性:

DataModel#removeScheduleTask(task)删除调度任务,其中task为以前添加过的调度任务对象。

blinkTask500毫秒的间隔交替改变screen.color的颜色值,而modelMap['LCD'].color = { func: 'attr@screen.color' };mtl材质为LCD的模型颜色绑定了attr@screen.color,因此该调度任务最终使得mac电脑屏幕颜色交替变化实现闪烁效果:

blinkTask = {
    interval: 500,
    action: function(data){
        if(data !== mac){
            return;
        }                
        if(data.a('screen.color') === 'red'){
            data.a('screen.color', undefined);
        }else{
            data.a('screen.color', 'red');
        }
    }        
};
dataModel.addScheduleTask(blinkTask); 

dataModel.removeScheduleTask(blinkTask);删除闪烁调度任务时,通过mac.a({ 'screen.color': 'red' });恢复屏幕原始色, 避免处于闪烁的暗色阶段时删除调度任务:

checkBox: {
    label: 'Enable Blink',                 
    selected: true,
    onValueChanged: function(){
        if(this.isSelected()){
            dataModel.addScheduleTask(blinkTask);
        }else{
            dataModel.removeScheduleTask(blinkTask);
            mac.a({ 'screen.color': 'red' });
        }
    }
}

scaleTask40毫秒的间隔不断改变图元大小,scale.s3保存着原始图元大小, scale.value保存当前缩放比例,scale.shrink保存当前缩小还是放大状态:

scaleTask = {
    interval: 40,
    action: function(data){   
        if(data !== mac){
            return;
        }
        var shrink = data.a('scale.shrink'),
            value = data.a('scale.value'),
            s3 = data.a('scale.s3');
        if(shrink){
            value -= 0.02;
            if(value < 0.94){
                value = 0.94;
                data.a('scale.shrink', false);
            }                            
        }else{
            value += 0.02;
            if(value > 1.06){
                value = 1.06;
                data.a('scale.shrink', true);
            } 
        }
        data.a('scale.value', value); 
        data.s3(s3[0]*value, s3[1]*value, s3[2]*value);                                           
    }
};
dataModel.addScheduleTask(scaleTask); 

rotationTask50毫秒的间隔不断改变图元旋转方向:

rotationTask = {
    interval: 50,
    action: function(data){
        if(data !== mac){
            return;
        }
        mac.setRotation(mac.getRotation() + Math.PI/20);
    }        
};
dataModel.addScheduleTask(rotationTask);   

启停调度任务

DataModel#removeScheduleTask(task)删除调度任务可停止该任务外,调度任务的json参数对象上的enabled属性也可控制调度任务的启停, 如果该属性未设置则HT默认会在addScheduleTask时设置为true,用户可通过明确设置为false进行关闭。从上节例子中可知在action的调度处理时, 我们仅对data === mac的图元进行动画,因此其实调度的启停也可通过在action中,根据具体图元的属性信息做更细粒度的开关控制。

综上所述调度任务的启停可通过DataModel#removeScheduleTask,设置任务对象的enabled属性, 以及在action动作做过滤处理这三种方式来实现任务的启停,用户可根据具体场景选择最合适自己项目的设计方式。


欢迎交流 service@hightopo.com