React 轮播动画探索

发表于 2年以前 | 总阅读数：397 次

1 . 前言

1.1. 氛围气泡需求

最近投入了一个需求，遇到一个需要用动画去实现的场景。

我们的产品大大管它叫氛围气泡，在很多应用（淘宝、抖音、bilibili）的直播间场景都会有类似这样营造氛围感的组件，能够让你感知到其他用户在当前直播间的行为。

这个东西看起来转瞬即逝的，但背后其实是基于一套和 push 通道相关的设计：

前人栽树后人乘凉，所幸大佬们把 push 消息中心 和 后台服务 都建设得很完善，所以这次开发我只需要做这么一件事情：

设置监听 push 的回调，拿到数据渲染对应组件。

1.2. 开发评估

看上去好简单！让我来简单的评估一下它的开发成本：

1.2.1. 首先看看它像啥（是否有现有组件可以复用）

这东西一进一出的，还扑棱扑棱的闪，好似一个轮播图。在公共组件库搜罗一下，找到了一个 Marquee（跑马灯） 组件，它是基于 swiper/react 去实现的。

swiper 大家都熟，一个功能非常强大且开箱即用的组件，目前已经迭代到了 v7 版本。它也支持在现代前端框架下的使用，例如说支持 React 。

在 React 中，我们可以给它初始化一堆幻灯片，让它可以滑动：

1.2.2. swiper 实践

基础示例

import SwiperCore, { Autoplay } from"swiper";
import { Swiper, SwiperSlide } from"swiper/react";

// Import Swiper styles
import"swiper/css";
import"swiper/css/navigation";
import"swiper/css/pagination";
import"swiper/css/scrollbar";
import"./styles.css";

// install Swiper modules
SwiperCore.use([Autoplay]);

const renderBubble = (bubble) => {
  const { name, wording, btnText } = bubble;
  return (
    <SwiperSlide>
      <p className="live-bubble">
        <span className="live-bubble-username">{name}</span>
        <span className="live-bubble-wording">{wording}</span>
        <span className="live-bubble-action">{btnText}</span>
      </p>
    </SwiperSlide>
  );
};

export default () => {
  const dataList = [
    { name: "李*", wording: "咨询了课程", btnText: "去咨询" },
    { name: "黄*", wording: "领取了优惠券", btnText: "去领取" },
    { name: "高*", wording: "分享了直播间给好友", btnText: "去分享" },
    { name: "刘*", wording: "领取了直播间资料", btnText: "去领取" },
    { name: "朱*", wording: "购买了直播间课程《xxx》", btnText: "去领取" }
  ];

  return (
    <div style={{ background: "#000" }}>
      <Swiper
        slidesPerView={1}
        direction="horizontal"
        onSlideChange={() => console.log("slide change")}
        autoplay
      >
        {dataList.map((item) => renderBubble(item))}
      </Swiper>
    </div>
  );
};

设置了 autoplay，可以自动播放，效果如下：

细节改造

你可能发现了，上面的示例跟想要实现的效果还差很远，我们需要的效果是：

轮播方向：从左至右
进入效果：从左到右一边移入，一边渐现
退出效果：原地不动，渐隐

接下来让我们逐个击破，改造一下 swiper。

轮播方向修改

autoplay 除了支持自动播放，还可以设置自动播放的方向。比如说，当 direction 为 horizontal 的时候，每个滑块默认是向左退出和进入的，即从右至左轮播。如果想要变成相反方向，可以这样设置：

autoplay={{
    delay: 3000,
    reverseDirection: true
}}

进入效果和退出效果

关于 swiper 切换效果的定制，官方也提供了一些切换效果相关的 api： effect 。

其中比较符合我们要求的应该是 creativeEffect，创造性的切换效果。我们目前想要定制一套渐隐退出和滑动渐现进入的效果。

我们再设置一下 swiper 的参数：

<Swiper
  slidesPerView={1}
  direction="horizontal"
  onSlideChange={() =>console.log("slide change")}
  autoplay={{
    delay: 3000,
    reverseDirection: true
  }}
  loop
  speed={3000}
  effect={"creative"}
  creativeEffect={{
    prev: {
      opacity: 0,
      translate: ['-300%', 0, 0]
    },
    next: {
      opacity: 0
    }
  }}
>

prev 和 next 的具体参数类型可以参考 swiper creativeEffect ，比如说上面示例中 creativeEffect 的意思是：

进入动画的起始状态（prev）：
translate：[’-300%‘, 0, 0]，表示一开始在 x 轴的 -300% swiper 宽度的位置上
opacity：0，表示一开始透明不可见
退出动画的结束状态（next）：
opacity：0，表示结束时透明不可见

经过我们的改造，最终效果如下：

局限性

上面的效果其实并没有完全满足我们的要求，我们可以观察到 swiper 的幻灯片进入和退出有这样的特点：会有某一段时间，上一张幻灯片和下一张幻灯片会同时存在于可视区域。

这个会导致我们的滑动渐现进入效果不能完美实现，只能通过调整起始位置到尽可能远，来拟合我们想要的效果。像上面其实就设置了 -300%，才达到了比较理想的效果。与之相对的，也带来了另一个问题：透明度变化太快了，进入可视区域时幻灯片的 opacity 已经接近 1 了。

这下可把我整不会了，没想到 swiper 还有这样的局限性。但幻灯片切换效果不佳并不是最主要的，更重要的还是氛围气泡业务逻辑的实现，我们看看结合 push 命令，动态更新幻灯片数量的情况下，swiper 在 react 中的状态管理会变得多不堪。

另一个问题 —— 基于 swiper 动态更新氛围气泡

在实际业务使用中，其实还遇到了优先级展示的问题，氛围气泡的位置一共有三个组件在轮流展示：

打开直播间，先展示一段 5s 的课程公告
公告消失后，如果有氛围气泡数据，就展示氛围气泡
如果没有氛围气泡，就展示兜底的引导进群组件

如果我们需要动态插入氛围气泡的话，就会有两种情况：

氛围气泡组件未初始化时：通过组件 state 去缓存氛围气泡数组
氛围气泡组件初始化后：通过 swiper 实例，调用 swiper.appendSlide/prependSlide 方法去插入氛围气泡幻灯片

比如说以下的业务代码：

// 氛围气泡推送监听
onAtmosphereBubble((data) => {
  // 未展示前，缓存气泡到状态中
  if (this.state.chatBoxTopIndex === 0) {
    this.setState((prev) => ({
      bubbleList: [
        data,
        ...prev.bubbleList,
      ],
    }));
  } elseif (this.state.chatBoxTopIndex === 1) {
    // 展示中，通过 swiper 实例插入幻灯片
    this.addBubble(data);
  } else {
    // 即将展示，向状态中插入幻灯片
    this.setState((prev) => ({
      bubbleList: [
        data,
        ...prev.bubbleList,
      ],
    }));
    this.nextChatBoxTop(1);
  }
});

const addBubble = (data) => {
    this.swiper?.prependSlide('<div class="swiper-slide">new Slide</div>');
};

从这里就能看出来，在 react 中，如果需要动态更新幻灯片的场景，使用 swiper 相当不合适。原因是 swiper 是通过示例方法去更新 UI，而 react 是通过数据（状态）去更新 UI 的，两者不太兼容。

除此之外，实践中也发现了很多其他的问题，比如说：

通过 swiper.appendSlide/prependSlide 方法去插入新的幻灯片，只能传入 HTML 字符串，不能传入 React 组件。也就是说，新的幻灯片需要手动绑定事件，且不具备 React 的生命周期 hook。
swiper 的幻灯片数据由组件 state 和 swiper 实例共同控制，会出现两者数据不同步的情况，不易理解和管理。

1.3. 别的方案？

总的来说，swiper 在这个需求里表现得不是很好，使用它反而会让代码变得复杂。既然没有现有的组件可以复用，我们可以怎么另辟蹊径呢？接下来就来到本文的正题了，我们来通过一个神奇的 React 动画库来实现我们的需求。

2 . react-transition-group

react-transition-group 是 React 官方实现的，用于操作过渡效果的组件库。它可以在组件安装和卸载时，增加过渡效果。一共提供了 4 个 api，上手成本极低。

我们首先从单个组件切换的场景入手，比如说现在希望为一个组件增加进入和退出的动画，就可以使用 Transition 或者 CSSTransition。

2.1. Transition 组件

Transition 组件是一个自由度比较高的组件，CSSTransition 也是基于它扩展的。它通过 in 参数跟踪组件的进入和退出（或者说显隐），并由开发者自定义动画样式。

话不多说，我们直接上代码。下面设计了一个按钮点击来控制组件进入退出的示例：

index.js

import React, { useState } from"react";
import { Transition } from"react-transition-group";

import"./styles.css";

const duration = 500;

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out`,
  opacity: 0
};

const transitionStyles = {
  entering: { opacity: 1 },
  entered: { opacity: 1 },
  exiting: { opacity: 0 },
  exited: { opacity: 0 }
};

exportdefaultfunction App() {
  const [inProp, setInProp] = useState(false);
  return (
    <div>
      <Transition in={inProp} timeout={duration}>
        {(state) => (
          <div
            style={{
              ...defaultStyle,
              ...transitionStyles[state]
            }}
          >
            I'm a fade Transition!
          </div>
        )}
      </Transition>
      <button onClick={() => setInProp((prev) => !prev)}>Click to Enter</button>
    </div>
  );
}

效果如下：

Transition 包含了以下参数：

in：控制组件显示的布尔值，触发进入或退出状态
timeout：动画的持续时间，单位为毫秒，可以一次设置所有状态的动画时间，也可以单独设置每个状态的动画时间。这个时间主要是结合 SwitchTransition api 使用的，需要和 css 中的动画时间保持一致。

timeout={500}

// or

timeout={{
 appear: 500,
 enter: 300,
 exit: 500,
}}

children 函数：提供了一个 state 参数的 children 函数，用于渲染我们的组件。其中 state 包括了以下状态：
'entering'
'entered'
'exiting'
'exited'
开始动画的三个钩子，均接收一个回调函数 Function(node: HtmlElement, isAppearing: bool) -> void ，回调函数接收 2 个参数，第一个参数为当前元素的 dom 节点，第二个参数表示当前动画是否为元素初次挂载时发生
onEnter：在动画状态变为 entering 之前调用
onEntering：在动画状态变为 entering 之后调用
onEntered：在动画状态变为 entered 之后调用
离开动画的三个钩子，均接收一个回调函数 Function(node: HtmlElement) -> void ，回调函数仅接收当前元素的 dom 节点
onExit：在动画状态变为 exiting 之前调用
onExiting：在动画状态变为 exiting 之后调用
onExited：在动画状态变为 exited 之后调用
......

2.2. CSSTransition 组件

通过上面 Transition 的例子，我们也看到了，组件当前的 class 是由 children 函数中的 state 参数来决定的，写法上不够 auto。CSSTransition 组件解决了这一问题，它继承了 Transition 组件，并简化了 className 的声明。

同理，我们上一段代码看看区别，依然是刚才的例子：

index.js

import React, { useState } from"react";
import { CSSTransition } from"react-transition-group";

import"./styles.scss";

const duration = 300;

exportdefaultfunction App() {
  const [inProp, setInProp] = useState(false);
  return (
    <div>
      <CSSTransition in={inProp} timeout={duration} classNames="my-fade">
        <p className="my-fade">I'm a fade Transition!</p>
      </CSSTransition>
      <button onClick={() => setInProp((prev) => !prev)}>Click to Enter</button>
    </div>
  );
}

style.scss

.my-fade {
  opacity: 0;
  &-enter { opacity: 0 }
  &-enter-active {
    opacity: 1;
    transition: opacity 300ms;
  }
  &-enter-done {
    opacity: 1;
  }
  &-exit { opacity: 1 }
  &-exit-active {
    opacity: 0;
    transition: opacity 300ms;
  }
  &-exit-done {
    opacity: 0;
  }
};

效果依然是：

CSSTransition 会根据 in 参数的变化，为组件添加不同的 class。例如，当 in 变为 true，会先后为组件添加 {classNames}-enter、{classNames}-enter-active、{classNames}-enter-done 的 class，形成入场的动画效果；当 in 变为 false，则会为组件添加 {classNames}-exit、{classNames}-exit-active、{classNames}-exit-done 的 class，形成退场的动画效果。

CSSTransition 默认有三个阶段 —— 消失（appear）、进入（enter）、离开（exit）。并且每个阶段都先后添加三个类名，以 enter 为例，分别是：

enter 表示开始动画的初始阶段
enter-active 表示开始动画的激活阶段
enter-done 表示开始动画的结束阶段，也是样式的持久化展示阶段

CSSTransition 的参数跟 Transition 差别不大，需要注意的是 classNames 这个参数。为了与 React 中的 className 进行区别，classNames 这个参数在 className 的基础上在末尾加了个 s。

一般来说，这个参数将作为动画过渡的一系列类名（-enter、-enter-active、-enter-done、......）的前缀。

classNames="my-fade"

// my-fade-enter
// my-fade-enter-active
// my-fade-enter-done
// ......

但也支持对每个类名单独定义：

classNames={{
 appear: 'my-appear',
 appearActive: 'my-active-appear',
 appearDone: 'my-done-appear',
 enter: 'my-enter',
 enterActive: 'my-active-enter',
 enterDone: 'my-done-enter',
 exit: 'my-exit',
 exitActive: 'my-active-exit',
 exitDone: 'my-done-exit',
}}

2.3. SwitchTransition

SwitchTransition 用于包裹 Transition 或 CSSTransition 组件，并修改它们内部组件的过渡模式。它拥有一个 mode 参数，可以实现两种效果：

out-in ：当前元素先转出，然后当完成时，新元素转入。
in-out ：新元素首先转入，然后当完成时，当前元素转出。

默认： 'out-in'

同样上代码来看看效果：

index.js

import React, { useState } from"react";
import { CSSTransition, SwitchTransition } from"react-transition-group";
import { Button, Form } from"react-bootstrap";

import"./styles.scss";

const modes = ["out-in", "in-out"];

exportdefaultfunction App() {
  const [mode, setMode] = useState("out-in");
  const [state, setState] = useState(true);
  return (
    <div>
      <div className="label">Mode:</div>
      <div className="modes">
        {modes.map((m) => (
          <Form.Check
            key={m}
            custom
            inline
            label={m}
            id={`mode=msContentScript${m}`}
            type="radio"
            name="mode"
            checked={mode === m}
            value={m}
            onChange={(event) => {
              setMode(event.target.value);
            }}
          />
        ))}
      </div>
      <div className="main">
        <SwitchTransition mode={mode}>
          <CSSTransition
            key={state}
            addEndListener={(node, done) => {
              node.addEventListener("transitionend", done, false);
            }}
            classNames="fade"
          >
            <div className="button-container">
              <Button onClick={() => setState((state) => !state)}>
                {state ? "Hello, world!" : "Goodbye, world!"}
              </Button>
            </div>
          </CSSTransition>
        </SwitchTransition>
      </div>
    </div>
  );
}

style.scss

body {
  padding: 2rem;
  font-family: sans-serif;
  text-align: center;
}

.label {
  margin-bottom: 0.5rem;
}

.modes {
  margin-bottom: 1rem;
}

.button-container {
  margin-bottom: 0.5rem;
}

.fade {
  &-enter .btn {
    opacity: 0;
    transform: translateX(-100%);
  }
  &-enter-active .btn {
    opacity: 1;
    transform: translateX(0%);
  }
  &-exit .btn {
    opacity: 1;
    transform: translateX(0%);
  }
  &-exit-active .btn {
    opacity: 0;
    transform: translateX(100%);
  }
  &-enter-active .btn,
  &-exit-active .btn {
    transition: opacity 500ms, transform 500ms;
  }
}

效果如下：

从这里可以看出和 swiper 的区别，swiper 类似于 in-out 的效果，而我们希望实现的氛围气泡是 out-in 的效果。

2.4. TransitionGroup

顾名思义，TransitionGroup 是用来管理多个 Transition/CSSTransition 的。当需要管理多个 Transition，即需要实现不同的动画效果时，适合使用它。

<TransitionGroup>
  {list.map(({ id }) => (
    <CSSTransition
      key={id}
      timeout={300}
      classNames="my"
    >
      <MyComponent key={id}/>
    </CSSTransition>
  ))}
</TransitionGroup>

3 . 用 react-transition-group 实现氛围气泡

了解了 react-transition-group 之后，我们很容易联想到，可以用 CSSTransition + SwitchTransition（out-in mode）实现我们的需求。

但在实现之前，还需要定义一下我们的数据结构。

3.1. 数据结构

气泡是随着用户的交互，从客户端触发上报给到后台，再由后台反馈到其他客户端的。由于上文提到氛围气泡不是常驻的，会去展示其他的组件，所以当后台反馈了新的气泡数据，会存在三种情况：

正在展示氛围气泡：将气泡数据插入到展示顺序的尾部。
正在展示不可中断的组件（课程公告）：将气泡数据缓存起来。
正在展示可中断的组件（兜底组件）：将气泡数据缓存起来，并立即展示氛围气泡。

显然是一个 队列，我们可以维护一个气泡的 JSX 元素数组，用一个 index 来决定当前展示的气泡来实现切换渲染，并将不断到来的气泡数据插入到数组的尾部。

这样的好处在于，相比 swiper/react 通过状态和实例来维护气泡的方式，我们统一使用状态来维护气泡数据更加符合数据驱动视图的思想。

3.2. 队列实现

我们将气泡列表的展示顺序（index）放到 props 中维护，使之变成受控的。并在队列中维护一个定时器，定时触发 props 中的 nextBubble 方法去更新 index。如下：

import React, { useEffect, useCallback } from"react";
import { CSSTransition, SwitchTransition } from"react-transition-group";
import"./index.css";

const AtmosphereBubbleSequence = ({
  bubbleList,
  index,
  setCurIndex,
  nextBubble,
  next,
  resetList
}) => {
  const bubbleListLength = bubbleList.length;
  let curIndex = 0;

  if (index > -1 && index < bubbleListLength) {
    curIndex = index;
  } else {
    curIndex = bubbleListLength - 1;
    setCurIndex(curIndex);
  }

  useEffect(() => {
    // 定时触发
    const interval = setInterval(() => {
      nextBubble();
    }, 3000);
    return() => {
      clearInterval(interval);
    };
  }, []);

  const onExited = useCallback(
    (node) => {
      if (+node.dataset.bubbleKey === bubbleListLength - 1) {
        // 切换到兜底组件
        next();
        // 清空气泡列表
        resetList();
      }
    },
    [bubbleListLength, next, resetList]
  );

  return (
    <SwitchTransition>
      <CSSTransition
        key={bubbleList[index]?.type?.name + index || Math.random()}
        timeout={{
          enter: 300,
          exit: 300
        }}
        classNames="atmosphere-bubble-cnt"
        unmountOnExit
        onExited={onExited}
      >
        <div data-bubble-key={index} className="atmosphere-bubble-cnt">
          {bubbleList[index]}
        </div>
      </CSSTransition>
    </SwitchTransition>
  );
};

export default AtmosphereBubbleSequence;

值得注意的是，需要在 onExited 回调中去判断气泡列表是否已经展示完毕，调用销毁气泡序列组件的方法，并清空气泡数据列表，去展示其他的组件。

同时，我们设置气泡的样式如下：

.atmosphere-bubble-cnt {
  padding: 016px;
}

.atmosphere-bubble-cnt-enter {
  opacity: 0;
  transform: translate3d(-60px, 0, 0);
}

.atmosphere-bubble-cnt-enter-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 300ms, transform 300ms;
}

.atmosphere-bubble-cnt-exit {
  opacity: 1;
}

.atmosphere-bubble-cnt-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}

3.3. 效果模拟

为了试验效果，我们在外部设置一段 mock 逻辑，来模拟不断塞入气泡数据的情况：

import React, { useEffect, useState } from"react";
import Bubble from"./Bubble";
import AtmosphereBubbleSequence from"./Sequence";
import"./styles.css";

exportdefaultfunction App() {
  const [index, setIndex] = useState(0);

  const [bubbleDataList, setBubbleDataList] = useState([
    { nick: "李*", content: "咨询了课程", eventMsg: "去咨询" },
    { nick: "黄*", content: "领取了优惠券", eventMsg: "去领取" },
    { nick: "高*", content: "分享了直播间给好友", eventMsg: "去分享" },
    { nick: "刘*", content: "领取了直播间资料", eventMsg: "去领取" },
    { nick: "朱*", content: "购买了直播间课程《xxx》", eventMsg: "去领取" }
  ]);

  useEffect(() => {
    const interval = setInterval(() => {
      setBubbleDataList((prev) => [
        ...prev,
        { nick: "朱*", content: "购买了直播间课程《xxx》", eventMsg: "去领取" }
      ]);
    }, 3000);
    return() => {
      clearInterval(interval);
    };
  }, []);

  if (!bubbleDataList.length) {
    returnnull;
  }

  const nextBubble = (newIndex) => {
    setIndex((prevIndex) => {
      returntypeof newIndex === "undefined" ? prevIndex + 1 : newIndex;
    });
  };

  return (
    <div
      style={{
        background: "#000",
        height: "56px",
        display: "flex",
        alignItems: "center"
      }}
    >
      <AtmosphereBubbleSequence
        bubbleList={bubbleDataList.map((data) => (
          <Bubble data={data} />
        ))}
        index={index}
        setCurIndex={setIndex}
        nextBubble={nextBubble}
      />
    </div>
  );
}

接着来看看效果：

很好，已经实现我们想要的效果了！

4 . 总结

在本文我们接触到了 swiper 和 react-transition-group 的使用，并分别用它们实现了氛围气泡需求。

4.1. 动画效果层面的对比

react-transition-group 更加灵活，针对组件过渡的动画效果有更广泛的应用场景。
swiper 作为轮播效果组件，它受限于前后幻灯片同时存在的这一问题，在氛围气泡需求中表现不是很好。

4.2. 状态管理层面的对比

虽然 swiper 有这样的局限性，但这一问题并不是不能解决的，还是有 hack 技巧的。比如说，可以先把 swiper-container 先渐隐，再触发幻灯片切换，并在中途增加动画类实现渐现。只是说这段 js 逻辑不太优雅而已：

componentDidMount() {
  const { next, setBubbleList } = this.props;
  const swiperIns = this.swiper;
  const interval = setInterval(() => {
    swiperIns.$wrapperEl?.addClass('swiperFadeOut');
    delay(300)
      .then(() => {
        if (swiperIns.activeIndex === 0) {
          clearInterval(interval);
          next(2);
          setBubbleList();
          thrownewError('退出动画');
        }
        // 设置上一个滑块为透明隐藏
        (swiperIns.slides[swiperIns.activeIndex] as HTMLElement).style.opacity = '0';
        swiperIns.slidePrev(500);
        return delay(300);
      })
      .then(() => {
        swiperIns.$wrapperEl.addClass('swiperFadeIn');
        return delay(200);
      })
      .then(() => {
        swiperIns.$wrapperEl.removeClass('swiperFadeOut');
        swiperIns.$wrapperEl.removeClass('swiperFadeIn');
      })
      .catch((error) => {
        if (error.message === '退出动画') {
          console.log('已退出');
        }
      });
  }, 2000);
}

由此也可以发现，在状态管理方面：