那些H5用到的技术（3）——屏幕场景滑动

前言
Swiper.js
一些需要我们手动设置的参数
排版元素需要设置position:absolute绝对元素定位
swiperAnimate方法的使用
动画播放完成之后的监听
上滑提示
屏幕适配的问题
Animate.css
stylie
velocity.js
总结

前言

现在已经有许多公司开发了各种在线H5制作工具平台，可以快速制作简单的移动端H5页面，主要还是展示营销，我随便百度了一个，效果看起来如下所示：

瞬间高大上的感觉有没有，但是这类的的工具一般交互都比较简单，大多都只是基本的滑动特效，好处就是可以快速的将设计稿转化，虽然也需要切图上传排版，但总比代码手动调整的好，而且全程可视化操作，缺点是很难做到深度互动，而源码基本都是加密的，导出使用还挺麻烦，所以要嘛付费高级版，要嘛定制，这样沟通和制作成本都会变高，考虑到公司内部以后会经常用到一些H5，索性自己研究一番，后面可以考虑弄成通用模板。

查了许多资料，目前绝大多数H5都是基于swiper.js！！！

Swiper.js

官方地址：https://github.com/nolimits4web/Swiper
国内地址：http://www.swiper.com.cn/
当然swiper不仅仅可以用户移动网站，目前很多PC端企业官网动态效果也都可以基于此插件实现，类似的还有FullPage.js

官网网站里面已经有很详细的教程了，参考示例使用即可，下面我主要讲一些开发过程中遇到的坑。

一些需要我们手动设置的参数

1、swiper-container的width和height
一开始用的时候会发现代码按照教程设置好了，但是滑动的时候怎么会漂移，而且样式怪怪的。
这个时候需要我们主动设置width和height

  1.     .swiper-container {
  2.         width: 100%;
  3.         height: 100%;
  4.         left: 0%;
  5.         top: 0%;
  6.         margin: 0;
  7.         border-radius: 0px;
  8.         position: relative;
  9.         /*background-color: rgba(0, 0, 0, 0.5);*/
  10.     }

2、direction: 'vertical'
默认情况是横向滑动的，而我们手机一般是竖着滑动的

排版元素需要设置position:absolute绝对元素定位

默认swiper的css中.swiper-slide样式已经设置成了position:relative，每个页面的元素当然是需要以父级为基准显示，所以每个页内元素都要设置成position:absolute，这样就可以通过绝对定位来按照设计稿排版了。

在CSS中关于定位的内容是：
static(静态) 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。
relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。
absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
fixed（固定定位） 这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

swiperAnimate方法的使用

默认情况下，swiper是不会自动播放动画的，当设置好动画效果attribute之后

  1. swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"

还需要调用swiperAnimate才会读取执行，所以需要在onSlideChangeEnd事件里主动调用此函数。
或者你需要重新执行动画效果，都可以调用此函数。

动画播放完成之后的监听

有时候我们需要连贯的动画效果，比如，淡入之后，播放另外一个动画，首要任务就是监听动画完成事件

代码如下：

  1. //one仅执行一次，on永久绑定
  2. $('.swiper-slide:eq(0) img').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
  3.     $(this).removeClass('animated fadeInUp bounceInRight');
  4.     $('.swiper-slide:eq(0) img').addClass('animated tada');
  5. });

其实类似的这样连贯的动效可以不用代码做什么监听，我这么做的主要原因是，动画效果直接用animate.css的即可，否则自己写效果也很麻烦，好在已经有开源在线工具可以编辑动画导出css了，见下文

上滑提示

默认情况只有pagination分页器，就是下面的小圆圈，swiper还自带了几个样式。

所以这个提示是需要我们自己敲代码的，见demo，样式如下

屏幕适配的问题

这是一个比较棘手的问题，根据我经验来说，解决方案有3种，各有利弊，当然也可以混合使用。
1、百分比响应式
这是我经常采用的方案，可以实现动态自适应，让浏览器自己计算，比较适合全都是图片的情况。理论上只要高宽比正确，元素就不会跑偏或拉伸。
如果高宽比不一致，我会在js里计算好比例，先设置body的max-width和max-height，然后按比例通过高度计算设置body的height和width（因为一般都是屏幕过宽），除非有横竖屏切换

2、rem
通过@media only screen and (max-width)来指定机型，自行计算设置相应的rem即可实现自适应，而且字体也可以根据rem值设置大小，理论上只要花够时间做适配，可以100%适配所有机型。

3、transform
和viewport的原理一样，而viewport进行缩放是对整个可视区的缩放，所以高宽比是不能变的。
而transform是针对内部每个元素，进行缩放，会根据原始比例自动拉伸高宽，其中还包括文字。
参考代码如下（摘自swiper官方示例）：

  1. scaleW=window.innerWidth/320;
  2. scaleH=window.innerHeight/480;
  3. var resizes = document.querySelectorAll('.resize');
  4.           for (var j=0; j<resizes.length; j++) {
  5.            resizes[j].style.width=parseInt(resizes[j].style.width)*scaleW+'px';
  6.            resizes[j].style.height=parseInt(resizes[j].style.height)*scaleH+'px';
  7.            resizes[j].style.top=parseInt(resizes[j].style.top)*scaleH+'px';
  8.            resizes[j].style.left=parseInt(resizes[j].style.left)*scaleW+'px'; 
  10.           }
  11. var scales = document.querySelectorAll('.txt');
  12. for (var i=0; i<scales.length; i++) {
  13.     ss=scales[i].style;
  14.     ss.webkitTransform = ss.MsTransform = ss.msTransform = ss.MozTransform = ss.OTransform =ss.transform='translateX('+scales[i].offsetWidth*(scaleW-1)/2+'px) translateY('+scales[i].offsetHeight*(scaleH-1)/2+'px)scaleX('+scaleW+') scaleY('+scaleH+') ';
  15. }

Animate.css

官方地址：https://daneden.github.io/animate.css/
swiper的默认动画就是用的Animate.css，里面的效果非常多，但仅仅是一些简单的特效而已，那如何快速根据需求制作出自己的动画效果呢？它就是stylie！

stylie

官方地址：http://jeremyckahn.github.io/stylie/
可视化的动画编辑器，添加关键帧即可，但是这也仅仅是单一动画的制作。

有时候为了达到更好的效果，确实需要在H5上播放动画（视频和gif都不考虑），用上面的工具+切图+写代码要搞死前端开发！
好在已经有同学分享了经验，参考《H5动画开发快车道》
原理就是通过Animate CC导出html，然后我们再引用，这样就可以由设计人员直接导出给前端接入即可，方便你我他。

velocity.js

官方地址：http://velocityjs.org/
有时候我们还有这样的需求，动态计算设置动画，stylie是预先生成好的，直接设置CSS工作量又非常的，jquery本身自带animate方法，但是效率实在太低，手机上卡顿情况严重，velocity.js就派上用场了，当然，通也可以使用它通过简单的代码快速实现动画特效。

velocity.js 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，并和$.animate()有相同的 API， 但它不依赖 jQuery，可单独使用。 Velocity 不仅包含了$.animate()的全部功能， 还拥有：颜色动画、转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画 等特色功能。

它比$.animate()更快更流畅，性能甚至高于 CSS3 animation， 是 jQuery 和 CSS3 transition 的最佳组合，它支持所有现代浏览器，最低可兼容到 IE8 和 Android 2.3。

原理简单来说，就是velocity.js没有使用到css的 transition，而是用requestAnimationFrame通过js代码来控制动画

总结

通过swiper.js再加上前面的代码结合在一起，我们基本就实现了一个完整的H5展示页面，包括素材加载，背景音乐播放，页面滑动。到目前为止，其实我们大多数时间都在写业务逻辑的代码，轮子什么的早都已经有现成的了，真感谢开源的世界，人人为我，我为人人，极大促进了科技的进步呐，正所谓站在巨人的肩膀上，后面有空也许我会基于此框架写一个本地的H5编辑器，也开源贡献出来。

demo地址：
https://github.com/leestar54/h5-demo/blob/master/swiper.html

posted @ 2017-03-01 21:11  leestar54  阅读(4467)  评论(1)  编辑  收藏  举报