• 翻页效果 算法原理


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

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

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

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

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

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

    翻页效果 <wbr>算法原理图一

    翻页效果 <wbr>算法原理

    图二

    翻页效果 <wbr>算法原理

    图三

    第一步:

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

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

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

    各点位置见图四。

    翻页效果 <wbr>算法原理

    图四

    第二步

    1 根据勾股定理,求出LAE的长度:

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

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

    2 按LAE的宽度取图片二(第二页)左侧图片,高度为原图高度,如图五

    3 根据正切函数和反正切函数,求出aAEB的角度:

    aAEB=ATAN(LAB/LBE)

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

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

    翻页效果 <wbr>算法原理

    图五

    翻页效果 <wbr>算法原理

    图六

    第三步:

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

    翻页效果 <wbr>算法原理

    图七

    翻页效果 <wbr>算法原理

    图八

    第四步:

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

    1 ∠1=180-90-∠AEB

    2 ∠2=90-∠1

    3 ∠3=∠2/2

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

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

    翻页效果 <wbr>算法原理图九

    第五步:

    裁掉图五黄线右侧部分,效果如图十:

    翻页效果 <wbr>算法原理

    图十

    第六步:

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

  • 相关阅读:
    判断浏览器的类别
    第2章计算机系统第五版Aimin.rar
    QQ软件已被破坏或部分文件丢失
    关于SqlServer服务无法启动的症状分析和解决方法
    T4模版生成SpringMVC构造REST代码:第三篇 用T4模版生成POCO类代码
    《深入理解计算机系统》笔记(四)虚拟存储器,malloc,垃圾回收【插图】
    Cocos2dx高级开发教程:制作自己的《捕鱼达人》
    算法设计与分析基础(第3版 影印版)
    MySQL数据库常用操作
    第一次面试
  • 原文地址:https://www.cnblogs.com/lweinking/p/3498467.html
Copyright © 2020-2023  润新知