多比矢量图开发指南(八)-图元动画

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

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

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

    }

});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值