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

公司接了一个当下很火热的,网上有各种模板和造好轮子付费使用的滑动广告的项目。
网上的模板大部分类似于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天,结果因为需求变动和各种各样的原因,整个项目花了五天时间才完成并部署上线,中间学到了很多,特此写下心得,供以后的自己参考。

    原文作者:______solution
    原文地址: https://segmentfault.com/a/1190000007701526
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞