文档介绍：动效与优化 H5 移动页面设计技巧分享
作为一名前端，在拿到设计稿时你有两种选择：
作为一个有志向的前端，当然是选 2 啦！可是需求时间又很短很短，怎么办呢？
这次就来谈谈一些动画设计的小技巧，能在你时间不多又没有动画想法的时候瞬
间让页面增色不少。
同时也会谈及移动端 H5 页面的优化细节与关键点，因此本文章将分为动效篇和
优化篇。
一、动效篇
(1) CSS3 时序错开渐显动画
这是一种比较常用的动画，它的优点是节奏感强，做法就是先让每个元素隐藏，
然后当页面呈现后每个元素错开时间出现。
例子(忽略兼容前缀和无关属性)：
效果就是两个元素分别从上面掉下来，这里有个小细节(keyframes)，为了让掉
下来的动画生动点，应该是在 90%的时候先掉下一点点，然后瞬间在 100%时回跳 5px。
还有个细节，安卓 .*不能良好支持-webkit-animation-fill-mode，也就是渐
变动画不能停止在最后一帧。有这样一个解决方案：
Modernizr 去检测是否支持这个属性，加上识别
-animation-fill-mode;
：
(1)用 js 模拟同样效果;
(2)用 css 屏蔽掉动画;
(3)或者直接全部都用 transition 来做(不要 keyframes)。
示例页面如下(查看 DEMO)：
(2) CSS3 细节强调动画
一些局部细节如果还是渐现显示，会枯燥没什么感觉，例如标题、按钮等，需要
一种强调。
分两种情况：
，基本做法是先把一个元素切成不同的块状，例如小人的手
脚都切成不同图片，然后让它们重新组合，再通过赋予不同的 CSS 动画来让它生动起
来，这里引用个 webank 的例子：
(查看 DEMO)
，又不像桑尼一样擅长于动画细节，可以使用一些辅助工具：
，通过直接预览选择想要的动效，然后下载它的 CSS 把对应的
keyframe 扒下来就好了(引用整个 CSS 是资源浪费)。
(3)SVG 动画
SVG 技术越来越不陌生，使用门槛也渐渐降低，而且 SVG 动画还可以使用 CSS 控
制。
先看个生日页面，是个 SVG 的蛋糕：
(查看 DEMO)
可见 SVG 是很强大的！弥补了 CSS3 的不足。
然而这种动画也是略耗时，但有一种比较常用的，就是线条的描绘动画，CSS3 比
较难实现，这里可以用 SVG，看图：
介绍一个 PS 插件 svgArtisan(目前还未有主页)，这个工具可以直接根据 PSD 的
路径图层生成 SVG 图形。
接下来就简单了，将设计稿上的路径图形用插件生成对应的 SVG，例如是这样的：
(注意，其中的 foreignObject 标签内是不支持 svg 的浏览器会看到一
-svg-nosupport 标签下的图片。)
再使用 CSS3 的 animation 控制 stroke-dashoffset：
效果不难吧！SVG 还有各种用途，例如制作 ICONFONT 等，可以深入挖掘。
(4) 重力陀螺仪
想让页面更有层次感，不妨让设计提供一些碎片元素，例如彩花，星星之类，然
后把它们单独切出来放画面前景，使用陀螺仪伴随着手机运动碎片