react 不用插件实现数字滚动

2,277 阅读3分钟

突然要实现个数字滚动效果,网上一搜,一大堆都是用组件的。我只是想实现个简单的效果而已,决定还是自己搞搞吧。

先来看看效果吧


也不多说了,实现起来不难,但是有点细节问题需要自己好好琢磨一下

大概思路,

1.一开始为0,获取第一次数据,记录下来

2.和前一次数据进行对比

3.然后transform

4.最后收工

好了,附上代码、

export default class Number extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            prev: "000000",//初始化6位数
            next: "000000",
            inits: 0,
            listAll: [[0],[0],[0],[0],[0],[0]],
            contrlAnimationWay: false
        }
        this.key1 = 0
    }

    componentWillUnmount() {
    }
    componentDidMount() {
        setTimeout(()=>{
            this.run()
        })
        // this.setTimer()
    }


    // 获取数据
    getNumber() {
        let { inits } = this.state
        let random = Math.floor(Math.random() * (100000 - 1) + 1);
        let prev = this.addZero(inits, 6)
        let next = this.addZero(inits + 1235, 6)
        this.setState({
            inits: inits + 1235
        })
        console.log(99, prev);
        console.log(99, next);
        this.getData(prev, next)
    }
    // 数字补零
    addZero(num, n) {
        let len = num.toString().length;
        while (len < n) {
            num = "0" + num;
            len++;
        }
        return num;
    }
    // 对比数据前后变化
    getData(prev, next) {
        let { listAll } = this.state
        listAll = [];
        let prevArray = prev.toString().split("");
        let nextArray = next.toString().split("");
        console.log(11, prevArray);
        console.log(22, nextArray);
        let listInit = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

        for (let i = 0; i < prevArray.length; i++) {
            let prevNumber = parseInt(prevArray[i]);
            let nextNumber = parseInt(nextArray[i]);
            let start = -1;
            let end = -1;

            for (let j = 0; j < listInit.length; j++) {
                if (listInit[j] === prevNumber) {
                    start = j;
                }
                if (start !== -1 && listInit[j] === nextNumber) {
                    end = j;
                    break;
                }
            }
            listAll.push(listInit.slice(start, end + 1));
            console.log(listAll);
        }
        this.setState({
            listAll
        })
    }
    run() {
        this.getNumber()
        this.key1++
    }
    setTimer() {
        setInterval(() => {
            setTimeout(()=>{
                this.run()
            }, 0);
        }, 1000 * 4)
    }

    render() {
        let { listAll } = this.state;
        return <div className="new-tmall911">
            {/* 数字滚动 */}
            <div className="box-number">
                <div onClick={this.setTimer.bind(this)}>累计</div>
                {
                    listAll.map((list, i) => {
                        return <div key={i} className="list-wrap">
                            <div className={`roll roll_${list.length - 1}`} key={this.key1++}>
                                {
                                    list.map((item, index) => {
                                        return <div key={index}>
                                            {item}
                                        </div>
                                    })
                                }
                            </div>
                        </div>
                    })
                }
                <div>人已参与</div>
            </div>
            {/* 数字end */}
        </div>
    }
}

css

/* 数字滚动 */
.box-number {
    /* background: green; */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: rgb(36, 35, 35);
    height: 100px
  }

  .list-wrap {
    height: 3rem;
    width: 3rem;
    text-align: center;
    overflow: hidden;
    margin: 0.1rem;
    border: 2px rgb(19, 19, 18) solid;
    border-radius: 2px;
  }

  .roll div {
    font-size: 2rem;
    line-height: 3rem;
  }

  .roll_1 {
    -webkit-animation: roll_1 2s forwards; /* Safari 与 Chrome */
  }
  .roll_2 {
    -webkit-animation: roll_2 2s forwards; /* Safari 与 Chrome */
  }

  .roll_3 {
    -webkit-animation: roll_3 2s forwards; /* Safari 与 Chrome */
  }

  .roll_4 {
    -webkit-animation: roll_4 2s forwards; /* Safari 与 Chrome */
  }

  .roll_5 {
    -webkit-animation: roll_5 2s forwards; /* Safari 与 Chrome */
  }

  .roll_6 {
    -webkit-animation: roll_6 2s forwards; /* Safari 与 Chrome */
  }

  .roll_7 {
    -webkit-animation: roll_7 2s forwards; /* Safari 与 Chrome */
  }

  .roll_8 {
    -webkit-animation: roll_8 2s forwards; /* Safari 与 Chrome */
  }
  
  /*省略roll_2——roll_8*/

  .roll_9 {
    -webkit-animation: roll_9 2s forwards; /* Safari 与 Chrome */
  }

  @-webkit-keyframes roll_1 /* Safari 与 Chrome */
  {
    0% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(0, -3rem, 0);
    }
  }

  @-webkit-keyframes roll_2 /* Safari 与 Chrome */
  {
    0% {
      transform: translate3d(0, 0px, 0);
    }
    100% {
      transform: translate3d(0, -6rem, 0);
    }
  }
  @-webkit-keyframes roll_3 /* Safari 与 Chrome */
  {
    0% {
      transform: translate3d(0, 0px, 0);
    }
    100% {
      transform: translate3d(0, -9rem, 0);
    }
  }
  @-webkit-keyframes roll_4 /* Safari 与 Chrome */
  {
    0% {
      transform: translate3d(0, 0px, 0);
    }
    100% {
      transform: translate3d(0, -12rem, 0);
    }
  }
  @-webkit-keyframes roll_5 /* Safari 与 Chrome */
  {
    0% {
      transform: translate3d(0, 0px, 0);
    }
    100% {
      transform: translate3d(0, -15rem, 0);
    }
  }
  @-webkit-keyframes roll_6 /* Safari 与 Chrome */
  {
    0% {
      transform: translate3d(0, 0px, 0);
    }
    100% {
      transform: translate3d(0, -18rem, 0);
    }
  }
  @-webkit-keyframes roll_7 /* Safari 与 Chrome */
  {
    0% {
      transform: translate3d(0, 0px, 0);
    }
    100% {
      transform: translate3d(0, -21rem, 0);
    }
  }
  @-webkit-keyframes roll_8 /* Safari 与 Chrome */
  {
    0% {
      transform: translate3d(0, 0px, 0);
    }
    100% {
      transform: translate3d(0, -24rem, 0);
    }
  }
  @-webkit-keyframes roll_9 /* Safari 与 Chrome */
  {
    0% {
      transform: translate3d(0, 0px, 0);
    }
    100% {
      transform: translate3d(0, -27rem, 0);
    }
  }

完成,收工!!!!