一個react的關於統計数字的動畫---Scoreboard

2023年10月6日 158次阅读 来源: 小哈

呃呃呃，詳細這個結果是不是叫這個名，我不知道，本身起的名字
詳細結果直接看這個地點，https://951565664.github.io/S…
我研討了半天，也沒搞懂gif 怎樣做的。
空話不多說了。最先正題

———————————-我是分割線，線割分是我 —————————–
提早申明一下，demo的數據變化，是我隨機發生的。。而人人用到的時刻肯定是正式項目需求。那末假如值穩定，是不會render內部的。所以外層只管無節操挪用。一切動畫都是css做的，機能應該是最優的了。

Scoreboard

Install

npm install scoreboard-react --save

or

yarn install scoreboard-react --save

Usage

import Scoreboard from 'scoreboard';

Props

Propsdesctypedefault
transitionDuration動畫的時候String0.5s
numberStyle数字的款式Object{}
style外框的款式Object{}

Demo

D:codeSpaceScoreboardexampletest

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Scoreboard from 'scoreboard-react';
import styles from './index.less'

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
class App extends Component {
    state = {
        key: 2
    }
    changeNum = (params) => {
        this.setState({
            key: parseInt(Math.random() * 10) + 2
        })
    }
    componentDidMount = () => {
        this.timer = setInterval(this.changeNum, 1000)
    }
    componentWillMount = () => {
        clearInterval(this.timer)
    }

    render() {
        let numberStr = new Array(this.state.key).fill(1).map((item) => parseInt(Math.random() * 10)).reduce((prev, curr, index, array) => '' + prev + curr);
        return (
            <div className={styles["wrapper"]}>
                <div className={styles.forkMe} >
                    <a href="https://github.com/951565664/Scoreboard" target="_">
                        <img
                            src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67"
                            alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"
                        />
                    </a>
                </div>
                <div onClick={this.changeNum} style={{ width: '100%' }}>
                    <Scoreboard numberStr={numberStr} transitionDuration={'1s'} numberStyle={{ color: '#c40000', fontSize: '20px' }} />
                </div>
            </div>
        );
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

demo的數據變化，是我隨機發生的。。而人人用到的時刻肯定是正式項目需求。那末假如值穩定，是不會render內部的。所以外層只管無節操挪用。

假如人人有任何關於這個動畫擴大的需求能夠直接提的。我只管第一時候反應，畢竟我是以掙star為目標的，哈哈哈哈

    原文作者：小哈
    原文地址: https://segmentfault.com/a/1190000015415825
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞