财付通首页动画——你不知道的那些事儿财付通首页动画——你不知道的那些事儿.pdfVIP

财付通首页动画——你不知道的那些事儿 还记得一个月前财付通首页的那套动画吗 ？作为设计湿 或程序猿 ，你有没为她的实现感到好奇 ？ 今天 ，我们就搭乘时空车 ，穿梭回去探个究竟吧。温馨提示 ：抓紧扶手哦~ Part 1 ：每个人都有一颗童心 （设计理念 ） 从我们耳熟能详的童话故事入手 ，将“快捷”、“移动”、“安全”、“轻松”融入其中 ，寓情于景、寓教 于乐 ，于无形中将财付通的品牌理念植入用户心中…… Part 2 ：立体贺卡 ，你收到了吗 （动画方式 ） 动画的进入效果 ，模仿的是立体贺卡的展开 ：基本背景先映入眼帘——人物/近景、事物/远景从纸 面上 （画面的地面上 ）站立起来——装饰物 （文字 ）从另一空间出现 （从屏幕上方坠落 ），如图 ： 其中 ，近景和远景的分开翻转 ，使立体感、层次感更分明 ，动画更饱满 ；时间顺序上 ，由远及近、 由上到下 ，更贴近立体贺卡的感觉。 Part 3 ：没有f lash我照样儿活 （动画实现 ） 1. 基本属性 2. 疑难杂症 2.1 3D翻转立体效果 3D动画没有立体效果 ，像2D一样2B ？有没有遇到过 ？你是怎么处理的 ？ 开始讨论这个问题之前 ，我们先来了解一下基本动画——旋转。css3中的旋转有绕x轴、绕y轴和绕z 轴旋转三种 ，坐标系如下图 ： 如果非要举个例子的话 ，体操运动员的单杠运动是绕x轴旋转 ： jo lin姐姐跳钢管舞是绕y轴旋转 ： 旋转飞刀的特技表演是绕z轴旋转 ： 由坐标系和图图可以看出 ，z轴是垂直于屏幕的 ，绕z轴旋转是在平行于屏幕的平面上旋转 ，因此旋 转是2D的 ，旋转的属性是rot at e ) ；而绕x轴和y轴旋转是在垂直于屏幕的平面上旋转 ，是3D的 ，旋 转的属性分别是rot at eX )和rot at eY )。 回到主题 ，我们动画中的前/后景翻转 ，实则是绕着x轴旋转90度。初步测试时 ，设好了旋转的属性 和角度值 ，前/后景可以翻转了 ，但是却毫无立体感可言 ，不是从地面上“翻”起来 ，而像是从地 面上“冒”出来似的 ，纵深方向上 （即z轴方向 ）没有距离感。查阅资料后发现 ，原来3D效果是要设 置透视参数的 （没有透视 ，不成3D ），常用的两个透视属性如下 ： perspect ive ：设置镜头到元素平面的距离 （所有元素默认都放置在z =0的平面——即屏幕上 ）。比 如perspect ive 500px)表示 ，镜头距离元素表面的位置是500像素。此时你看该元素 ，就好像你的眼 睛距离该元素500像素远时看到的效果。示例如下 ： 原图 ： 不设透视时 ，元素绕y轴旋转4 5度 ： 透视距离设为500px时 ，元素绕y轴旋转4 5度 ： 有图有真相 ，这下明白了吧 ？不过 ，透视距离到底设多少才合适呢 ？ 各位看官想想 ，既然镜头模拟的是我们的眼睛 ，那么 ，我们的眼睛距屏幕有多远 ，是不是透视距离 就该为多少呢 ？答案是肯定的。鉴于目前主流的屏幕分辨率在1680* 1050上下 ，而眼睛距离显示器 的距离大约为1.2个显示器的宽度 ，故透视距离大致应设为1680px* 1.2=2016px≈2000px。 perspect ive-o rigin ：规定镜头在平面上的位置 ，默认放在元素的中心。 示例如下 ： 在我们的动画中 ，透视距离perspect ive设的是2000px ；因视线垂直屏幕即可 ，故不需设 置perspect ive-o rigin。 2.2 Saf ari穿透bug Saf ari下图片会透过图片穿过来 ，就像电影里 ，鬼可以穿过人的身体一样。难道 ，真的见鬼了 ？！ ！ 版本首次发布后 ，发现Saf ari下前景会穿过后景翻转起来 （线上存在几个小时 ，有同学可能还记得 当时的现象 ）。检查动画的实现方式 ，没有问题 ；检查图片的z-index ，也正常 ；而且同为Webkit 内核 ，Chro me下完全正常 ，只有Saf ari有此问题 （我了个去 ，Saf ari是不是Webkit 家族的呀 ，血统 不正啊 ）。理论很丰满 ，展现很骨感 ；同内核不同表现 ；唉~ 阿拉水平有限 ，没有找到根本原因 ，最终采取了一种伪方法来解决 ： 将后景图在z轴方向上向着屏幕内平移一定距离 ，使前景和后景图贴在地面上时不会有叠在一起的 部分 ，简单示意如下 ： 原图 ： 平移示意图 ： 平移后前后景是不会交叠在一起了 ，但后景图片变小了 （沿着z轴向屏幕内 ，渐行渐远 ，渐行 渐小…… ），需把它恢复正常大小才行啊 ，肿么办 ？缩放属性scale )。平移