『HTML5制造仿JQuery作用』减速

开言 本篇文章经过开源html5引擎lufylegend完成JQuery滑动效果。能使一个矩形来回减速加快滑行。因为用到了html5里的canvas，所以若是咱们要测验程序，请用撑持html5的浏览器翻开。源码下载稍后供给。 初始化页面 首要咱们来看看html文件里的代码： 


	
	html5 game - 仿jquery
	
	


	
 
 
 

 

 
  
  
  
  

   
   
   
   
  
 
  
 
  
  
  loading……
 
 
 

 

 
  
  
  
  

或许有人疑问，说是用html5，如何不见canvas标签？？？其实当你运用lufylegend开发时，底子不需求参加canvas标签。只需求调用该引擎中的init函数并向参数赋值就能主动将canvas标签加到html文件中。 接下来让咱们看看init用法：init(speed,id,width,height,function,type);其间speed代表页面替换速度，id代表传入的一个div的id，库件进行初始化的时分，会主动将canvas参加到此div内部，width和height别离代表页面巨细，function就是初始化完成后调用的函数，最终一个参数type为null时，会先进行页面的onload操作，若是init函数调用是在onload之后，那么需求将此参数设为LEvent.INIT。 我在js里是这样调用init的： init(50,"mylegend",800,400,main); 开端移动 看完初始化有些，咱们不仿来看看是如何做到能使一个矩形来回减速加快滑行。首要咱们来看看main.js里的代码： init(50,"mylegend",800,400,main);
var backLayer;
var speed = 20,x = 0;
function main(){
	//参加层
	initLayer();
	//开端移动
	setInterval(function(){move();},10);
}
function initLayer(){
	//参加布景层
	backLayer = new LSprite();
	addChild(backLayer);
}
function move(){
	//清空布景
	backLayer.graphics.drawRect(0,"white",[0,0,800,400],true,"white");
	//制作矩形
	backLayer.graphics.drawRect(0,"dimgray",[x =speed,0,200,200],true,"gray");
	//将速度逐步变小
	speed--;
	//当速度小于或等于-20时，将速度从头设为20
	if(speed <= -20){
		speed = 20;
	}
}
 当我初始化结束后，我参加了层，也就LSprite，用法如下： ■效果： LSprite 类是根本显现列表结构块，一个可显现图形而且也可包括子项的显现列表节点。 ■可用特点： type:类型 x:坐标x y:坐标y scaleX:X坐标方向上的缩放份额 alpha:透明度 rotate:旋转视点 visible:能否可见，当设为false的时分，该LBitmap目标不可视，且内部一切处置都将中止 childList:该目标的一切子项 graphics:指定属于此 LSprite 的 Graphics 目标，在此 LSprite 中可执行矢量绘图指令。 box2dBody:联系box2dweb后，创立的body2d mask:遮罩 举个比如： var loader;  
init(200,"mylegend",500,350,main);
function main(){  
    loader = new LLoader();  
    loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);  
    loader.load("img.png","bitmapData");  
}  
function loadBitmapdata(event){  
    var bitmapdata = new LBitmapData(loader.content,0,0,64,64);  
    var bitmap = new LBitmap(bitmapdata);
    var layer = new LSprite();
    addChild(layer);
    layer.addChild(bitmap);
}当层初始化完成后，就能够开端移动矩形了。首要我用setInterval不断地画矩形，为了不让矩形堆叠，我让它每画一次，清空一次屏幕。 //清空布景
backLayer.graphics.drawRect(0,"white",[0,0,800,400],true,"white");
//制作矩形
backLayer.graphics.drawRect(0,"dimgray",[x =speed,0,200,200],true,"gray");以上代码完成了不断画矩形。能够看到，我是在backLayer层上实施制作的。至于graphics的用法，我将它列在下面： drawRect(      thickness,      lineColor,      pointArray,      isfill,      color  ) ■效果： 画一个矩形 ■参数： thickness：边际线粗 lineColor：边际线色彩 pointArray：[开始坐标x,开始坐标y,矩形宽width,矩形高height] isfill：能否实心图形 color：实心色彩 接下来就是改动速度。首要我将每次移动的速度削减1，然后进行一次从头制作。这样的画就能够进行减速加快滑行。速度削减成了负数就会往反方向走，但若是削减的太多就会移出屏幕，所以给它一个约束： if(speed <= -20){
	speed = 20;
}也就是说若是削减的速度达到了-20那就让矩形往回跑。 这样一来，来回滑动就做好了。 代码下载 下载地址：http://download.csdn.net/download/theera_wpyh/5126953 ------------------------------------------------------------- 欢送咱们转载我的文章 转载请注明：转自TheEra's Magic Box http://www.fpjinan.com/linked/20130311.do