H5移动端页面制作技巧，都看疯了！ _生活知道

今天跟大家一起絮叨一些H5前端页面制作技巧，一般人不会说出来的移动前端动画技巧哦，看完之后你会发现许多非常有用的动画处理技巧。哈哈
一般情况下，拿到设计稿我们会有两种选择：
来一个条件表达式哈哈：产物=设计稿处理？静态输出：让页面动起来；
作为一个有志向的前端，当然不会让页面生硬地静态展示咯，但是如果需求时间很短，应该如何破呢？
下面这些小技巧可以让你在没有想法的时候，让你的页面生动不少（喜欢做雷锋的我，不必感谢）
NO1：CSS3时序错开渐显动画
这是一种比较常用的动画，它的优点节奏感强，做法就是先让每个元素隐藏，然后当页面呈现后每个元素错开时间出现。
For example：（请忽略浏览器私有属性）
.box1,.box2{opacity:0;position:absolute;left:50%;translate3D(-50%,0,0);}
.box1{top:30px;}
.box2{top:50px;}
/*active为当前页面呈现时加上的触发类*/
.active .box1,
.active .box2{animation:ele-show .5s linear forwards;}
.active .box1{animation-delay: .2s;}
.active .box2{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）移动端web页面横向看，为了让掉下来的动画生动点，应该在90%的时候先掉下一点点，然后瞬间在100%时回跳5px 。
注意这里还有一个细节，安卓2.3.*不能良好支持-webkit-animation-fill-mode，也就是渐变动画不能停止在最后一帧。有这样一个解决方案：
1.用Modernizr去检测是否支持这个属性，加上识别类.no-animation-fill-mode；
2.根据识别类采取以下措施：
（1）用JS模拟同样效果；
（2）用css屏蔽掉动画；
（3）或者直接全部都用transition来做（不要keyframes）
NO2：CSS3细节强调动画
有些局部细节如果还是渐现显示的话，会比较枯燥，例如标题、按钮等，需要一种强调，下面我们分两种情况来说：
如果时间允许的话，基本做法是先把一个元素切成不同的块状，例如小人的手脚都切成不同图片，然后让它们重新组合，再通过赋予不同的CSS动画来让它生动起来。
如果时间紧凑，对动画细节要求不那么严格细致，可以使用一些辅助工具：Animate.css，通过直接预览选择想要的动效，然后下载它的CSS把对应keyframe扒下来就好了。
【H5移动端页面制作技巧，都看疯了！】NO3：SVG动画
SVG技术现在越来越不陌生，使用门槛渐渐降低，然后它也是可以使用CSS控制的，有时候用CSS3比较难实现的线条的描绘动画，也可以用SVG来搞定。
NO4：背景音乐&音效
H5页面要炫酷，画面生动还是不够的，一定要配合生动的音乐（可以跟产品沟通提供对应的音乐资源）。当然有了音乐资源我们是否可以直接引用呢，有几点还是要优化一下：
音乐不宜过长，最好30s左右，最好加上渐现渐隐效果，方便循环播放；音乐体积（一般200K以下都可以接收）最好要?。?在手机浏览的话要考虑流量啦。
在这里需要注意：ios系统是不能自动播放音乐的，一定要触发一个用户交互事件，例如点击，有一种自创的hack方法可以规避：
通过new一张图片，监听一张图片的onload事件，结束后回调执行音频播放audio.play()即可，原理估计是动了dom结构，相当于执行了一次交互。最后，记得暴露一个音乐关闭/打开的按钮，不然肯定用户哪里找得到按钮。
NO5：有趣的loading
Loading页还是要有的，万一用户网速慢呢？
以上做了那么多事，如果没有资源加载都是玩不来的，因此还需要一个loading的支持。
然而loading还是可以做得很有趣的移动端web页面横向看，一般的做法是：
1.引入品牌，例如APP宣传页；
2.引入有趣动画，放一个贱贱的人物跳舞给你看；
3.一切从简，用CSS3简单动画。
当然，真正要做到高效制作动态H5页面，还是靠积累，因此平时做好的细节动画自己都积累起来，下次分分钟就能用得上。小编会不定时更新前端相关的知识，有兴趣的话欢迎大家加群142991222一起讨论交流学习。
本文到此结束，希望对大家有所帮助！

H5移动端页面制作技巧，都看疯了！

猜你喜欢