一個簡單的滑動動畫廣告項目

公司接了一個當下很火熱的，網上有各類模板和造好輪子付費使用的滑動廣告的項目。
網上的模板大部分相似於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天，結果由於需求變更和各類各樣的緣由，整個項目花了五天時間才完成並部署上線，中間學到了不少，特此寫下心得，供之後的本身參考。