写点什么

React 数字滚动组件 numbers-scroll

作者:观纵科技
  • 2023-03-14
    江苏
  • 本文字数:1777 字

    阅读完需:约 6 分钟

React数字滚动组件 numbers-scroll

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

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

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

数字滚动效果

一、设计原理

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


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


二、实现方式

初始状态中,每个数字展示的窗口下边都有 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. 引入数字滚动组件的两种示例:

// 示例1import 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> )}// 示例2import 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 或者其他功能需求的小伙伴,请给我留言吧。

用户头像

观纵科技

关注

构建可观测性、一体化的综合运维观测平台 2023-02-03 加入

还未添加个人简介

评论

发布
暂无评论
React数字滚动组件 numbers-scroll_JavaScript_观纵科技_InfoQ写作社区