利用Tween实现轮播动画

简介：

之前在两个项目的开发过程中都遇到轮播动画，因此，今天结合自己的开发经验进行一定的分享，下面是自己用vue做的一个简单的demo。这个例子的实现主要用的是TweenMax插件+scrollTop实现的。下面的Gif是实现的效果。

html：

css：

为了让轮播效果更加自然，隐藏了滚动条。此外，这里安利一个css属性object-fit，主要用于img标签中图片的定位。本文在demo中设置了图片的宽高均为100px，但是很显然图片不是正方形的。如果只是单纯的设置宽度和高度，则图片会被变形。如果只设置宽度或者高度，则不好掌控另一边的尺寸。在实际开发中，可能更多会用到在img标签外面再包一层div，再对图片居中设置。但是，object-fit这个属性可以轻松解决这个问题。更加详细的用法可以参见张鑫旭老师的这篇博客https://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/

javascript：

我在该例子中设置的滚动时间为0.75s，间歇时间为3s。

TweenMax是一个强大的动画插件，可以提供高级时间曲线。项目中常见的数字变化特效也可以用该插件来实现。具体的使用方式，这里不再赘述，主要是讲一下实现的思路。

通过TweenMax.to方法，将滚动框这个元素的滚动条高度设置为100px（刚好为滚动一个元素的高度），滚动时间scrollTime设置为0.75s，时间曲线设置为Power0.easeNone（平滑滚动，也可自行设置其他曲线方式）。同时，这是onComplete回调函数，在滚动结束时，将滑上去的那个元素，即第一个元素添加到队列末尾。此时滚动条的位置肯定会发生变化，但是由于隐藏了滚动条，因此视觉上看不出变化。随后再调用setTimeout，设置间隔时间，再开始下一轮的滚动。

 

其实，个人觉得这种频繁操作的dom的方式不是很好。随后，考虑了另一种方式：只改变data的队列顺序来实现轮播效果，思路是删除并存储第一个元素，再将其push到队列末尾。

优化后的代码：

相信还会有其他方式实现轮播，欢迎讨论！