javascript椭圆旋转相册实现代码
程序员文章站
2022-07-09 16:20:09
功能说明： 1.支持自动和手动两种模式：自动模式下自动旋转展示，手动模式下通过鼠标选择当前图片，或通过提供的接口选择上一张/下一张图片。 2.可自行添加旋转的缓动模式，默认模式为：匀速，先快后慢，先慢...
功能说明：
1.支持自动和手动两种模式：自动模式下自动旋转展示，手动模式下通过鼠标选择当前图片，或通过提供的接口选择上一张/下一张图片。
2.可自行添加旋转的缓动模式，默认模式为：匀速，先快后慢，先慢后快。
3.可自定义旋转轨迹的宽和高。
4.支持ie6 7 8 9 10 firefox chrome等浏览器。
效果预览：
实现原理：
根据对图片在椭圆轨迹上的运动，动态改变缩放大小，实现立体的视觉效果。
代码分析：
首先是初始化函数，里面有defaultoptions作为默认值，用户也可以传入自定义的值，这些参数值包括：容器宽、容器高、图片宽、图片高、最大缩放倍数，最小缩放倍数，旋转速度等。初始化之后，调用setcontainersize函数。
setcontainersize函数设置了容器的尺寸，容器尺寸的大小决定了旋转轨迹的大小，例如当我们设置容器的高等于宽时，轨迹变成一个圆形。容器尺寸设定后，调用函数changerotatewh。
changerotatewh函数的作用是根据容器的尺寸，设定椭圆旋转轨迹的横半轴长和竖半轴长（程序里面的halfrotatewidth和halfrotateheight，具体计算方法为：轨迹高=（容器高-图片高）/2，轨迹宽=（容器宽-图片宽）/2）），在高中数学中，我们学过椭圆的标准方程：（），这里的横半轴和竖半轴分别对应椭圆方程的a和b。由于这里是横轴较长的椭圆，所以a>b。
设置好椭圆的基本坐标系之后，我们可以根据图片的数量，把图片排列成一个椭圆的形状，首先我们可以通过 2π/图片数量 求得图片之间间隔所占的角度，然后把图片平均分布在椭圆轨迹上，此时所有图片就围成了一个椭圆的形状，到这里图片的初始分布状态就出来了，接下来的任务就是需要使图片沿着这个轨迹动起来。
该函数根据每张图片位置的不同，设置图片对应的尺寸，另外我们还需要传入一个参数：direction（值为cw（顺时针）或acw（逆时针）），之后通过不断增加图片的rc属性（旋转角），使图片匀速自动旋转，这时自动旋转的旋转模式就ok了。
在图片旋转之前，我们可以对每张图片的角度做一个小小的修改，把旋转角限定在0-2π之间，方便后续的计算。
如何通过改变旋转角使图片按椭圆的轨迹旋转呢？我们可以再回过头看看之前的椭圆方程：（），由于需要处理的是旋转，所以我们希望把对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方法，该方法根据传入的字符串不同而选择不同的模式，“auto”为自动模式，该模式还可以传入自定义参数，包括旋转速度和旋转方向。传入“hand”则为手动模式，附加参数可以为手动选择图片后的回调函数，以及旋转的缓动模式。
以上就是缓动模式类，默认的三个模式分别为：匀速 先慢后快 先快后慢。用户可以调用addtweenfunction方法添加自己的缓动模式。
更多关于缓动的话题可以参考这两篇文章：
http://zengrong.net/post/1151.htm
http://www.cnblogs.com/cloudgamer/archive/2009/01/06/tween.html
添加缓动模式的参数可以为对象或方法，一次性添加同类型的一组缓动模式建议使用对象添加。
在手动模式下，首先要做的就是为图片绑定点击的事件处理程序，点击的图片沿着椭圆轨迹旋转移动到最前端，并且可以触发回调函数。
再看看手动模式下的核心函数,该函数作为事件处理程序，在点击选择图片后执行。首先判断所点击图片处在椭圆轨迹的左边还是右边，如果是左边，则旋转方向为逆时针，右边则为顺时针（为了符合最短移动路程的原则），之后调用 rotateangle使图片移动相应角度。
rotateangle函数首先确定了旋转所经历的时间，图片的初始角度和开始旋转的时间，然后把一切工作交给缓动函数来计算图片下一次的旋转角度，缓动函数可以是用户设置的，也可以使用默认的easeout（先快后慢）。如果有回调函数的话，可以在旋转结束后触发。
另外在手动模式下，提供选择上一张图片和下一张图片的接口，原理就是使所有图片的旋转角度为图片之间的夹角，上一张图片和下一张图片的旋转方向分别设置为逆时针和顺时针。
最后是调用方法初始化后需要设置旋转的模式。
说了一大堆不知道说清楚了没有，这里提供所有源码，有兴趣的童鞋可以看看哈~
源代码：
html：
js:
完整的实现代码:
1.支持自动和手动两种模式：自动模式下自动旋转展示，手动模式下通过鼠标选择当前图片，或通过提供的接口选择上一张/下一张图片。
2.可自行添加旋转的缓动模式，默认模式为：匀速，先快后慢，先慢后快。
3.可自定义旋转轨迹的宽和高。
4.支持ie6 7 8 9 10 firefox chrome等浏览器。
效果预览：
实现原理：
根据对图片在椭圆轨迹上的运动，动态改变缩放大小，实现立体的视觉效果。
代码分析：
首先是初始化函数，里面有defaultoptions作为默认值，用户也可以传入自定义的值，这些参数值包括：容器宽、容器高、图片宽、图片高、最大缩放倍数，最小缩放倍数，旋转速度等。初始化之后，调用setcontainersize函数。
setcontainersize函数设置了容器的尺寸，容器尺寸的大小决定了旋转轨迹的大小，例如当我们设置容器的高等于宽时，轨迹变成一个圆形。容器尺寸设定后，调用函数changerotatewh。
changerotatewh函数的作用是根据容器的尺寸，设定椭圆旋转轨迹的横半轴长和竖半轴长（程序里面的halfrotatewidth和halfrotateheight，具体计算方法为：轨迹高=（容器高-图片高）/2，轨迹宽=（容器宽-图片宽）/2）），在高中数学中，我们学过椭圆的标准方程：（），这里的横半轴和竖半轴分别对应椭圆方程的a和b。由于这里是横轴较长的椭圆，所以a>b。
设置好椭圆的基本坐标系之后，我们可以根据图片的数量，把图片排列成一个椭圆的形状，首先我们可以通过 2π/图片数量 求得图片之间间隔所占的角度，然后把图片平均分布在椭圆轨迹上，此时所有图片就围成了一个椭圆的形状，到这里图片的初始分布状态就出来了，接下来的任务就是需要使图片沿着这个轨迹动起来。
该函数根据每张图片位置的不同，设置图片对应的尺寸，另外我们还需要传入一个参数：direction（值为cw（顺时针）或acw（逆时针）），之后通过不断增加图片的rc属性（旋转角），使图片匀速自动旋转，这时自动旋转的旋转模式就ok了。
在图片旋转之前，我们可以对每张图片的角度做一个小小的修改，把旋转角限定在0-2π之间，方便后续的计算。
如何通过改变旋转角使图片按椭圆的轨迹旋转呢？我们可以再回过头看看之前的椭圆方程：（），由于需要处理的是旋转，所以我们希望把对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方法，该方法根据传入的字符串不同而选择不同的模式，“auto”为自动模式，该模式还可以传入自定义参数，包括旋转速度和旋转方向。传入“hand”则为手动模式，附加参数可以为手动选择图片后的回调函数，以及旋转的缓动模式。
以上就是缓动模式类，默认的三个模式分别为：匀速 先慢后快 先快后慢。用户可以调用addtweenfunction方法添加自己的缓动模式。
更多关于缓动的话题可以参考这两篇文章：
http://zengrong.net/post/1151.htm
http://www.cnblogs.com/cloudgamer/archive/2009/01/06/tween.html
添加缓动模式的参数可以为对象或方法，一次性添加同类型的一组缓动模式建议使用对象添加。
在手动模式下，首先要做的就是为图片绑定点击的事件处理程序，点击的图片沿着椭圆轨迹旋转移动到最前端，并且可以触发回调函数。
再看看手动模式下的核心函数,该函数作为事件处理程序，在点击选择图片后执行。首先判断所点击图片处在椭圆轨迹的左边还是右边，如果是左边，则旋转方向为逆时针，右边则为顺时针（为了符合最短移动路程的原则），之后调用 rotateangle使图片移动相应角度。
rotateangle函数首先确定了旋转所经历的时间，图片的初始角度和开始旋转的时间，然后把一切工作交给缓动函数来计算图片下一次的旋转角度，缓动函数可以是用户设置的，也可以使用默认的easeout（先快后慢）。如果有回调函数的话，可以在旋转结束后触发。
另外在手动模式下，提供选择上一张图片和下一张图片的接口，原理就是使所有图片的旋转角度为图片之间的夹角，上一张图片和下一张图片的旋转方向分别设置为逆时针和顺时针。
最后是调用方法初始化后需要设置旋转的模式。
说了一大堆不知道说清楚了没有，这里提供所有源码，有兴趣的童鞋可以看看哈~
源代码：
html：
js:
完整的实现代码:
上一篇： 入门:CDR形状工具组的运用详解
下一篇： CDR制作三种不同类型的特价爆炸贴