无缝滚动 & 无缝轮播实现原理

findxc commented 3 years ago

先剧透，都是用 translate 属性来进行移动来实现的。

你想无缝滚动和无缝轮播其实都是内容区域的移动对吧。

再剧透，都会把原先的内容 copy 一份接在后面来实现无缝，因为如果你只是单纯移动，那移动到尾部了就会有空白了。

translateY(-100%)

translateY(-100%) 的效果如上图所示，如果只是这样来滚动会有空白出现，不是无缝的。

通过在 A 下面跟一个同样的 A'，这样往上滚动时就不会有空白啦。

通过 animation 来实现动画即可。如果想实现鼠标移上去时停止移动的效果，加上 animation-play-state: paused; 即可。

无缝轮播其实就是最外层的左移和右移了。但是要注意初始位置，第一个元素如下图所示，这样才能在初始时进行右移，否则一旦右移就是空白了。

先看左移的拆解如下。关键步骤是，在显示 A' 的动画结束后，要将 transition 的时间设为 0 然后整体移动让 A 到 A' 上，这样视觉上没有变化，但是实际已经整体移动了。

右移的话其实是类似的，如下所示。

如果需要实现无缝轮播效果可以直接使用第三方库，省事 ~

hh1123456 commented 3 years ago

react-slick这个库好用吗现在，我看已经很久了

findxc commented 3 years ago

@hh1123456 可以写个 demo 测试一下看满足你们场景不。我们因为有用 antd ，就是直接用的 Carousel 组件就 ok 了。看了下 Carousel 背后是用的 @ant-design/react-slick 这个库，可能是基于 react-slick 做了一些自定义。

GrammyLi commented 3 years ago