『HTML5梦幻之旅』-滚动播放的幻灯片效果

很久又没写博客了，一者是因为要上课，平时没有什么零碎的时间研究新东西；二者最近在开发一款塔防游戏，有整块的时间都拿去开发这个项目了。因此最近没有什么好的东西和大家分享。这周末看在游戏快完工的份上，抽出了半天的时间研究了一下html5幻灯片制作，效果还不错，展示如下：

首先是一张《真三国无双7》关云长的头像

其次是《真三国无双7》貂蝉的头像

切换时的效果

怎么样？效果还是很不错，对吧~

测试链接：http://www.cnblogs.com/yorhom/articles/html5_dream_trip_slideshowsample1.html

接下来就来讲一讲制作过程。

一，准备工作

首先，需要下载html5开源引擎lufylegend.js，它是完全免费+开源的，可以下载下来学习一下。

下载地址：http://lufylegend.com/lufylegend

API文档：http://lufylegend.com/lufylegend/api

二，设计原理

要搞清楚本次开发的原理，我们不妨先画一张示意图：

假设绿色方框内的区域为显示区域，那么，我们可以用到lufylegend中的mask的方法来将整个红色方框裁减为绿色方框的大小，这时，我们只能看到A区域，而B，C被遮盖住了。然后如果我们要显示B区域，我们可以直接将红框区域往左移动一格的距离，绿色区域不动，就能将B显示出来了，就像放映机一样。

但是如果一直播放下去，那么我们播放到C区域时，红色区域再往左移动，那就会显示为空白。解决措施是又移回A区域，但是出现的问题又在于红色区域如果要移到A处，那应该右移动才能到达，但是我们要的是红色区域往左移动，因此就不能直接移回。那该怎么办呢？我想的解决措施就是把最前面的那个区域移动到最后的那个区域的右边。如果是刚才那种情况，那就让A接到C后方，这时候，A变成了最后一个。这时红色区域又往左移动时，取到的就是B，然后将B移动到A后面。

当然，上面我们只提到了向左移动时的处理方式，其实向右也是一样的，只是取的是最后一个区域，然后把这个区域移动到第一个区域的前面罢了。

光说原理只能算是纸上谈兵，接下来就来看看代码。

三，代码讲解

首先我们为了方便起见，建立一个LSlideshowSample1类，因为以后万一要拓展别的幻灯片效果，所以就在这个类的名字后面写上了"Sample1”，名字只是一种代号，我们主要看代码，构造器如下：

function LSlideshowSample1(width,height,isLoop,loopData){
	var self = this;
	base(self,LSprite,[]);
	
	self._slideshowList = new Array();
	self._slideshowIndex = 0;
	self._currentIndex = self._slideshowIndex;
	
	self.rangeWidth = width;
	self.rangeHeight = height;
	self.isLoop = isLoop;
	
	self._toX = 0;
	
	self.nextChildList = new Array();
	self.previousChildList = new Array();
	
	self.borderLayer = new LSprite();
	self.borderLayer.graphics.drawRect(0,"",[0,0,width,height],true,"transparent");
	
	self.contentLayer = new LSprite();
	self.contentLayer.mask = self.borderLayer;
	self.addChild(self.contentLayer);
	
	if(self.isLoop == true){
		self.loopData = loopData;
		self.frameIndex = 0;
		self.maxFrame = Math.floor(self.loopData.delay*1000/LGlobal.speed);
		self.addEventListener(LEvent.ENTER_FRAME,self.loopPlay);
	}
}

这个类有4个参数，意思分别是：[显示宽度，显示高度，是否自动播放，自动播放方式]，如果第三个参数填false，就可以不用添第4个参数。

接下来解释一下构造器中的代码：
self._slideshowList原先是用来装每一帧的数据的，后来直接在LSprite的childList中取了，所以它没有什么用，直接忽略掉。

接下来看_slideshowIndex属性，这个属性很怪异，主要用于取出要显示的帧，以后慢慢解释。_currentIndex是用来表示显示位置的，如果往左移动，表示显示位置增加1格，往右移动，表示显示位置减少1格。

self.rangeWidth，self.rangeHeight，self.isLoop是将参数存放起来的属性，后面会用到的。

然后是self._toX，这个表示要移动到的位置，和_currentIndex联用，以后也会提到，到时候慢慢讲。接下来是self.nextChildList和self.previousChildList属性，这两个属性和_slideshowIndex联用，_slideshowIndex主要负责作为这两个数组的取值下标。接下来，我们初始化显示层：

self.borderLayer = new LSprite();
self.borderLayer.graphics.drawRect(0,"",[0,0,width,height],true,"transparent");
	
self.contentLayer = new LSprite();
self.contentLayer.mask = self.borderLayer;
self.addChild(self.contentLayer);

borderLayer等于上面我们讲解原理时的绿色区域，contentLayer代表红色区域。borderLayer要作为contentLayer的遮罩，因此在contentLayer中写道：

self.contentLayer.mask = self.borderLayer;

然后进入判断是否自动播放：

if(self.isLoop == true){
	sel