利用Tween实现轮播动画

素颜马尾好姑娘i 2021-11-04 22:50 405阅读 0赞

**简介：**

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

![2019080719042355.gif][]

html：

![20190807190952133.png][]

css：

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pY2hhZWw4NTEy_size_16_color_FFFFFF_t_70][]

javascript：

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pY2hhZWw4NTEy_size_16_color_FFFFFF_t_70 1][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pY2hhZWw4NTEy_size_16_color_FFFFFF_t_70 2][]

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

优化后的代码：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pY2hhZWw4NTEy_size_16_color_FFFFFF_t_70 3][]

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

[2019080719042355.gif]: /images/20211104/e23bb9d33ad6425cbbc894e839f00839.png
[20190807190952133.png]: /images/20211104/6957025efd5e4bc285c79fd65682c0d2.png
[https_www.zhangxinxu.com_wordpress_2015_03_css3-object-position-object-fit]: https://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pY2hhZWw4NTEy_size_16_color_FFFFFF_t_70]: /images/20211104/84a8f0d26d654e7898df1510a8551844.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pY2hhZWw4NTEy_size_16_color_FFFFFF_t_70 1]: /images/20211104/2acda395a11748448af79ad9ff2cba59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pY2hhZWw4NTEy_size_16_color_FFFFFF_t_70 2]: /images/20211104/48566586a43f4c63acd27946f876051c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21pY2hhZWw4NTEy_size_16_color_FFFFFF_t_70 3]: /images/20211104/7e20c8333cbc4be6a22b0da1e56ebff3.png