多比矢量图开发指南(八)-图元动画
来源:互联网 发布:mac切换不了输入法 编辑:程序博客网 时间:2024/04/29 19:44
图元动画在实时的显示方面有大量的用处。 例如,工业控制中的人机界面, 网络拓扑图中的设备故障信息等等。
我们先来看看计算机的动画是如何产生的。计算机通过动画一幕一幕的连贯起来,之后就会产生动作效果,使人有身临其境的感觉与效果。一个最简单的动画只有两帧,他们连续的播放,就可以产生动画效果。
在理解了图元重绘的基础上, 我们不难知道如何绘制动画。 我们先设置一个定时器,让它半秒钟触发一个事件。我们在内部设置一个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();
}
});
- 多比矢量图开发指南(八)-图元动画
- 多比矢量图开发指南(五)-定义矢量图元
- 多比矢量图开发手册(六)-Web高级图元编程
- 多比矢量图开发教程(三)
- 多比矢量图控件开发文档(一)
- 多比矢量图开发(九)-和服务器端通信
- Android开发 之 矢量图动画SVG(细节版)
- Android 5.0+ 高级动画开发 矢量图动画
- Android开发 之 矢量图及其动画
- 矢量图动画
- 多比图形控件开发指南(二)
- Android 5.0+ 高级动画开发系列 矢量图动画
- 多比矢量图形控件用户手册(四)-图元
- VG.net矢量图和矢量动画开发平台拓扑图软件免费下载
- Android 矢量图动画(完结篇)
- SWT/JFace开发入门指南(八)
- SWT/JFace开发入门指南(八)
- JNI/NDK开发指南(八)
- 在一些国外服务器上编码乱码的问题
- “CSDN物联网与嵌入式技术”专题讲座
- Migrating Databases To and From ASM with
- 查询2个日期直接的所有日期
- BMP图像中BITMAPINFOHEADER结构
- 多比矢量图开发指南(八)-图元动画
- 开发C/S架构用各种语言的优缺点有什么?
- SQL
- 多比矢量图开发(九)-和服务器端通信
- 信号量 互斥锁 条件变量的区别
- window 多线程学习
- html5简介
- RUNTIME_CLASS(class_name) a CRuntimeClass structure
- Linux下crontab命令的用法