图元动画在实时的显示方面有大量的用处。 例如,工业控制中的人机界面, 网络拓扑图中的设备故障信息等等。
我们先来看看计算机的动画是如何产生的。计算机通过动画一幕一幕的连贯起来,之后就会产生动作效果,使人有身临其境的感觉与效果。一个最简单的动画只有两帧,他们连续的播放,就可以产生动画效果。
在理解了图元重绘的基础上, 我们不难知道如何绘制动画。 我们先设置一个定时器,让它半秒钟触发一个事件。我们在内部设置一个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();
}
});