React实现轮播的一种思路

在 Jquery 时代,实现轮播的基本思路是第一帧与最后一帧使用相同的元素,播放至最后一帧的时候,不使用动画效果切换到第一帧,形成轮播的效果。

但还有别外一种思路,不需要额外复制元素,更多是的通过样式控制。让我们分析下一个完整轮播所经历的过程与所处状态,如下图。

轮播的状态与过程

上面中,center 代表可视区,left 与 right 代表隐藏区(使用样式使用元素停放在不同区域,所以left  center  right也代表三种样式)。我们将一个元素放置于 right 隐藏区,分析他在一个轮播的生命周期内的状态变化。

  1. Entering (入场动画),第一帧,元素从 right 隐藏区进入 center 可视区(从right样式切换到center样式)。
  2. Leaving (出场动画),第二帧,元素从 center 可视区进入 left 隐藏区(从center样式切换到left样式)。
  3. Resetting (还原),第三帧,元素从 left 隐藏区进入 right 隐藏区(从left样式切换 right样式),为下一次轮播做准备。这一帧用户不可见,所以不需要动画效果。

上面三个步骤,就是一个轮播的生命周期。

在实际业务中,一般需要三个或以上的元素才能构建出完善的轮播效果。我们以三个元素为例,分析在一个动画帧中,元素在三个区域的分部情况。假设我们有三个图片元素:img[0] img[1] img[2],以及一个外部指针ptr,指向应该被显示的元素,也就是应该在 center 可视区的元素,下面列表给出了当ptr指定不同下标时,各元素的样式使用情况。

  1. ptr -> img[0]:img[2].left img[0].center img[1].right
  2. ptr -> img[1]:img[0].left img[1].center img[2].right
  3. ptr -> img[3]:img[1].left img[2].center img[0].right

总结起来,当前元素使用 center 样式,当前元素的上一个元素使用 left 样式,其它元素使用right 样式。使用定时器,不断切换ptr的指向,然后样式加入适当的transition属性,就形成了最终的轮播效果。

以下是使用 React 实现轮播的主要逻辑代码,使用 getClassName计算元素的样式。使用闭包与取余循环生成数组下标makeInde。使用 setTimeou递归的方式实现定时器,这种实现方式不仅可以保证两帧之间的间隔不小于1000ms,而且可以减小内存溢出的概率。

演示地址://laichuanfeng.com/demo/carousel/,Github地址:https://github.com/codelegant/blog-demo/tree/master/react-carousel

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注