这东西,很多人都需要吧?网上最多的可能就是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。
第五步:
裁掉图五黄线右侧部分,效果如图十:
图十
第六步:
找个好平面美工,帮你做个好的光阴效果,然后编写代码,然后回家睡觉吧!