求知 文章 文库 Lib 视频 iPerson 课程 认证 咨询 工具 讲座 Modeler   Code  
会员   
 
  
 
 
     
   
分享到
财付通首页动画你不知道的那些事
 
作者 TID-财付通设计中心,火龙果软件    发布于 2014-03-21
 

还记得一个月前财付通首页的那套动画吗?作为设计湿抑或程序猿,你有没为她的实现感到好奇?今天,我们就搭乘时空车,穿梭回去探个究竟吧。温馨提示:抓紧扶手哦~

Part 1:每个人都有一颗童心(设计理念)

从我们耳熟能详的童话故事入手,将“快捷”、“移动”、“安全”、“轻松”融入其中,寓情于景、寓教于乐,于无形中将财付通的品牌理念植入用户心中……

Part 2:立体贺卡,你收到了吗(动画方式)

动画的进入效果,模仿的是立体贺卡的展开:基本背景先映入眼帘——>人物/近景、事物/远景从纸面上(画面的地面上)站立起来——>装饰物(文字)从另一空间出现(从屏幕上方坠落),如图:

其中,近景和远景的分开翻转,使立体感、层次感更分明,动画更饱满;时间顺序上,由远及近、由上到下,更贴近立体贺卡的感觉。

Part 3:没有flash我照样儿活(动画实现)

1. 基本属性

2. 疑难杂症

2.1 3D翻转立体效果

3D动画没有立体效果,像2D一样2B?有没有遇到过?你是怎么处理的?

开始讨论这个问题之前,我们先来了解一下基本动画——旋转。css3中的旋转有绕x轴、绕y轴和绕z轴旋转三种,坐标系如下图:

如果非要举个例子的话,体操运动员的单杠运动是绕x轴旋转:

jolin姐姐跳钢管舞是绕y轴旋转:

旋转飞刀的特技表演是绕z轴旋转:

由坐标系和图图可以看出,z轴是垂直于屏幕的,绕z轴旋转是在平行于屏幕的平面上旋转,因此旋转是2D的,旋转的属性是rotate();而绕x轴和y轴旋转是在垂直于屏幕的平面上旋转,是3D的,旋转的属性分别是rotateX()和rotateY()。

回到主题,我们动画中的前/后景翻转,实则是绕着x轴旋转90度。初步测试时,设好了旋转的属性和角度值,前/后景可以翻转了,但是却毫无立体感可言,不是从地面上“翻”起来,而像是从地面上“冒”出来似的,纵深方向上(即z轴方向)没有距离感。查阅资料后发现,原来3D效果是要设置透视参数的(没有透视,不成3D),常用的两个透视属性如下:

perspective:设置镜头到元素平面的距离(所有元素默认都放置在z=0的平面——即屏幕上)。比如perspective(500px)表示,镜头距离元素表面的位置是500像素。此时你看该元素,就好像你的眼睛距离该元素500像素远时看到的效果。示例如下:

原图:

不设透视时,元素绕y轴旋转45度:

透视距离设为500px时,元素绕y轴旋转45度:

有图有真相,这下明白了吧?不过,透视距离到底设多少才合适呢?

各位看官想想,既然镜头模拟的是我们的眼睛,那么,我们的眼睛距屏幕有多远,是不是透视距离就该为多少呢?答案是肯定的。鉴于目前主流的屏幕分辨率在1680*1050上下,而眼睛距离显示器的距离大约为1.2个显示器的宽度,故透视距离大致应设为1680px*1.2=2016px≈2000px。

perspective-origin:规定镜头在平面上的位置,默认放在元素的中心。

示例如下:

在我们的动画中,透视距离perspective设的是2000px;因视线垂直屏幕即可,故不需设置perspective-origin。

2.2 Safari穿透bug

Safari下图片会透过图片穿过来,就像电影里,鬼可以穿过人的身体一样。难道,真的见鬼了?!!

版本首次发布后,发现Safari下前景会穿过后景翻转起来(线上存在几个小时,有同学可能还记得当时的现象)。检查动画的实现方式,没有问题;检查图片的z-index,也正常;而且同为Webkit内核,Chrome下完全正常,只有Safari有此问题(我了个去,Safari是不是Webkit家族的呀,血统不正啊)。理论很丰满,展现很骨感;同内核不同表现;唉~

阿拉水平有限,没有找到根本原因,最终采取了一种伪方法来解决:

将后景图在z轴方向上向着屏幕内平移一定距离,使前景和后景图贴在地面上时不会有叠在一起的部分,简单示意如下:

原图:

平移示意图:

平移后前后景是不会交叠在一起了,但后景图片变小了(沿着z轴向屏幕内,渐行渐远,渐行渐小……),需把它恢复正常大小才行啊,肿么办?缩放属性scale()。平移后图片缩小至原来的多少分之一,我们就把它通过scale属性再放大多少倍。

用代码说话:transform:translateZ(-350px) scale(1.17,1.17);

这样,前后景图贴在地面上时不会交叠,翻转时自然就不会穿透了。

2.3 动画不流畅,怎么办?

元素移动的动画怎么实现,如果不流畅怎么办?用飘柔吗?

动画中实现元素的移动,通常有两种方法,一种就是我们熟知的绝对定位,即将要移动的元素绝对定位,然后通过top/bottom/left/right值来控制元素的动态位置;另一种是css3动画中专有的移动属性translate。

首页动画中文字的坠落和移出,最初是通过绝对定位后调整top值实现的,如坠落部分的动画代码:

后发现动作有些许的咔,调整时间和位移值后依然无效,换用translate后流畅了许多:

备注:已为元素设置默认状态:{ position:absolute;top:-600px; }

关于定位(top等)和位移(translate),就我目前的经验来说,translate在流畅度方面要好些,而且,移动的速度越慢,translate在流畅度方面的优势就越明显。但是,Firefox对translate的支持不是很好,某些速度下会像流星一样拖着长长的尾巴。So,究竟何去何从,还请各位具体问题具体分析,测试后再行定夺。

2.4 Firefox和IE10不能触发重播动画?!

动画隐藏后再显示,Firefox和IE10下不能触发重播动画,点解?

如大家所见,我们的动画是4幅轮播的形式,当前播放的只有1幅,对于当前没有播到的动画,需将其隐藏起来。如果是你,你会怎么隐藏?用我们惯用的hide (display:none;)吗,播放时再通过 show (display:block;)将其显示出来?这样可以吗?当然可以——理论上!实际上,Firefox和IE10下,若将节点hide后再show,是不能触发重播动画的。

好吧,退一步海阔天空,最终通过透明度来控制动画容器节点的显隐。

3. 差异化体验

支持动画的浏览器有Chrome、Safari、Firefox和IE10,对于不支持动画的浏览器,采取差异化体验,仅将图片淡入淡出。

Part 4:我如此飞奔,就是为了让你慢下脚步(性能优化)

1. 首幅特殊处理

第一副图片的动画播放时,页面往往还在加载资源,这时动画就会出现不流畅的现象。怎么处理呢?先出背景,让banner有个可以看的画面,待首屏加载完毕后再开始播放动画。

2. 延时加载

为了实现动画,一张图片被切成了4~5张,4幅下来,将近20张,虽然图片压了又压,总大小也500k有余了。如果网速低的话,全部加载完毕菊花都转疼了,带着拯救菊花的愿景,我们开始折腾了:

除第一幅动画所需的图片外,其他动画所需图片延时2s加载。你可能会问,那会不会播放到某幅动画的时候,或者用户点了某幅动画对应的轮播按钮时,该动画所需资源还没加载到啊?恭喜你,问对了——会!如果这个时候该播的动画资源还没加载到,banner就要空白了(如下图),怎么办呢?

不怕,道高一尺,魔高一丈,哪里有问题,哪里就有解决方案:

为了优化体验,出现这种情况时,需让动画暂时停留在上一幅的状态,待相应动画的资源加载完毕后再切换。可问题是,css3中的动画播放完毕后,是会回到动画播放前的状态的,而非停留到动画最后一帧的状态。据前文“Firefox和IE10不能触发重播动画?!”部分所述,动画播放前整个动画容器是通过透明度隐藏的,是不可见的,那么,“让动画暂时停留在上一幅的状态”只能是YY了。

就这么放弃吗?不!绝不!动画特性不支持,我们还有伪方法:

将动画拆分成in、out两段将动画拆分成in、out两段,其中in包含两个状态:进入和停留,将in的时间设置得很长(通过帧控制使进入时间不变,只是停留的时间长了,如将in设为50s,其中进入0.5s,停留49.5s),out时长不变。若到了轮播切换(周期为10s)的时候,或者用户点击了某轮播按钮时,如果下一幅要播放的动画素材已加载完毕,则js将动画切换至out状态,否则继续停留,直至下一幅播放动画的素材加载完毕才切换。(有点滑动门的赶脚,不过是时间方面的,有木有!)

以背景淡入淡出为例,动画方面代码说话:

拆分前:

拆分后:

后记:

首页动画,基本是我第一次尝试使用css3动画,边学边做,边做边学,很多地方理解地还不是很透彻,文中如有错误,欢迎指正,如有更好的建议和方法,跪求交流。css3动画,想要入门很容易,但想要玩得转、玩得嗨、玩得随心所欲却很难。其中的透视原理、数学思想等等都是值得深度挖掘的。只有把它们弄懂弄通,才能信手拈来,随意排列组合,用有限的属性做出无限可能的效果。。

相关文章

用户故事与用例
交互设计师之精益画布篇
数据分析之用户画像方法与实践
如何快速建立用户模型?
 
相关文档

用户界面设计
给企业做大数据精准用户画像
用户体验和交互设计
大数据下的用户画像
相关课程

用户体验&界面设计
用户体验、易用性测试与评估
用户研究与用户建模
用户体验的软件UI设计最佳实践
 
分享到
 
 

从手机登录页面设计想到的
如何把无意识引入交互设计中
交互设计的真相
当视觉设计师遇上产品经理
手机交互设计原则
用户体验之网页板块设计
更多...   

以用户为中心的设计
可用性评估
Desktop及Web-based视觉设计
认知原理与设计应用
手机用户界面设计

北京 以用户为中心的界面设计
北京 用户体验& 界面设计
上海 华为 用户体验& 界面设计
深圳 用户体验& 界面设计
爱立信 以用户为中心的设计
北京 用户体验与界面设计
福州 以用户为中心的界面设计
更多...