7

React数字滚动组件 numbers-scroll - 一步一个脚印一个坑

 1 year ago
source link: https://www.cnblogs.com/warm-stranger/p/17201937.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

数字滚动组件，也可以叫数字轮播组件，这个名字一听就是非常普通常见的组件，第一反应就是想找找网上大佬的东西顶礼膜拜一下，这一搜，还真是没找到趁手的╮(╯▽╰)╭。

最近接了大屏的需求，数字滚动肯定是免不了的，所以开始撸袖子，造轮子了（ numbers-scroll ）。

首先给大家看下轮子的效果吧：

712333-20230309233429005-445615839.gif

一、设计原理

如果要做到数字滚动效果，就一定要让数字有从下往上移动的感觉。如果只是纯粹的数字变化，显示出来的效果就会比较普通了，没有什么视觉上的冲击感，如图所示：

712333-20230309235302234-515901422.gif

所以，我们需要数字在变化过程中，有种纸带往上抽动的感觉。初始状态中，数字都在显示框下方等待。数字滚动中，则根据数字的大小决定滚动速度，数字越大，滚动越快；数字越小，则滚动越慢，这样会有一种参差的感觉，滚动的效果也会让人觉得更自然一些。

712333-20230310001345474-262415922.png

二、实现方式

初始状态中，每个数字展示的窗口下边都有0-9这10个数字在等待中，传入具体数字后，每个窗口就可以开始移动数字的位置了。

移动数字的位置可以有三种方式：1. 通过js改变样式（虽然逻辑更容易实现，但是执行效率太低，直接放弃）；2. 通过animation来控制margin-top的值。3. 通过animation来控制transform的值。

虽然个人觉得通过tranform来控制显示位置会更好些，但是目前采用的是方式二，控制margin-top的值来展示数字的位置，效果还算可以了，有兴趣的同学可以改造成transform。

React代码片段如下：

<span className={scrollClass}>
    <label style={numberStyle}>0</label>
    <label style={numberStyle}>1</label>
    <label style={numberStyle}>2</label>
    <label style={numberStyle}>3</label>
    <label style={numberStyle}>4</label>
    <label style={numberStyle}>5</label>
    <label style={numberStyle}>6</label>
    <label style={numberStyle}>7</label>
    <label style={numberStyle}>8</label>
    <label style={numberStyle}>9</label>
    <label style={numberStyle}>0</label>
</span>

Css代码片段如下：

.numbers-scroll00 {
   margin-top: -10 * $marginTop;
   animation: scrollNumber0 1s linear 1 normal;
   -moz-animation: scrollNumber0 1s linear 1 normal;
   -webkit-animation: scrollNumber0 1s linear 1 normal;
   -o-animation: scrollNumber0 1s linear 1 normal;
}
@keyframes scrollNumber0 {
   0% { margin-top: 0px; }
   100% { margin-top: -1100;}
}

三、使用方式

1. 安装依赖：

npm install numbers-scroll --save

2. 引入数字滚动组件的两种示例：

// 示例1
import React, { useState } from 'react'
import NumbersScroll from 'numbers-scroll'

const MyNumberScroll = () => {
    const [number, setNumber] = useState(896507);
    return (
        <div className="example-container">
            <NumbersScroll
                split={true}
                value={number}
                numberStyle={{
                fontSize: 50,
                background: "#51a4e9",
                color: "#fff",
                marginLeft: 2,
                marginRight: 2
                }}
            />
        </div>
    )
}
// 示例2
import React, { Component } from "react"
import NumbersScroll from 'numbers-scroll'

class MyNumberScroll extends Component {
  constructor(props) {
    super(props)
    this.state = {
      number: 896507
    }
  }
  render() {
    const { number } = this.state
    return <div className="example-container">
      <NumbersScroll
        split={true}
        value={number}
        numberStyle={{
          fontSize: 50,
          background: "#51a4e9",
          color: "#fff",
          marginLeft: 2,
          marginRight: 2
        }}
      />
    </div>
  }
}

四、参数说明

为了能够让组件应用在更多场景中，可以传入4个参数：split，value，numberStyle，containerStyle；其中numberStyle，containerStyle可以分别控制数字和容器的样式，用户可以随时调整以适应自己的场景。

numbers-scroll这个组件目前仅支持react，可以用于多种场景。如果需要支持vue或者其他功能需求的小伙伴，请给我留言吧。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK