多比图形控件教程11


4. 图元动画

    图元动画在实时的显示方面有大量的用处。 例如,工业控制中的人机界面, 网络拓扑图中的设备故障信息等等。

实现工业控制,网络拓扑报警的图元动画

我们先来看看计算机的动画是如何产生的。计算机通过动画一幕一幕的连贯起来,之后就会产生动作效果,使人有身临其境的感觉与效果。一个最简单的动画只有两帧,他们连续的播放,就可以产生动画效果。

在理解了图元重绘的基础上, 我们不难知道如何绘制动画。 我们先设置一个定时器,让它半秒钟触发一个事件。我们在内部设置一个flag,当它是0 的时候我们绘制一次画面;当他是1的时候,我们绘制另外一个画面。

我们以网络拓扑图为例,如果有一个设备故障,我们可以闪烁,提示用户,设备出现了故障。

//设计一个网络图的基类, 所有的网络

Network.MonitorableDevice = StandardShapes.Image.extend({

    //标识开始动画或停止

    animation: false,

    //timer 的id

animId: null,

    //状态为

animCnt: 0,

orgW:-1,

orgH:-1,

    //设置开始动画或停止

setAnimation: function(a){

    this.animation = a;

        //如果需要显示动画,

if(a){

    var me = this;

            //保存状态

me.orgW = me.width;

me.orgH = me.height;

            //设置定时器

    this.animId = setInterval(function(){

    me.animCnt = (me.animCnt == 1)? 0 : 1;

me.drawAnimation();

}, 500);

        //不需要显示动画

}else{

            //清除定时器

    if(this.animId){

    clearInterval(this.animId);

    }

            //还原宽度和高度

this.width = this.orgW;

this.height = this.orgH;

this.animId = null;

this.animCnt = 0;

//重绘静态页面

this.redraw();

}

},

    //绘制动画

drawAnimation: function(){

        //如果是基数帧,缩小20%

    if(this.animCnt===1){

    this.height = this.orgH*0.8;

this.width = this.orgW*0.8;

//如果是偶数帧,还原比例

    }else{

     this.height = this.orgH;

this.width = this.orgW;

    }

this.redraw();

}

});

上一篇 下一篇

评论



分享