我正在寻找一种在 React 中为计数器设置动画的方法。
为了示例,我有以下结构的 3 个组件:
- 大师:
- 逻辑组件
- 柜台
(Master是logicComponent和Counter的父级)
逻辑组件将一个数字传递给 master,master 将它传递给应该执行动画的 Counter 组件。 logicComponent 以递增方式发送数字,也就是说,每当那里发生某些事情时,它都会发送更新。
例如,logicCounter 调用 Master 十次以递增计数器,我预计 Counter 将被渲染 10 次,显示 10 个数字。 到目前为止我尝试过的所有事情都导致显示最终数字 (10) 而没有任何递增。
在寻找解决方案之后,我遇到了 Window.requestAnimationFrame(),我正在寻找一种在 React 中实现它的合适方法。
我试图避免使用第 3 方 npms/库。
希望得到您的帮助/想法。 谢谢。
最佳答案
对于 React-JS 中的动画计数器,我使用 'react-count' :围绕 'CountUp.js' 的可配置 React 组件包装器。
请引用:https://github.com/glennreyes/react-countup . 查看现场演示:https://tr8tk.csb.app/ 步骤:
安装:
*npm install react-countup --save*
or
*yarn add react-countup*
简单示例:
import React from 'react';
import { render } from 'react-dom';
import CountUp from 'react-countup';
render(
<CountUp start={0} end={160526} />,
document.getElementById('root')
);
高级示例:
import React from 'react';
import { render } from 'react-dom';
import CountUp from 'react-countup';
const onComplete = () => {
console.log('Completed!');
};
const onStart = () => {
console.log('Started!');
};
render(
<CountUp
className="account-balance"
start={160527.0127}
end={-875.0319}
duration={2.75}
useEasing={true}
useGrouping={true}
separator=" "
decimals={4}
decimal=","
prefix="EUR "
suffix=" left"
onComplete={onComplete}
onStart={onStart}
/>,
document.getElementById('root'),
);
关于javascript - 如何在 React.js 中创建动画计数器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34507924/