翻页效果 算法原理

这东西，很多人都需要吧？网上最多的可能就是FLASH版本的了，可不同的环境和需求，会使用不用的语言做开发，FLASH的源码和效果就不一定能用了。琢磨了一下现成的翻书效果，分析出了这么一个算法，供大家参考。毕竟不管什么编程语言，知道了算法就好实现了。

发现我和佛有缘，昨天下午看到一个旋转，突然顿悟了这个东东，阿弥陀佛！明儿找个山东参禅去。

这个算法还没有做代码实现，可能还有漏洞，童鞋们根据自己的需求去完善吧，后期我会做出LINGO版本的，不过哪个代码就不公布了，嘻嘻，总得有点私藏。

来看这个教程的，估计初高中的代数几何都忘的差不多了，那我们就不去回顾那些标准写法，这里用我们方面理解的说法来标记，用p来标识点，l标识线，a表示角，如pA表示点A，lAB，表示线段AB，aABC，表示线段AB和BC形成的夹角。

过程较长，PS熟练的童鞋可以按这步骤在PS里面操作一下，方便理解。

图一为第一页，图二为第二页，图三为光影效果。

图一

图二

图三

第一步：

1、首先我们能获得鼠标当前位置，即点pA。

2、根据pA位置，求出LAB，LBC 的长度

3、根据LBC的长度，求出pE的位置，根据测试的实际视觉效果，pE在LBC的47%的位置。

各点位置见图四。

图四

第二步

1 根据勾股定理，求出LAE的长度：

LAE=SQRT(LAB*LAB+LBE*LBE)

//SQRT为平方根，不知道为啥，我这里无法输入根号了。

2 按LAE的宽度取图片二（第二页）左侧图片，高度为原图高度，如图五

3 根据正切函数和反正切函数，求出aAEB的角度：

aAEB=ATAN（LAB/LBE)

// ATAN为反正切函数，这里要注意浮点和整数的转换，以及角度和弧度的转换

4 将图五的锚点定为右下角，坐标位设定为pE点坐标，已aAEB的角度旋转，效果如图六。

图五

图六

第三步：

1 已LEC的宽度取图片二（第二页）右侧图片，高度为原图高度，图七，右侧对齐摆放。效果如图八，为了方便观察，图五和图七用了不同的边框区分。

图七

图八

第四步：

参考图九，我们要求黄线的倾斜角度。

1 ∠1=180-90-∠AEB

2 ∠2=90-∠1

3 ∠3=∠2/2

4 黄线倾斜角度=90+∠3

5 光阴效果已黄线角度倾斜，光阴图片锚点为图片底边中间，图片坐标位为pE。

图九

第五步：

裁掉图五黄线右侧部分，效果如图十：

图十

第六步：

找个好平面美工，帮你做个好的光阴效果，然后编写代码，然后回家睡觉吧！