/* 修改图片旋转角度（保证在0-2pai之间） */
var modifyImgAngle=function(img){
(img.RC>(2*Math.PI))&&(img.RC-=2*Math.PI);
(img.RC<0)&&(img.RC+=2*Math.PI);
}
在图片旋转之前，我们可以对每张图片的角度做一个小小的修改，把旋转角限定在0-2π之间，方便后续的计算。
复制代码 代码如下:
/* 设置图片大小和位置 */
var setImgSize=function(img){
var left=rotate.originX+rotate.halfRotateWidth*Math.cos(img.RC)-imgWidth/2;
var top=rotate.originY-rotate.halfRotateHeight*Math.sin(img.RC)-imgHeight/2;
var scale=minScale+scaleMargin*(rotate.halfRotateHeight-rotate.halfRotateHeight*Math.sin(img.RC))/(2*rotate.halfRotateHeight);//图片在该时刻的缩放比
img.style.cssText='position:absolute;left:'+left+'px;'
+'top:'+top+'px;'
+'width:'+imgWidth*scale+'px;'
+'height:'+imgHeight*scale+'px;'
+'z-index:'+Math.round(scale*100);
}
如何通过改变旋转角使图片按椭圆的轨迹旋转呢？我们可以再回过头看看之前的椭圆方程：（），由于需要处理的是旋转，所以我们希望把对x，y的处理转换成对旋转角度的处理，因此x,y坐标可以表示为：x=a*cosα ， y=b*sinα 。图片的X坐标表示为：rotate.originX+rotate.halfRotateWidth*Math.cos(img.RC)-imgWidth/2（rotate.originX为原点X坐标，这里取容器的中心点），Y轴同理。之前说过图片缩放大小的依据是图片所处的位置，因此缩放比例scale的值则根据y坐标所占竖轴的长度进行计算。另外，层级关系z-index则根据scale的值进行计算，尺寸大得层级高，显示在前面。
复制代码 代码如下:
/* 设置旋转模式（自动/手动）*/
setPattern:function(patternName,option){
option=option||{};
this.pattern=patternName;
var rotateSpeed=option.rotateSpeed||10;
this.path=Math.PI/1000*rotateSpeed;
(typeof timeId!='undefined')&&window.clearInterval(timeId);
if(patternName==='auto'){//自动模式 可传入旋转方向：option.rotateDir 旋转速度：option.rotateSpeed
var self=this;
var direction=option.rotateDir||'CW';//顺时针：CW 逆时针：ACW
removeImgsHandler(this.imgs);
timeId=window.setInterval(function(){
for(var i=0,len=self.imgs.length;i<len;i++){
setImgPositionAndSize(self.imgs[i],self.path,direction);
}
},20);
}
else if(patternName==='hand'){//手动模式，可传回调函数：option.onSelected 缓动模式：option.tween
var onSelected=option.onSelected||util.emptyFunction;
var tween=Tween[tween]||Tween['easeOut'];//缓动模式默认为easeout
removeImgsHandler(this.imgs);
(typeof timeId!='undefined')&&window.clearInterval(timeId);
timeId=undefined;
bindHandlerForImgs(this.imgs,this.path,tween,onSelected);
}
}
}
现在看看用户选择手动模式或者自动模式的接口：setPattern方法，该方法根据传入的字符串不同而选择不同的模式，“auto”为自动模式，该模式还可以传入自定义参数，包括旋转速度和旋转方向。传入“hand”则为手动模式，附加参数可以为手动选择图片后的回调函数，以及旋转的缓动模式。
复制代码 代码如下:
var Tween = {//缓动类 默认提供三种缓动模式：linear easein easeout
linear: function(t,b,c,d,dir){ return c*t/d*dir + b; },
easeIn: function(t,b,c,d,dir){
return c*(t/=d)*t*dir + b;
},
easeOut: function(t,b,c,d,dir){
return -c *(t/=d)*(t-2)*dir + b;
}
};
以上就是缓动模式类，默认的三个模式分别为：匀速 先慢后快 先快后慢。用户可以调用addTweenFunction方法添加自己的缓动模式。
更多关于缓动的话题可以参考这两篇文章：
复制代码 代码如下:
/* 添加缓动模式 */
addTweenFunction:function(name,func){
if(typeof func=='Function'||typeof func=='Object'){
Tween[name]=func;
}
},
添加缓动模式的参数可以为对象或方法，一次性添加同类型的一组缓动模式建议使用对象添加。
复制代码 代码如下:
/* 为图片绑定点击事件处理程序 */
var bindHandlerForImgs=function(imgs,path,onSelected){
for(var i=0,len=imgs.length;i<len;i++){
imgs[i].handler=imgSelectedHandler(imgs,path,onSelected);
util.addEventHandler(imgs[i],'click',imgs[i].handler);
}
}
在手动模式下，首先要做的就是为图片绑定点击的事件处理程序，点击的图片沿着椭圆轨迹旋转移动到最前端，并且可以触发回调函数。
复制代码 代码如下: