玩转HTML5移动页面(动效篇)

标签: 前端技术 html5 动画 效果 移动端 | 发表时间:2015-04-28 02:32 | 作者:TQ
分享到:
出处:http://isux.tencent.com

作为一名前端,在拿到设计稿时你有两种选择:

1.快速输出静态页面
2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来
作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,怎么办呢?

 

这次就来谈谈一些动画设计的小技巧,能在你时间不多又没有动画想法的时候瞬间让页面增色不少。
同时也会谈及移动端H5页面的优化细节与关键点,因此本文章将分为 动效篇 优化篇

 

====前方高能====

 

(1)  CSS3时序错开渐显动画
这是一种比较常用的动画,它的优点是节奏感强,做法就是先让每个元素隐藏,然后当页面呈现后每个元素错开时间出现。
例子(忽略兼容前缀和无关属性):

效果就是两个元素分别从上面掉下来,这里有个小细节(keyframes),为了让掉下来的动画生动点,应该是在90%的时候先掉下一点点,然后瞬间在100%时回跳5px。

还有个细节,安卓2.3.*不能良好支持-webkit-animation-fill-mode,也就是渐变动画不能停止在最后一帧。有这样一个解决方案:

1.用 Modernizr去检测是否支持这个属性,加上识别类.no-animation-fill-mode;

2.根据识别类采取以下措施:
(1)用js模拟同样效果;
(2)用css屏蔽掉动画;
(3)或者直接全部都用transition来做(不要keyframes)。

示例页面如下( 查看DEMO):

qzone5_1   qzone5_1_qrcode

(2) CSS3细节强调动画
一些局部细节如果还是渐现显示,会枯燥没什么感觉,例如标题、按钮等,需要一种强调。

 

分两种情况:
1.如果时间允许的话,基本做法是先把一个元素切成不同的块状,例如小人的手脚都切成不同图片,然后让它们重新组合,再通过赋予不同的CSS动画来让它生动起来,这里引用个webank的例子:
webank   webank_qrcode
查看DEMO

 

2.如果时间紧凑,又不像桑尼一样擅长于动画细节,可以使用一些辅助工具:
Animate.css,通过直接预览选择想要的动效,然后下载它的CSS把对应的keyframe扒下来就好了(引用整个CSS是资源浪费)。

 

(3)SVG动画
SVG技术越来越不陌生,使用门槛也渐渐降低,而且SVG动画还可以使用CSS控制。
先看个生日页面,是个SVG的蛋糕:
cyy   cyy_qrcode
查看DEMO

 

可见SVG是很强大的!弥补了CSS3的不足。
然而这种动画也是略耗时,但有一种比较常用的,就是线条的描绘动画,CSS3比较难实现,这里可以用SVG,看图:

 

介绍一个PS插件 svgArtisan(目前还未有主页),这个工具可以直接根据PSD的路径图层生成SVG图形。
接下来就简单了,将设计稿上的路径图形用插件生成对应的SVG,例如是这样的:
(注意,其中的foreignObject标签内是不支持svg的浏览器会看到一张.m3-svg-nosupport标签下的图片。)

svg1

再使用CSS3的animation控制stroke-dashoffset:

svg2

效果不难吧!SVG还有各种用途,例如制作ICONFONT等,可以深入挖掘。

(4) 重力陀螺仪
想让页面更有层次感,不妨让设计提供一些碎片元素,例如彩花,星星之类,然后把它们单独切出来放画面前景,使用陀螺仪伴随着手机运动碎片也跟着运动,多么好玩!
这里提供一个工具可以轻松实现陀螺仪重力效果的: parallax.js
用法简单,定义一个parallax-obj的父类,把需要动的元素加上layer的类,然后设置动的范围data-depth:

 

(5) 背景音乐&音效
H5页面要炫酷,画面生动还是不够的,一定要配合生动的音乐。因此可以主动跟设计或产品沟通,让他们可以提供音乐资源,分分钟导致UV猛涨有木有!

 

当然,有了音乐,前端也不是直接引用的,还是有点要求:
1.音乐不宜过长,30s为佳,而且音乐要加上渐现渐隐效果,方便循环播放;
2.音乐体积要小,音质和流量,在手机上还是优先考虑流量吧。
一般背景音乐体积可以接受的范围是200K以下,若太大,可以使用格式工厂等软件,降低它的比特率和声道来改变体积。

 

接着,只需要简单引用:
这里有个问题,IOS是不能自动播放音乐的,一定要触发一个用户交互事件,例如点击。
但是有一种hack的方法可以让IOS微信侧页面自动播放(SAFARI依旧无效):
通过new一张图片,监听一张图片的onload事件,结束后回调执行音频播放audio.play()即可,原理估计是动了dom结构,相当于执行了一次交互。(有人也用过createEvent模拟,原理也是动了dom。)
因此,记得暴露一个音乐关闭/打开的按钮,不然肯定被用户骂死。

 

(6)有趣的loading
Loading页还是要有的,万一用户网速慢呢?
以上做了那么多事,如果没有资源加载都是玩不来的,因此还需要一个loading的支持。一般情况下页面体积大于3m则要加上loading页。

 

然而loading还是可以做得很有趣的,一般的做法是:
1.引入品牌,例如APP宣传页;
2.引入有趣动画,放一个贱贱的人物跳舞给你看;
3.一切从简,用CSS3简单动画。

====最后总结====

最后,给一个例子结尾吧。
这是空间5.0预约页第二版,使用了以上的若干方法论,例如loading动画,CSS3动画,SVG星空连线,首屏星球重力感应,音乐(这里使用开启按钮后播放)等等。
(由于活动已结束,很多运营处都被删掉从简了,忽略那些细节)
qzone5_2   qzone5_2_qrcode
查看DEMO

 

当然,真正要做到高效制作动态H5页面,还是靠积累,因此平时做好的细节动画自己都积累起来,下次分分钟就能用得上。

相关 [html5 移动] 推荐:

HTML5 杀不死移动应用

- clowwindy - 月光博客
  苹果在其对抗 FLASH 的过程中,是否让自己也限了进去. 通过明文禁止 Flash 应用到 iPad 和 iPhone 上,苹果迫使 Web 开发人员不得不放弃采用 Flash 技术. 可以说,苹果和乔布斯为 Adobe 公司的放弃移动 Flash 业务的最终决定“提供了很有价值的参考意见”.

jQuery Mobile开发HTML5移动应用

- - HTML5研究小组
随着移动互联世界的到来,目前已发展到多种移动 操作系统割据的局面,而开发者则急需要能运用原有的开发知识和技能,快速方便地构建移动应用程序,并期望能运行在不同的 手机操作平台上,比如Android,iOS,黑莓等. 而目前,出现了一批十分优秀的支持HTML5/CSS3的移动应用开发框架,其中最为大家熟悉的是jQuery Mobile框架(http:// jquerymobile.com),它可以让熟悉jQuery框架的开发者快速开发出基于HTML5的移动应用,而且直接通过 手机的浏览器即可浏览.

玩转HTML5移动页面(动效篇)

- - 腾讯ISUX - 社交用户体验设计 - Better Experience Through Design
作为一名前端,在拿到设计稿时你有两种选择:. 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来. 作为一个有志向的前端,当然是选2啦. 可是需求时间又很短很短,怎么办呢. 这次就来谈谈一些动画设计的小技巧,能在你时间不多又没有动画想法的时候瞬间让页面增色不少. 同时也会谈及移动端H5页面的优化细节与关键点,因此本文章将分为 动效篇和.

HTML5和本地化的对比:移动应用之辩

- Sai - 译言-电脑/网络/数码科技
来源HTML5 vs Native: The Mobile App Debate. 移动应用和HTML5是目前最热门的两种技术,其彼此间存在着大量的重叠之处. Web应用运行在移动浏览器上,而且它们也可被重新包装成运行在各种移动平台上的本地化(native)应用. 有着对范围广泛的各种平台的支持,结合了移动浏览器威力十足的强大功能,开发者正转向HTML5这一被称作“一次编写,多处运行”的解决方案.

HTML5会成为移动应用的天敌吗?

- 离歌 - 互联网的那点事
好几年后的今天,我们已经给手机应用程序设计了非常多的用途了. 手机应用程序依然是移动设备推出新服务或内容的首要选择. 你需要知道HTML5的五件事. “应用程序”的整体概念或许已悄然发生巨变,在未来的某一天,我们可能不再需要访问手机应用商店,不论是Apple的还是Google的,我们只需要点击手机主菜单页面上的一个链接,手机就会立即在它的浏览器上启动一个“应用程序”.

移动浏览器HTML5兼容性列表

- 沈蚊 - 前端观察
这个很赞,整理了智能手机和平板中默认浏览器对HTML5和CSS3新技术的支持情况. 多谢 @cnjoel 在twitter的分享. 这个网站的开发者是firt,国外网页开发者. 直接访问吧:http://mobilehtml5.org/. PS:这样分享一个网站貌似有发文章充数的嫌疑. 不过考虑很多人不玩twitter/微博,好东西要让更多人知道吧.

Sencha发布移动HTML5云计算平台Sencha.io

- Amo - HTML5研究小组
Javascript网页开发框架提供商Sencha今天发布了Sencha.io,一个新的HTML5移动开发云计算服务. 这项服务允许Sencha的应用开发者构建基于浏览器的应用而不用写服务器端代码或者管理托管代码. 目前Sencha.io提供了一下服务,Sencha.io Data,Sencha.io Messages,Sencha.io Login 和Sencha.io Development.

Adobe将停止移动版Flash开发,专注于HTML5

- 请叫我火矞弟 - Solidot
接近Adobe的消息来源透露了该公司未来发展计划:停止移动版Flash开发,增加HTML5投资. Adobe未来不会再为新浏览器、操作系统或移动设备开发Flash播放器,但会继续向现有的Android和PlayBook平台Flash播放器提供安全更新和bug修正. 它的开发重心将集中在移动应用程序开发,包括帮助Flash开发者用Adobe AIR为不同移动应用商店打包原生应用;以及加大HTML5投入.

欧朋HTML5体验版 引发移动浏览技术变革

- - HTML5研究小组
2011年12月29日,北京——如果你是个“技术达人”,那么HTML5你一定不陌生. 作为新一代的网页技术标准,HTML5拥有革命性的优势,它无需任何插件就可以直接在浏览器里实现包括视频、动画特效在内的丰富呈现效果. 今天,在中国举办的第一次以HTML5为主题的年度盛会——“HTML5年度Home Party暨首届原创游戏大赛颁奖典礼”上,欧朋手机浏览器正式推出欧朋浏览器HTML5体验版(“欧朋H5体验版”),全面支持HTML5,将完美的HTML5体验带入移动浏览中.

HTML5蓄力爆发 2012引爆移动互联网‎

- - HTML5研究小组
在FLASH很盛行几乎所有人都在用的时候,苹果就毅然决然的选择了HTML,而时至今日HTML5的厚积薄发成为了移动互联网市场最大的亮点,2012年HTML5 将成为互联网新一代技术潮流的话题也在迅速传开,人类似乎已经无法阻止HTML5了. 随着HTML5技术的普及,开发者们的眼球又被这一个新的技术旋风眯了眼.