Html5+Ant-Motion实现官网Banner视频、图片轮播

轮播banner使用的动画库：Ant-Motion

官方给了很多小demo，可以随意捣鼓

实现后的效果如下图（gif导出比较大，所以看上去卡卡的，实际很流畅）

播放视频采用的是Html5中的video

 <video
       style={{ width: "100%", height: "100%", objectFit: "cover" }}
       autoPlay
       muted
       loop
>
       <source src={item.video} type="video/mp4"></source>
</video>

1. autoplay 如果出现该属性，则视频在就绪后马上播放。
2. controls 如果出现该属性，则向用户显示控件，比如播放按钮。
3. height 设置视频播放器的高度。
4. loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
5. muted 规定视频的音频输出应该被静音。
6. poster 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
7. preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
8. src 要播放的视频的 URL。
9. width 设置视频播放器的宽度。

Banner轮播

1、封装banner组件

import React from "react";
import { useRoute } from "@/hooks";
import { Button } from "antd";
import { RightOutlined } from "@ant-design/icons";

import BannerAnim, { Element } from "rc-banner-anim";
import TweenOne from "rc-tween-one";
import FontText from "../html/FontText";

import "./index.less";
const BgElement = Element.BgElement;

export default function ({ bannerList }) {
  const [_, setRoute] = useRoute();

  return (
    <BannerAnim
      prefixCls="banner-user component-banner-wrap"
      autoPlay
      autoPlaySpeed={8000}
      type="across"
      arrow={false}
      delay={300}
    >
      {bannerList.map((item, index) => (
        <Element prefixCls="banner-user-elem" key={`${index}`}>
           {item.video ? (
            <BgElement
              component="video"
              componentProps={{
                className: "video",
                autoPlay: true,
                muted: true,
                poster: video_banner,
                src: item.video,
              }}
              className="video_size"
            />
          ) : (
            <BgElement
              key="bg"
              className="bg"
              style={{ backgroundImage: "url(" + item.image + ")" }}
            />
          )}
          <TweenOne
            className="title box-container"
            animation={{ y: 30, opacity: 0, type: "from" }}
          >
            <FontText
              key="title"
              theme="light"
              size={40}
              lineHeight="60px"
              fontWeight="bold"
              top={187}
              textAlign="center"
            >
              {item.title}
            </FontText>
          </TweenOne>
          <TweenOne
            className="box-container"
            animation={{ y: 30, opacity: 0, type: "from", delay: 100 }}
          >
            <FontText
              key="text"
              theme="light"
              top={12}
              size={18}
              // width={548}
              color={85}
              lineHeight="25px"
              content={item.subTitle}
              textAlign="center"
            />
          </TweenOne>
          {!item.btn && (
            <TweenOne
              className="box-container"
              animation={{ y: 30, opacity: 0, type: "from", delay: 100 }}
            >
              <div className="block_item"></div>
            </TweenOne>
          )}
          {item.btn && (
            <TweenOne
              className="box-container"
              style={{ marginTop: 48, with: 1200 }}
              animation={{ y: 30, opacity: 0, type: "from", delay: 100 }}
            >
              <div className="btn">
                <Button
                  key="btn"
                  type="primary"
                  onClick={() => setRoute(item.url)}
                  style={{ minWidth: 180, height: 54, background: "#4E80F8" }}
                >
                  {item.btn}
                  <RightOutlined />
                </Button>
              </div>
            </TweenOne>
          )}
        </Element>
      ))}
    </BannerAnim>
  );
}

2、设计需要map操作的数据结构

export const bannerList = [
  {
    id: "1",
    btn: "",
    title: "我是banner1，是视频",
    subTitle: "banner下面的一小行简介",
    video: require("@/assets/images/home/banner_video.mp4"),
  },
  {
    id: "3",
    btn: "banner2有按钮",
    title: "我是banner2，是图片",
    subTitle: "banner下面的一小行简介",
    image: require("@/assets/images/home/banner2.jpg"),
  },
  {
    id: "2",
    btn: "banner3有按钮",
    title: "我是banner3，是图片",
    subTitle: "banner下面的一小行简介",
    image: require("@/assets/images/home/banner3.jpeg"),
  },
];