一个react的关于统计数字的动画---Scoreboard

Sike 发布于2019-08-22 18:20 / 745人阅读

摘要：所有动画都是做的，性能应该是最优的了。动画的时间数字的样式外框的样式的数据变化，是我随机产生的。。如果大家有任何关于这个动画扩展的需求可以直接提的。我尽量第一时间反馈，毕竟我是以挣为目的的，哈哈哈哈

呃呃呃，具体这个效果是不是叫这个名，我不知道，自己起的名字
具体效果直接看这个地址，https://951565664.github.io/S...
我研究了半天，也没搞懂gif 怎么做的。
废话不多说了。开始正题

----------------------------------我是分割线，线割分是我 -----------------------------
提前说明一下，demo的数据变化，是我随机产生的。。而大家用到的时候肯定是正式项目需求。那么如果值不变，是不会render内部的。所以外层尽管无节操调用。所有动画都是css做的，性能应该是最优的了。

Scoreboard Install

npm install scoreboard-react --save

yarn install scoreboard-react --save

Usage

import Scoreboard from "scoreboard";

Props

Props	desc	type	default
transitionDuration	动画的时间	String	0.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 (
            
                
                    
                        
                    
                
                
                    
                
            
        );
    }
}
ReactDOM.render(, document.getElementById("root"));

demo的数据变化，是我随机产生的。。而大家用到的时候肯定是正式项目需求。那么如果值不变，是不会render内部的。所以外层尽管无节操调用。

如果大家有任何关于这个动画扩展的需求可以直接提的。我尽量第一时间反馈，毕竟我是以挣star为目的的，哈哈哈哈

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95753.html

Python学习之路13-记分

摘要：之所以这里要添加这四行代码，其实是为了当你重新开始也就是第二次及以后点击按钮游戏时，计分板能正确显示。当第一运行游戏时，没有这四行也能正确显示计分板。《Python编程：从入门到实践》笔记。本篇是Python小游戏《外星人入侵》的最后一篇。 1. 前言本篇我们将结束Pygame小游戏《外星人入侵》的开发。在本篇中，我们将添加如下内容：添加一个Play按钮，用于根据需要启动游戏以...

tommego 2019-07-30 16:40 评论0 收藏0
Apache 工作的三种模式：Prefork、Worker、Event

摘要：的三种工作模式服务器目前一共有三种稳定的，多进程处理模块模式。模式下所能同时处理的请求总数是由子进程总数乘以值决定的，应该大于等于。默认最大的子进程总数是，加大时也需要显式声明最大值是。 Apache 的三种工作模式（Prefork、Worker、Event） Web服务器Apache目前一共有三种稳定的MPM（Multi-Processing Module，多进程处理模块）模式。它...

learning 2019-07-24 10:50 评论0 收藏0
Apache 工作的三种模式：Prefork、Worker、Event

摘要：的三种工作模式服务器目前一共有三种稳定的，多进程处理模块模式。模式下所能同时处理的请求总数是由子进程总数乘以值决定的，应该大于等于。默认最大的子进程总数是，加大时也需要显式声明最大值是。 Apache 的三种工作模式（Prefork、Worker、Event） Web服务器Apache目前一共有三种稳定的MPM（Multi-Processing Module，多进程处理模块）模式。它...

FWHeart 2019-07-25 14:35 评论0 收藏0