|
|
|
很久没写东西了，比较懒，真的不太Xi(喜)欢写东西，也不太擅zhang(长)写，不过群友们对此颇有微言，说我总shuo(说)理论，没有实例，于是写dian(点)实例吧，堵一堵某xie(些)人的嘴，嘿嘿。
对与写JS动画，很多初学者喜欢让每ge(个)yun(运)动的物体拥有一个计数器，或者出现让运动的速度yu(与)时钟的频率yi(一)致，
1.第yi(一)种方shi(式)很xian(显)然不方便对动画De(的)整体控制，并且资源消耗大。
2.第二种方式，是把动画的帧率和速率概念混淆了，会引起bu(不)同的浏览器chu(出)现不同速率的问题
我所she(设)计的动画框架是由一个动画yin(引)擎来管理所有的dong(动)画，每个dong(动)画对象在生成的时候，ba(把)自己注册到动画引擎中，动画引擎调用每ge(个)动画对象De(的)帧方法lai(来)实现动画，多说无益，直接上代码吧，懒毛病又翻了......；
希望大家能给一xie(些)框架上的意见，fang(方)便完善这个框架。嘿嘿
java代码   
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<style>
div{width:20px;height:20px;border:1px solid #000;position:absolute}
</style>
<script>
var $ = function(o){ return document.getElementById(o)};
var SpriteEngine = {//动画引擎，you(由)动画引擎调度所有的动画对象
sprites : {},//动画对象字典
frame : 30,//每秒30帧
timer : null ,//动画ji(计)时qi(器)
register: function(spriteObj){//注册动画对象
if(spriteObj.id && ! this.sprites[spriteObj.id]){
this.sprites[spriteObj.id] = spriteObj;
}
},
unRegister:function(spriteObj){//删除动画对象
if(spriteObj.id){
delete this.sprites[spriteObj.id];
}
},
startFrame : function(){//kai(开)始动画
this.timer = setInterval(this.enterFrameFunction, 1000 / this.frame);
},
stopFrame : function(){//暂停动画
if(this.timer)
clearInterval(this.timer);
},
enterFrameFunction : function(){//内部启动方法
var sprites = SpriteEngine.sprites;
for(var key in sprites){
var sprite = sprites[key];
//$("debug").innerHTML += sprite.id;
if(sprite.id && sprite.enterFrame){//检cha(查)是否是Sprite的接口实例
sprite.enterFrame(1000 / SpriteEngine.frame);
}
}
}
};
/**
* 动画对象
* she(设)定内部接口为
* id 动画对象的标识
* enterFrame 由动画引擎调用
* 外部jie(接)口为
* addEnterFrameFunction 设定动hua(画)对象的运dong(动)函数
*/
var Sprite = function(id,speed,direction){
this.id = id;//接口，必须有ＩＤ，内部接口
this.x = 0;
this.y = 0;
this.dom = $(id);
this.speed = speed;//运动的速度，每毫秒多少像素
this.direction = direction;//运动的角度，单位弧度
this.enterFrameFun = [];//dong(动)画方程列表
SpriteEngine.register(this);
if(this.dom){//初始化位置
this.dom.style.top = 0;
this.dom.style.left = 0;
}
};
Sprite.prototype.setXY = function(x, y){//设zhi(置)内部dom位置，这个仅仅是演示用De(的)，不suan(算)Sprite的接口
this.x = x;
this.y = y;
if(this.dom){
this.dom.style.top = y + 'px';
this.dom.style.left = x + 'px';
}
}
Sprite.prototype.addEnterFrameFunction = function(fun){//添加动画的方法接口，外部jie(接)口
this.enterFrameFun.push(fun);
};
Sprite.prototype.enterFrame = function(stepTime){//引擎调用的接口,内部接口
for(var i = this.enterFrameFun.length; i--; ){
this.enterFrameFun.call(this,stepTime);
}
};
var movefun1 = function(stepTime){//demo 直线运动
var move = this.speed * stepTime
var _x = move * Math.cos(this.direction);
var _y = move * Math.sin(this.direction);
this.setXY(this.x + _x, this.y + _y);
}
var movefun2 = function(stepTime){//demo 给定yi(一)个角su(速)度
this.direction += 0.1;
}
var movefun3 = function(stepTime){//demo 往复yun(运)动
if (this.x > 500){
this.direction = Math.PI;
}
if(this.x < 50){
this.direction = 0;
}
}
function init(){
var a = new Sprite("demo1", 0.5, 0);
var b = new Sprite("demo2", 0.3, 30);
a.setXY(20,100);//直线运动，叠加wang(往)fu(复)运动
a.addEnterFrameFunction(movefun1);
a.addEnterFrameFunction(movefun3);
b.setXY(100,200);//直线运动，叠加角速度
b.addEnterFrameFunction(movefun1);
b.addEnterFrameFunction(movefun2);
}
function pauseOrStart(o){
if(o.value == '暂停'){
o.value = '开始'
SpriteEngine.stopFrame();
}else{
o.value = '暂停';
SpriteEngine.startFrame();
}
}
</script>
</head>
<body onload="init()">
<div id="demo1"></div>
<div id="demo2"></div>
<input type="button" value="开始" onclick="pauseOrStart(this)" />
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<style>
div{width:20px;height:20px;border:1px solid #000;position:absolute}
</style>
<script>
var $ = function(o){ return document.getElementById(o)};
var SpriteEngine = {//动画引擎，由动画引擎调du(度)suo(所)you(有)的动画dui(对)象
sprites : {},//动画对象字典
frame : 30,//每秒30帧
timer : null ,//动画计时器
register: function(spriteObj){//注册动hua(画)对xiang(象)
if(spriteObj.id && ! this.sprites[spriteObj.id]){
this.sprites[spriteObj.id] = spriteObj;
}
},
unRegister:function(spriteObj){//删除动画dui(对)象
if(spriteObj.id){
delete this.sprites[spriteObj.id];
}
},
startFrame : function(){//开始动hua(画)
this.timer = setInterval(this.enterFrameFunction, 1000 / this.frame);
},
stopFrame : function(){//暂停动画
if(this.timer)
clearInterval(this.timer);
},
enterFrameFunction : function(){//内部启动方法
var sprites = SpriteEngine.sprites;
for(var key in sprites){
var sprite = sprites[key];
//$("debug").innerHTML += sprite.id;
if(sprite.id && sprite.enterFrame){//检查是否是Sprite的接口实例
sprite.enterFrame(1000 / SpriteEngine.frame);
}
}
}
};
/**
* 动画对象
* 设定内部接口为
* id dong(动)hua(画)对象的biao(标)识
* enterFrame 由动画yin(引)擎diao(调)用
* 外部接口为
* addEnterFrameFunction she(设)定动画对象的运动函数
*/
var Sprite = function(id,speed,direction){
this.id = id;//接口，Bi(必)须有ＩＤ，内部jie(接)口
this.x = 0;
this.y = 0;
this.dom = $(id);
this.speed = speed;//运dong(动)的速度，每毫秒多少像素
this.direction = direction;//yun(yun(运))动的角度，单位弧度
this.enterFrameFun = [];//动hua(画)方程列表
SpriteEngine.register(this);
if(this.dom){//初始化位置
this.dom.style.top = 0;
this.dom.style.left = 0;
}
};
Sprite.prototype.setXY = function(x, y){//设置内部dom位置，这个jin(jin(仅))仅是演示用的，不算Sprite的接口
this.x = x;
this.y = y;
if(this.dom){
this.dom.style.top = y + 'px';
this.dom.style.left = x + 'px';
}
}
Sprite.prototype.addEnterFrameFunction = function(fun){//添加动hua(画)De(的)方法接口，外部接口
this.enterFrameFun.push(fun);
};
Sprite.prototype.enterFrame = function(stepTime){//引擎调用的接口,内部接kou(口)
for(var i = this.enterFrameFun.length; i--; ){
this.enterFrameFun.call(this,stepTime);
}
};
var movefun1 = function(stepTime){//demo 直线运dong(动)
var move = this.speed * stepTime
var _x = move * Math.cos(this.direction);
var _y = move * Math.sin(this.direction);
this.setXY(this.x + _x, this.y + _y);
}
var movefun2 = function(stepTime){//demo 给ding(定)一个角速度
this.direction += 0.1;
}
var movefun3 = function(stepTime){//demo 往复运动
if (this.x > 500){
this.direction = Math.PI;
}
if(this.x < 50){
this.direction = 0;
}
}
function init(){
var a = new Sprite("demo1", 0.5, 0);
var b = new Sprite("demo2", 0.3, 30);
a.setXY(20,100);//直线运动，叠加往复运动
a.addEnterFrameFunction(movefun1);
a.addEnterFrameFunction(movefun3);
b.setXY(100,200);//直线运动，叠加角速度
b.addEnterFrameFunction(movefun1);
b.addEnterFrameFunction(movefun2);
}
function pauseOrStart(o){
if(o.value == '暂停'){
o.value = '开始'
SpriteEngine.stopFrame();
}else{
o.value = '暂停';
SpriteEngine.startFrame();
}
}
</script>
</head>
<body onload="init()">
<div id="demo1"></div>
<div id="demo2"></div>
<input type="button" value="开始" onclick="pauseOrStart(this)" />
</body>
</html>
http://www.javaxxz.com |
|
|手机版|Java学习者论坛
( 声明：本站资料整理自互联网，用于Java学习者交流学习使用，对资料版权不负任何法律责任，若有侵权请及时联系客服屏蔽删除 )
发表于 2011-10-30 08:42:24