移动前端页面制做技巧（一）转载

通常人不会说出来的移动前端动画技巧，文章来自“TQ的独立博客：玩转HTML5移动页面”，在这篇教程你会发现许多很是有用的动画处理技巧，细心点还会发现许多有用的zepto插件，例如：zepto.onepagescroll.js、zepto-touch.js、weixinshare.js，如下为原文。

标题起得有点大(๑´ㅂ`๑)，今天来谈谈H5移动页面的开发心得（技巧）。

通常状况下，拿到设计稿你有两种选择：
//条件表达式
产物＝设计稿处理？静态输出：让页面动起来；

做为一个有志向的前端，固然不会让页面生硬地静态展现啦(๑´ㅁ`)！但是需求时间又很短很短，怎么办呢？
因此下面的一些小技巧，至少能在你没有想法的时候让你的页面生动很多呢，同时也能确保你的页面不会出什么问题（后面有页面优化技巧）。

＝＝＝＝前方高能＝＝＝＝

TIPS1 css3时序错开渐显动画

这是一种比较经常使用的动画，它的优势是节奏感强，作法就是先让每一个元素隐藏，而后当页面呈现后每一个元素错开时间出现。
例子（这里忽略兼容前缀和别的无关属性）：

<div class="ele1"></div>
<div class="ele2"></div>

.ele1,.ele2{opacity:0;position:absolute;left:50%;translate3D(-50%,0,0);}
.ele1{top:30px;}
.ele2{top:50px;}

/*active为当前页面呈现时加上的触发类*/
.active .ele1,
.active .ele2{animation:ele-show .5s linear forwards;}
.active .ele1{animation-delay: .2s;}
.active .ele2{animation-delay: .4s;}

@keyframes ele-show
{
    0% {opacity: 0.2;translate3D(-20px,0,0)}
    90% {opacity: 1;translate3D(5px,0,0)}
    100% {opacity: 1;translate3D(0px,0,0)}
}

效果就是两个元素分别从上面掉下来，这里有个小细节（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

TIPS2 CSS3细节强调动画

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

1.若是时间容许的话，基本作法是先把一个元素切成不一样的块状，例如小人的手脚都切成不一样图片（好残忍(つд⊂)），而后让它们从新组合，再经过赋予不一样的CSS动画来让它生动起来，这里有个引用桑尼真（sunnycchen）的例子：

查看DEMO

2.若是时间紧凑，又不像桑尼同样擅长于动画细节，可使用一些辅助工具：
Animate.css，经过直接预览选择想要的动效，而后下载它的CSS把对应keyframe扒下来就行了（引用整个CSS是资源浪费）。

TIPS3 SVG动画

SVG技术如今愈来愈不陌生，使用门槛也渐渐下降，并且SVG动画仍是可使用CSS控制的！
先看个给朋友庆生作的页面，里面是SVG的蛋糕：

查看DEMO

可见SVG是很强大的！弥补了CSS3的不足。
然而这种动画也是略耗时，但有一种比较经常使用的，就是线条的描绘动画，CSS3比较难实现，这里能够用SVG，看图：

先介绍咱们组的一个PS插件svgArtisan（该工具还没主页，暂时放在云盘），这个工具能够直接根据PSD的路径图层生成SVG图形。
接下来就简单了，先用插件生成线条的SVG，例如是这样的：

<svg version="1.1" baseProfile="full" id="m3path" height="200px" width="246px">
    <switch>
        <path stroke="rgb( 130, 220, 218 )" stroke-width="1px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
         d="M0.065,45.761 C0.065,45.761 206,0 206,0 C206,0 242.5,52.5 242.5,52.5 C242.5,52.5 199.5,142 199.5,142 C199.5,142 246,200 246,200  "/>
         <foreignObject>
            <div class="m3-svg-nosupport"></div>
        </foreignObject>
    </switch>
</svg>

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

#m3path{stroke-dasharray: 1000;stroke-dashoffset: 1000;}
.active #m3path{animation:dash 2.5s 1s linear forwards 1;}
@keyframes dash {
   to {stroke-dashoffset: 0;}
}

效果不难吧！SVG还有各类用途，例如制做ICONFONT等，能够深刻挖掘。

TIPS4 重力陀螺仪

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

<div class="parallax-obj">
    <div class="layer ele-p1" data-depth="1.00"></div>
    <div class="layer ele-p2" data-depth="0.80"></div>
    <div class="layer ele-p3" data-depth="0.30"></div>
    <div class="layer ele-p4" data-depth="0.30"></div>
    <div class="layer ele-p5" data-depth="1.10"></div>
</div>

最后只须要调用：$(‘.parallax-obj’).parallax();就一切OK了。

TIPS5 背景音乐&音效

H5页面要炫酷，画面生动仍是不够的，必定要配合生动的音乐。所以能够主动跟设计或产品沟通，让他们能够提供音乐资源，分分钟致使UV猛涨有木有！
固然，有了音乐，前端也不是直接引用的，仍是有点要求：
1.音乐不宜过长，30s为佳，并且音乐要加上渐现渐隐效果，方便循环播放；
2.音乐体积要小，音质和流量，在手机上仍是优先考虑流量吧。
通常背景音乐体积能够接受的范围是200K如下，若太大，可使用格式工厂等软件，下降它的比特率和声道来改变体积。

接着，只须要简单引用：

<audio id="audio" src="音乐地址" loop preload="auto" autoplay="true" class="hide"></audio>

这里有个问题，ios是不能自动播放音乐的，必定要触发一个用户交互事件，例如点击，可是有一种自创的hack方法能够规避：
经过new一张图片，监听一张图片的onload事件，结束后回调执行音频播放audio.play()便可，原理估计是动了dom结构，至关于执行了一次交互。
最后，记得暴露一个音乐关闭/打开的按钮，否则确定被用户骂死(°ﾛ°٥)。

TIPS6 有趣的loading

Loading页仍是要有的，万一用户网速慢呢？
以上作了那么多事，若是没有资源加载都是玩不来的，所以还须要一个loading的支持。
然而loading仍是能够作得颇有趣的，通常的作法是：
1.引入品牌，例如APP宣传页；
2.引入有趣动画，放一个贱贱的人物跳舞给你看；
3.一切从简，用CSS3简单动画。

＝＝＝＝＝＝＝
休息区
说了那么多，来个例子吧（电脑上用Chrome模拟手机打开）：
查看DEMO

这是空间5.0预定页第二版，使用了以上的若干方法论，例如loading动画，CSS3动画，SVG星空连线，首屏星球重力感应，音乐（这里使用开启按钮后播放）等等。
（因为活动已结束，不少运营处都被删掉从简了，忽略那些细节）

在继续看下面的文字（页面优化技巧）以前，先问一个问题，若是仍是感到页面很无趣怎么办？
这里提供一些工（gan）具（huo）吧：
1.SPARK动画平台，这是咱们组作的一个动画效果平台，里面集合了全部的牛逼动画，可让你灵感猛增！（目前已开放外网使用）；
2.OneDiv，这是个神奇的网站，里面的全部细节都是用一个div元素经过复杂的Css3实现的，有空能够去开开脑洞噢；
3.贝塞尔曲线生成器，动画速率太平怎么办？果断使用贝塞尔曲线来调节动画，这个网站能够帮你生成可视化的曲线。
还有各类神奇工具，还待大家本身发掘，我就不所有列出鸟。

固然，真正要作到高效制做动态H5页面，仍是靠积累，所以平时作好的细节动画本身都积累起来，下次分分钟就能用得上。
//顺便卖个关子，最近正在作一个神奇的工具帮助减轻动画的制做负担，请期待哟(✪ω✪)。
＝＝＝＝＝＝＝

继续下文，是一些页面的优化细节技巧，这很关键噢！

TIPS1 动画雪碧图

涉及的动画十分多，用的元素也十分多，请务必使用雪碧图（Sprite）！
网上的工具十分多，例如涛哥（ytzong）的CssGaga，AlloyTeam的GoPng等等，自动化构建工具Grunt和Gulp也提供了相应插件。
这里要提一下的是若是页面图片实在太多，能够分雪碧图，例如分红1-3张，由于三张图片是能够同时加载的，这里牺牲多2个请求换来图片同时加载比一张图片慢慢加载要好。
顺便提一下，我写动画的方法是每一页的动画分在一个import.css里面，而后最后在主样式中import进去，这样方便调试动画，也容易区分雪碧图，例如：

//style.css
@import url("reset.import.css");
@import url("loading.import.css");
@import url("m-animate-1.import.css");
@import url("m-animate-2.import.css");
@import url("m-animate-3.import.css");

TIPS2 图片压缩

图片压缩是老生常谈，可是仍然有很多人忘记压缩，那但是活生生的带宽和流量浪费啊…
压缩图片须要有好工具，这里推荐咱们作的一个工具智图，相关介绍请看ISUX官博文章。
可是仍然有如下方式优化图片：
1.尽可能避免用PNG24。若是图片色彩要求不高，请使用PNG8；
2.使用新格式，WEBP和BPG等新格式的到来，在不用考虑兼容的状况下请大胆尝试；
3.用SVG和ICONFONT代替简单的图标；
4.用糖饼和FUFU的字蛛来代替艺术字体切图。

TIPS3 多终端兼容

多终端兼容是一切的根基，要知道有人拿着肾6+，有人拿着肾4，大则414x736，小则320x416（IPHONE4在SAFARI保留上下端导航），所以多终端兼容是十分必要的。
曾经有一种派系为320派系，就是大部分页面都是320宽度，所以干脆直接用320的容器来包一切页面，那样也简单，然而IPHOEN6和IPHONE6+的出现简直是灭了这个派系。
那么到底要如何兼容呢？
这里我分了三个时期来讲说：
（1）设计初期。先审视设计稿，由于320派系的缘由，大部分设计稿只考虑到IPHONE5来设计，所以不少背景元素是只有320px宽度（页面实际渲染宽度），例以下图。

那么，这时候就须要设计提供一个较长的延伸背景了，最好是能够重复的，用background-repeat能够减小图片大小。
（2）设计中期。也就是具体的兼容方法，可使用CSS3 Media Query和类覆盖。
1.CSS3 Media Query，按范围兼容机型。

/*iphone6*/
@media only screen
    and (min-device-width : 375px)
    and (max-device-width : 667px)
    and (orientation : portrait)
    and (-webkit-min-device-pixel-ratio : 2)
{
    .page6 .ele-building{top: 69px;}
    .page6 .ele-runner{top: 100px;}
    .page6 .ele-pophome{top: 16px;}
}

2.类覆盖，这种方式适合直接为小屏或大屏作总体兼容。

首先，为小屏（大屏）加一个识别类，这里小于420表示为小屏幕（IPHONE4有上下导航栏）：

var bh = $(window).height();
// 480 - 64 = 416 iphone4
if(bh<420){
    $('body').addClass('low-screen');
}

而后，对应识别类加上要变更的元素，例如：

.page6 .ele-bg{top: 10px;}
.low-screen .page6 .ele-bg{top: 0px;}

（3）设计后期。这是最后一步，总体检查和体验，这里面会暴露一些问题，例如元素在IPHONE6P显得小了或者元素在IPHONE4挤不下了，能够来最后大招解决：

1.大屏适当用zoom:倍率或者transform:scale(倍率)来增大元素，实测失真根本看不出来，设计师也满意（毕竟不用多作一张图( • ̀ω•́ )）；
2.小屏适当去掉一些元素，例如一些翻页提示，一些多余图标，可让优雅降级，把它们 display:none掉。

有以上几步，基本就能兼容大部分机器了。兼容一直是个苦活，可是这是前端必修课，多练就会发觉其实也没有那么难嘛。

TIPS4 交互提示

前面说了，加了音效就要加上音乐切换开关的按钮，否则用户会骂死。还有其余，例如若是你的页面不能兼容横屏，请监听横屏状态，而后加上适当的横屏提示。
例如：

// 横屏监听
var updateOrientation = function(){
    if(window.orientation=='-90' || window.orientation=='90'){
        $('.landscape-wrap').removeClass('hide');
        console.log('为了更好的体验，请将手机/平板竖过来！');
    }else{
        $('.landscape-wrap').addClass('hide');
        console.log('竖屏状态');
    }
};
window.onorientationchange = updateOrientation;

提示越多，界面越友好，有时候设计师会漏掉一些可能出现的页面状况。做为有态度的前端，请好好把关，让用户有好的体验。

TIPS5 分享接口

H5作好了，要传播分享才能展现你的牛逼轰轰呀。然而分享一切是个坑，分享到微信、手Q、空间、微博等都有各类问题，为此我还写过一篇文章《HTML5页面分享功能》，里面有各类方法。
然而最近微信开放了微信API，分享功能愈来愈牛逼了，相信往后分享的坑会愈来愈少。

TIPS6 seo和无障碍

SEO（搜索引擎优化）是个长谈啊，但基本的作法是写好meta标签，写好页面结构（H1-H6的层级树），用好语义化标签等等。
至于无障碍，是我薄弱的环节，还请Google黄老师（stonehuang）的各类文章，也但愿各位前端能把这一块好好认识一下，并用于各产品。
其实分享接口，SEO，还有无障碍都基于良好的html结构，这是玩转页面的基础。

最后，罗嗦了这么多，只是我本身的一些小经验，请轻拍砖，多交流。再次感谢你的阅读。