zoukankan      html  css  js  c++  java
  • 翻页效果 算法原理

    这东西,很多人都需要吧?网上最多的可能就是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>算法原理

    图十

    第六步:

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

  • 相关阅读:
    第一节,Django+Xadmin打造上线标准的在线教育平台—创建用户app,在models.py文件生成3张表,用户表、验证码表、轮播图表
    Tensorflow 错误:Unknown command line flag 'f'
    Python 多线程总结
    Git 强制拉取覆盖本地所有文件
    Hive常用函数 傻瓜学习笔记 附完整示例
    Linux 删除指定大小(范围)的文件
    Python 操作 HBase —— Trift Trift2 Happybase 安装使用
    梯度消失 梯度爆炸 梯度偏置 梯度饱和 梯度死亡 文献收藏
    Embedding 文献收藏
    深度学习在CTR预估中的应用 文献收藏
  • 原文地址:https://www.cnblogs.com/lweinking/p/3498467.html
Copyright © 2011-2022 走看看