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

做为一名前端，在拿到设计稿时你有两种选择：

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）：

  

（2） CSS3细节强调动画

一些局部细节若是仍是渐现显示，会枯燥没什么感受，例如标题、按钮等，须要一种强调。

 

分两种状况：

1.若是时间容许的话，基本作法是先把一个元素切成不一样的块状，例如小人的手脚都切成不一样图片，而后让它们从新组合，再经过赋予不一样的CSS动画来让它生动起来，这里引用个webank的例子：

  

（ 查看DEMO）

 

2.若是时间紧凑，又不像桑尼同样擅长于动画细节，可使用一些辅助工具：

Animate.css，经过直接预览选择想要的动效，而后下载它的CSS把对应的keyframe扒下来就行了（引用整个CSS是资源浪费）。

 

（3）SVG动画

SVG技术愈来愈不陌生，使用门槛也渐渐下降，并且SVG动画还可使用CSS控制。

先看个生日页面，是个SVG的蛋糕：

  

（ 查看DEMO）

 

可见SVG是很强大的！弥补了CSS3的不足。

然而这种动画也是略耗时，但有一种比较经常使用的，就是线条的描绘动画，CSS3比较难实现，这里能够用SVG，看图：

 

 

介绍一个PS插件 svgArtisan（目前还未有主页），这个工具能够直接根据PSD的路径图层生成SVG图形。

接下来就简单了，将设计稿上的路径图形用插件生成对应的SVG，例如是这样的：

（注意，其中的foreignObject标签内是不支持svg的浏览器会看到一张.m3-svg-nosupport标签下的图片。）

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

效果不难吧！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星空连线，首屏星球重力感应，音乐（这里使用开启按钮后播放）等等。

（因为活动已结束，不少运营处都被删掉从简了，忽略那些细节）

 

  

（ 查看DEMO）

 

固然，真正要作到高效制做动态H5页面，仍是靠积累，所以平时作好的细节动画本身都积累起来，下次分分钟就能用得上。

 

注明出处格式：腾讯ISUX (http://isux.tencent.com/play-with-html5-animate.html)