一个简单的滑动动画广告项目

公司接了一个当下很火热的，网上有各种模板和造好轮子付费使用的滑动广告的项目。
网上的模板大部分类似于PPT，而且文字量很大，大部分都是文字的淡入/淡出效果，想做一个稍微复杂点的。

研究了一下，采用了swiper.js+animate.css的方案，而swiper.js的官网上正好有Swiper Animate这个小插件，支持在Swiper内快速制作CSS3动画效果，完美！

研究了一下官网提供的示例（http://www.swiper.com.cn/usag...），其核心是，在slide内的元素的类名加上'ani'，然后加入几个动画的属性值，然后提供两个方法swiperAnimateCache()和swiperAnimate()，供swiper初始化和页数滑动是触发动画。其中核心方法是swiperAnimate()，笔者猜测方法里应该是先取出本slide里的所有类名含有'ani'的元素，运用jq的data方法取出动画的三个属性值，然后加上以触发css3动画。

由于整个项目的所有图片+音乐加一起总共有6M之大，所以必须要加入loading动画才行。去github上搜到了imagesloaded这个库，功能很强大，可以监测img标签的载入，也能监测div的背景图片的载入，用JQ选择所有的图片类，加入一个imagesLoaded方法就搞定了。

问题出现了，由于之前的swiper类是加载完成就直接开始播放动画，所以在loading隐藏后，首页的动画就播放的差不多了，怎么样让swiper知道在loading完后再播放动画呢？

示例中提供的swiperAnimate()的方法中有一个swiper参数，console.log出来后发现跟swiper实例本身包含的方法和属性相似，所以写出代码

mySwiper.Init = function () {
    swiperAnimate(this); 
};

将动画播放代码独立成一个函数，在初始化时不执行，在loading结束后执行。

这样写完后发现动画还是照旧，然后发现首次进入页面，依然会触发一次onSlideChangeEnd事件，所以加入判断，如果非第一次进入第一页，且页数不为1时，触发动画，任务完成！

多设备的匹配，一开始采用的是flexible方案，这是之前的程序员留给我的方案，我之前没有仔细思考过实现，就按照他的方法使用了下来，后来发现在各种设备上呈现的效果千奇百怪。然后去翻了flexible的文档，发现其大概是一种仿vw的实现方式，就是监测当前设备的宽度，然后除以10，写在body的font-size属性里，这样就可以用rem模仿vw使用了。这种匹配方式用在web app里是合适的，里面有合适的文档流和浮动可以很方便的完成效果，对比例的要求也不高。可是在本项目中，需要适配的是一张张铺满全屏的图片。研究了一会MDN后，我把所有图片的background-size属性改为100% 100%填充满DIV，然后$('.swiper-container').css({"width": document.body.clientWidth, "height": document.body.clientHeight})将div铺满屏幕，后面的定位通过百分比完成，完成了多设备的适配工作，这样做的缺点是在大屏环境下，如PAD，PC端会铺满窗口，很丑，不过这次的应用场景主要是微信端，还做了微信登录验证，所以就忽略了。

最后是一个小bug，swiper虽然铺满了屏幕，可是右边会留下一条白边，如果往右拉是能看到白边的，我通过hammer.js取消了panleft和panright的动作，解决了这一问题。

当初给自己的时间是2天，结果因为需求变动和各种各样的原因，整个项目花了五天时间才完成并部署上线，中间学到了很多，特此写下心得，供以后的自己参考。