教你如何用VUE实现一个无缝横向滚动抽奖的效果

最近一位安卓端同事想要实现一个效果如下图，我们先看如下图：

我们看到上面想到如何实现呢？

先说下我的思路：

我先想到的是看能不能用轮播图swiper插件实现，试了下发现自己行不通，原因不是在于插件问题，在于你要很熟悉swiper 那些apis，然后再结合一些动画效果。最后看到自己还没明白实现原理，就开始想通过调用插件api去实现，结果行不通，所以后面试了一阵子，就放弃了，也许它是可以实现的。
然后我就想到之前做得一个老虎机，感觉它很像老虎机中效果，只不过老虎机一般是有三列的，而且是纵向的。我们可以先看下老虎机的效果：

看了上面的gif图之后，是不是有点灵感了？

没错，我们动态效果也是跟上面的很像，我们只用实现一列就行，而且我们是要实现的是横向的。那么我们该怎么实现的，看了下我之前老虎机的代码：

+

发现它是用jq写的，用的是 jQuery Easing插件实现，但是里面的实现原理也是有点懵逼，加上自己想用vue实现，在vue里已经jq也不太合适。

借助自己又借助AI模型捣鼓了一段时间，还是没有思路，所以自己才开始想着实现的原理。首先它需要实现这两种效果：

1. 横向无缝滚动奖品
2. 动态滚动效果：慢-快-慢

自己的思路：

横向无缝滚动是不是要监听奖品列表中最后一个奖品快要离开右边框之后，再追加一组重复的奖品列表，实现横向无缝滚-动呢？自己想了下有点麻烦，就没有继续想下去。
动态滚动效果：可以借助贝塞尔曲线实现

在自己没什么具体思路的时候，自己在网上搜到了一个解决方案：是一位作者用uni-app实现的老虎机的效果，刚好的uni-app的语法跟vue差不多，所以很多思路都可以得到借鉴。

好了，怎么实现这个横向滚动呢？

为了实现横向无缝滚动奖品，作者提前放了多组重复奖品列表，比如原先奖品列