多比矢量图开发指南（八）-图元动画

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

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

在理解了图元重绘的基础上， 我们不难知道如何绘制动画。 我们先设置一个定时器，让它半秒钟触发一个事件。我们在内部设置一个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();

    }

});