摘要：公司接了一個當(dāng)下很火熱的，網(wǎng)上有各種模板和造好輪子付費(fèi)使用的滑動廣告的項目。其中核心方法是，筆者猜測方法里應(yīng)該是先取出本里的所有類名含有的元素，運(yùn)用的方法取出動畫的三個屬性值，然后加上以觸發(fā)動畫。

公司接了一個當(dāng)下很火熱的，網(wǎng)上有各種模板和造好輪子付費(fèi)使用的滑動廣告的項目。
網(wǎng)上的模板大部分類似于PPT，而且文字量很大，大部分都是文字的淡入/淡出效果，想做一個稍微復(fù)雜點的。

研究了一下，采用了swiper.js+animate.css的方案，而swiper.js的官網(wǎng)上正好有Swiper Animate這個小插件，支持在Swiper內(nèi)快速制作CSS3動畫效果，完美！

研究了一下官網(wǎng)提供的示例（http://www.swiper.com.cn/usag...），其核心是，在slide內(nèi)的元素的類名加上"ani"，然后加入幾個動畫的屬性值，然后提供兩個方法swiperAnimateCache()和swiperAnimate()，供swiper初始化和頁數(shù)滑動是觸發(fā)動畫。其中核心方法是swiperAnimate()，筆者猜測方法里應(yīng)該是先取出本slide里的所有類名含有"ani"的元素，運(yùn)用jq的data方法取出動畫的三個屬性值，然后加上以觸發(fā)css3動畫。

由于整個項目的所有圖片+音樂加一起總共有6M之大，所以必須要加入loading動畫才行。去github上搜到了imagesloaded這個庫，功能很強(qiáng)大，可以監(jiān)測img標(biāo)簽的載入，也能監(jiān)測div的背景圖片的載入，用JQ選擇所有的圖片類，加入一個imagesLoaded方法就搞定了。

問題出現(xiàn)了，由于之前的swiper類是加載完成就直接開始播放動畫，所以在loading隱藏后，首頁的動畫就播放的差不多了，怎么樣讓swiper知道在loading完后再播放動畫呢？

示例中提供的swiperAnimate()的方法中有一個swiper參數(shù)，console.log出來后發(fā)現(xiàn)跟swiper實例本身包含的方法和屬性相似，所以寫出代碼

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

將動畫播放代碼獨(dú)立成一個函數(shù)，在初始化時不執(zhí)行，在loading結(jié)束后執(zhí)行。

這樣寫完后發(fā)現(xiàn)動畫還是照舊，然后發(fā)現(xiàn)首次進(jìn)入頁面，依然會觸發(fā)一次onSlideChangeEnd事件，所以加入判斷，如果非第一次進(jìn)入第一頁，且頁數(shù)不為1時，觸發(fā)動畫，任務(wù)完成！

多設(shè)備的匹配，一開始采用的是flexible方案，這是之前的程序員留給我的方案，我之前沒有仔細(xì)思考過實現(xiàn)，就按照他的方法使用了下來，后來發(fā)現(xiàn)在各種設(shè)備上呈現(xiàn)的效果千奇百怪。然后去翻了flexible的文檔，發(fā)現(xiàn)其大概是一種仿vw的實現(xiàn)方式，就是監(jiān)測當(dāng)前設(shè)備的寬度，然后除以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鋪滿屏幕，后面的定位通過百分比完成，完成了多設(shè)備的適配工作，這樣做的缺點是在大屏環(huán)境下，如PAD，PC端會鋪滿窗口，很丑，不過這次的應(yīng)用場景主要是微信端，還做了微信登錄驗證，所以就忽略了。

最后是一個小bug，swiper雖然鋪滿了屏幕，可是右邊會留下一條白邊，如果往右拉是能看到白邊的，我通過hammer.js取消了panleft和panright的動作，解決了這一問題。

當(dāng)初給自己的時間是2天，結(jié)果因為需求變動和各種各樣的原因，整個項目花了五天時間才完成并部署上線，中間學(xué)到了很多，特此寫下心得，供以后的自己參考。