react写一个简单的3d滚轮picker组件

1. TreeDPicker.tsx文件

原理就不想赘述了, 想了解的话, 网址在:

使用vue写一个picker插件,使用3d滚轮的原理_vue3中支持3d picker选择器插件-CSDN博客

import React, { useEffect, useRef, Ref, useState } from "react";
import Animate from "../utils/animate";
import _ from "lodash";
import "./Picker.scss";
import * as ReactDOM from "react-dom";
import MyTransition from "./MyTransition";

interface IProps {
  selected?: number | string;
  cuIdx: number;
  pickerArr: string[]|number[];
  isShow: boolean;
  setIsShow: (arg1: boolean) => void;
  setSelectedValue: (arg1: number|string) => void;
}

interface IFinger {
  startY: number;
  startTime: number;
  currentMove: number;
  prevMove: number;
}
type ICurrentIndex = number;

const a = -0.003; // 加速度
let radius = 2000; // 半径--console.log(Math.PI*2*radius/LINE_HEIGHT)=>估算最多可能多少条,有较大误差,半径2000应该够用了,不够就4000
const LINE_HEIGHT = 36; // 文字行高
const FRESH_TIME = 1000 / 60; // 动画帧刷新的频率大概是1000 / 60
// 反正切=>得到弧度再转换为度数,这个度数是单行文字所占有的。
let singleDeg = 2 * ((Math.atan(LINE_HEIGHT / 2 / radius) * 180) / Math.PI);
const REM_UNIT = 37.5; // px转化为rem需要的除数
const SCROLL_CONTENT_HEIGHT = 300; // 有效滑动内容高度

const TreeDPicker = (props: IProps) => {
  const pxToRem = (pxNumber) => {
    return Number(pxNumber / REM_UNIT) + "rem";
  };
  const heightRem = pxToRem(LINE_HEIGHT); // picker的每一行的高度--单位rem
  const lineHeightRem = pxToRem(LINE_HEIGHT); // picker的每一行的文字行高--单位rem
  const radiusRem = pxToRem(radius); // 半径--单位rem

  const { cuIdx, pickerArr, isShow, setIsShow, setSelectedValue } = props; // 解构props, 得到需要使用来自父页面传入的数据

const[pickerIsShow, setPickerIsShow] = useState(props.isShow)
  useEffect(() => {
    setPickerIsShow(isShow)
}, [isShow])

  // 存储手指滑动的数据
  const finger0 = useRef<IFinger>({
    startY: 0,
    startTime: 0, // 开始滑动时间（单位：毫秒）
    currentMove: 0,
    prevMove: 0,
  });
  const finger = _.get(finger0, "current") || {};
  const currentIndex = useRef<ICurrentIndex>(0);
  const pickerContainer = useRef() as Ref<any>;
  const wheel = useRef() as Ref<any>;
  let isInertial = useRef<boolean>(false); // 是否正在惯性滑动

  // col-wrapper的父元素, 限制滚动区域的高度,内容正常显示(col-wrapper多余的部分截掉不显示)
  const getWrapperFatherStyle = () => {
    return {
      height: pxToRem(SCROLL_CONTENT_HEIGHT),
    };
  };
  // class为col-wrapper的style样式: 滚轮的外包装理想样式--展示半径的内容可见,另外的半径隐藏
  const getWrapperStyle = () => ({
    height: pxToRem(2 * radius),
    // 居中: 1/2直径 - 1/2父页面高度
    transform: `translateY(-${pxToRem(radius - SCROLL_CONTENT_HEIGHT / 2)})`,
  });
  // 当父元素(class为col-wrapper), 定位是relative, 高度是直径: 2 * radius, 子页面想要居中, top: (1/2直径)-(1/2*一行文字高度)
  const circleTop = pxToRem(radius - LINE_HEIGHT / 2); // 很重要!!!
  // col-wrapper的子元素 => 3d滚轮的内容区域样式--useRef=wheel的元素样式
  const getListTop = () => ({
    top: circleTop,
    height: pxToRem(LINE_HEIGHT),
  });
  // col-wrapper的子元素 => 参照一般居中的做法,[50%*父页面的高度(整个圆的最大高度是直径)]-居中内容块(文本的行高)的一半高度
  const getCoverStyle = () => {
    return {
      backgroundSize: `100% ${circleTop}`,
    };
  };
  // col-wrapper的子元素 => 应该也是参照居中的做法(注意减去两条边框线)
  const getDividerStyle = () => ({
    top: `calc(${circleTop} - ${pxToRem(0)})`,
    height: pxToRem(LINE_HEIGHT),
  });
  const animate = new Animate();

  function initWheelItemDeg(index) {
    // 初始化时转到父页面传递的下标所对应的选中的值
    // 滑到父页面传的当前选中的下标cuIdx处
    const num = -1 * index + Number(cuIdx);
    const transform = getInitWheelItemTransform(num);
    // 当前的下标
    return {
      transform: transform,
      height: heightRem,
      lineHeight: lineHeightRem,
    };
  }
  /**
 * 1、translate3d
在浏览器中，y轴正方向垂直向下，x轴正方向水平向右，z轴正方向指向外面。
z轴越大离我们越近，即看到的物体越大。z轴说物体到屏幕的距离。
 * 
 */
  function getInitWheelItemTransform(indexNum) {
    // 初始化时转到父页面传递的下标所对应的选中的值
    // 滑动的角度: 该行文字下标 * 一行文字对应的角度
    const rotate3dValue = getMoveWheelItemTransform(indexNum * LINE_HEIGHT);
    return `${rotate3dValue} translateZ(calc(${radiusRem} / 1))`;
  }
  function getMoveWheelItemTransform(move) {
    // 初始化时转到父页面传递的下标所对应的选中的值
    const indexNum = Math.round(move / LINE_HEIGHT);
    // 滑动的角度: 该行文字下标 * 一行文字对应的角度
    const wheelItemDeg = indexNum * singleDeg;

    return `rotateX(${wheelItemDeg}deg)`;
  }
  function listenerTouchStart(ev) {
    ev.stopPropagation();
    isInertial.current = false; // 初始状态没有惯性滚动
    finger.startY = ev.targetTouches[0].pageY; // 获取手指开始点击的位置
    finger.prevMove = finger.currentMove; // 保存手指上一次的滑动距离
    finger.startTime = Date.now(); // 保存手指开始滑动的时间
  }
  function listenerTouchMove(ev) {
    ev.stopPropagation();
    // startY: 开始滑动的touch目标的pageY: ev.targetTouches[0].pageY减去
    const nowStartY = ev.targetTouches[0].pageY; // 获取当前手指的位置
    // finger.startY - nowStart为此次滑动的距离, 再加上上一次滑动的距离finger.prevMove, 路程总长: (finger.startY - nowStartY) + finger.prevMove
    finger.currentMove = finger.startY - nowStartY + finger.prevMove;
    let wheelDom =
      _.get(wheel, "current") ||
      document.getElementsByClassName("wheel-list")[0];
    if (wheelDom) {
      wheelDom.style.transform = getMoveWheelItemTransform(finger.currentMove);
    }
  }
  function listenerTouchEnd(ev) {
    ev.stopPropagation();
    const _endY = ev.changedTouches[0].pageY; // 获取结束时手指的位置
    const _entTime = Date.now(); // 获取结束时间
    const v = (finger.startY - _endY) / (_entTime - finger.startTime); // 滚动完毕求移动速度 v = (s初始-s结束) / t
    const absV = Math.abs(v);
    isInertial.current = true; // 最好惯性滚动,才不会死板
    animate.start(() => inertia({ start: absV, position: Math.round(absV / v), target: 0 })); // Math.round(absV / v)=>+/-1
  }
  /**用户结束滑动，应该慢慢放慢，最终停止。从而需要 a(加速度)
   * @param start 开始速度(注意是正数) @param position 速度方向，值: 正负1--向上是+1,向下是-1 @param target 结束速度
   */
  function inertia({ start, position, target }) {
    if (start <= target || !isInertial.current) {
      animate.stop();
      finger.prevMove = finger.currentMove;
      getSelectValue(finger.currentMove); // 得到选中的当前下标
      return;
    }

    // 这段时间走的位移 S = (+/-)vt + 1/2at^2 + s1;
    const move =
      position * start * FRESH_TIME +
      0.5 * a * Math.pow(FRESH_TIME, 2) +
      finger.currentMove;
    const newStart = position * start + a * FRESH_TIME; // 根据求末速度公式： v末 = (+/-)v初 + at
    let actualMove = move; // 最后的滚动距离
    let wheelDom =
      _.get(wheel, "current") ||
      document.getElementsByClassName("wheel-list")[0];

    // 已经到达目标
    // 当滑到第一个或者最后一个picker数据的时候, 不要滑出边界
    // 因为在开始的时候加了父页面传递的下标,这里需要减去才能够正常使用
    const minIdx = 0 - cuIdx;
    const maxIdx = pickerArr.length - 1 - cuIdx;
    if (Math.abs(newStart) >= Math.abs(target)) {
      if (Math.round(move / LINE_HEIGHT) < minIdx) {
        // 让滚动在文字区域内,超出区域的滚回到边缘的第一个文本处
        actualMove = minIdx * LINE_HEIGHT;
      } else if (Math.round(move / LINE_HEIGHT) >= maxIdx) {
        // 让滚动在文字区域内,超出区域的滚回到边缘的最后一个文本处
        actualMove = maxIdx * LINE_HEIGHT;
      }
      if (wheelDom)
        wheelDom.style.transition =
          "transform 700ms cubic-bezier(0.19, 1, 0.22, 1)";
    }
    // finger.currentMove赋值是为了点击确认的时候可以使用=>获取选中的值
    finger.currentMove = actualMove;
    if (wheelDom)
      wheelDom.style.transform = getMoveWheelItemTransform(actualMove);
    animate.stop();
    // animate.start(() => inertia.bind({ start: newStart, position, target }));
  }
  // 滚动时及时获取最新的当前下标--因为在初始化的时候减去了,所以要加上cuIdx,否则下标会不准确
  function getSelectValue(move) {
    const idx = Math.round(move / LINE_HEIGHT) + Number(cuIdx);
    currentIndex.current = idx;
    return idx;
  }
  function sure() {
    // 点击确认按钮
    getSelectValue(finger.currentMove);
    setSelectedValue(pickerArr[currentIndex.current]);
    setTimeout(() => {
      close();
    }, 0);
  }

  function close() {
      setTimeout(() => {
        setPickerIsShow(false);
        // 延迟关闭, 因为MyTransition需要这段事件差执行动画效果
        setTimeout(() => {
          setIsShow(false)
        }, 500);
      }, 0);
  } // 点击取消按钮

  useEffect(() => {
    const dom =
      _.get(pickerContainer, "current") ||
      document.getElementsByClassName("picker-container")[0];
    try {
      dom.addEventListener("touchstart", listenerTouchStart, false);
      dom.addEventListener("touchmove", listenerTouchMove, false);
      dom.addEventListener("touchend", listenerTouchEnd, false);
    } catch (error) {
      console.log(error);
    }
    return () => {
      const dom =
        _.get(pickerContainer, "current") ||
        document.getElementsByClassName("picker-container")[0];
        dom.removeEventListener("touchstart", listenerTouchStart, false);
        dom.removeEventListener("touchmove", listenerTouchMove, false);
        dom.removeEventListener("touchend", listenerTouchEnd, false);
    };
  }, [_.get(pickerContainer, "current")]);

  return ReactDOM.createPortal(
    <div className="picker-container">
      <div ref={pickerContainer}>
        {isShow+''}
        <MyTransition name="myPopup" transitionShow={pickerIsShow}>
          {isShow && (
            <section className="pop-cover" onClick={close}></section>
          )}
        </MyTransition>
        <MyTransition name="myOpacity" transitionShow={pickerIsShow}>
          {isShow && (
            <section>
              <div className="btn-box">
                <button onClick={close}>取消</button>
                <button onClick={sure}>确认</button>
              </div>
              <div
                className="col-wrapper-father"
                style={getWrapperFatherStyle()}
              >
                <div className="col-wrapper" style={getWrapperStyle()}>
                  <ul className="wheel-list" style={getListTop()} ref={wheel}>
                    {_.map(pickerArr, (item, index) => {
                      return (
                        <li
                          className="wheel-item"
                          style={initWheelItemDeg(index)}
                          key={"wheel-list-"+index}
                        >
                          {item+''}
                        </li>
                      );
                    })}
                  </ul>
                  <div className="cover" style={getCoverStyle()}></div>
                  <div className="divider" style={getDividerStyle()}></div>
                </div>
              </div>
            </section>
          )}
        </MyTransition>
      </div>
    </div>,
    document.body
  );
};

export default TreeDPicker;

2. scss文件:

@import "./common.scss";

.picker-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;

  // transition动画部分
  .myOpacity-enter,
  .myOpacity-leave-to {
    opacity: 0;
    // 因为picker滚动区域有过transform, 这里也写transform的话会导致本不该滚动的地方滚动了
  }

  .myOpacity-enter-active,
  .myOpacity-leave-active {
    opacity: 1;
    transition: all 0.5s ease;
  }

  .myPopup-enter,
  .myPopup-leave-to {
    transform: translateY(100px);
  }

  .myPopup-enter-active,
  .myPopup-leave-active {
    transition: all 0.5s ease;
  }

  // 透明遮罩
  .pop-cover {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
  }

  // 确认 取消按钮box
  .btn-box {
    height: pxToRem(40px);
    background: rgb(112, 167, 99);
    display: flex;
    justify-content: space-between;
    font-size: pxToRem(16px);

    & button {
      background-color: rgba(0, 0, 0, 0);
      border: none;
      color: #fff;
    }
  }

  .col-wrapper-father {
    overflow: hidden;
  }

  //overflow: hidden=>截掉多余的部分,显示弹窗内容部分
  ul,
  li {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  // 为了方便掌握重点样式,简单的就直接一行展示,其他的换行展示,方便理解
  .col-wrapper {
    position: relative;
    border: 1px solid #ccc;
    text-align: center;
    background: #fff;

    &>.wheel-list {
      position: absolute;
      width: 100%;
      transform-style: preserve-3d;
      transform: rotate3d(1, 0, 0, 0deg);

      .wheel-item {
        backface-visibility: hidden;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        border: 1px solid #eee;
        font-size: pxToRem(16px);
      }
    }

    &>.cover {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(0deg, rgba(white, 0.6), rgba(white, 0.6)), linear-gradient(0deg,
          rgba(white, 0.6),
          rgba(white, 0.6));
      background-position: top, bottom;
      background-repeat: no-repeat;
    }

    &>.divider {
      position: absolute;
      width: 100%;
      left: 0;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
    }
  }
}

3. transition组件(之前写了一篇文章有提到):

react简单写一个transition动画组件然后在modal组件中应用-CSDN博客