React，启动！

本项目复刻原神加载时的元素进度条，使用React与babel开发，仅在babel上通过使用测试。以下是基本使用示例。

import { GIProgress } from "genshin-progress";
return(<GIProgress num={93} width={400} />)

Have a try

更改进度

import { GIProgress } from "genshin-progress";
const [progress,setProgress]=useState(0);
<Slider max={100} min={0} onChange={setProgress} /> //import {Slider} from 'antd'
return(<GIProgress num={progress} width={400} />);

更改宽度

import { GIProgress } from "genshin-progress";
const [width,setWidth]=useState(0);
<Slider max={1000} min={300} onChange={setWidth} /> //import {Slider} from 'antd'
return(<GIProgress num={93} width={width} />);

真实的进度条

如果加载得太顺，就没那感觉了，必须卡岩，而卡岩正好是num={93}的时候

进度:0


const [num, setNum] = useState(0);
const handleClick = () => {
    setTimeout(() => setNum(6), 500);
    setTimeout(() => setNum(20), 1000);
    setTimeout(() => setNum(25), 1200);
    setTimeout(() => setNum(40), 1400);
    setTimeout(() => setNum(50), 1500);
    setTimeout(() => setNum(70), 1800);
    setTimeout(() => setNum(90), 2000);
    setTimeout(() => setNum(93), 2100);
    setTimeout(() => setNum(100), 5000);
};
return(<>
    <Button onClick={handleClick}>播放动画</Button>
    <GIProgress num={num} width={600} />
    进度:{num}
</>)

更真实的进度条

实际业务我们并不能控制值卡在93，所以就需要一个映射算法来重映射这些数字，

当传入[0,30]的时候，等比输出[0,93]；输入(10,100)的时候输出93；输入100的时候，输出100

传入:0
实际传入:0


const [num, setNum] = useState(0);
const mapValue = (input) => {
    if (input >= 0 && input <= 30) {
        // 输入范围 [0, 10]
        const output = (input / 30) * 93;
        return output
    } else if (input > 30 && input < 100) {
        // 输入范围 (10, 100]
        return 93
    } else if (input == 100) {
        // 输入范围 (10, 100]
        return 100
    }
}
return(<>
    <Slider max={100} min={0} onChange={setNum} />
    <GIProgress num={mapValue(num)} width={600} />
</>)