安装
npm install @tweenjs/tween.js --save
使用
在componentDidMount钩子函数中引入tween函数传参调用即可
import TWEEN from '@tweenjs/tween.js'
const animate = () => {
if (TWEEN.update()) {
requestAnimationFrame(animate);
}
}
/**
* @param {*} context 上下文
* @param {*} number 新数据
* @param {*} field state的字段名
* @param {*} duration 动画持续时间
*/
export const tween = (context, number, field, duration = 900) => {
new TWEEN.Tween({
number: 0
}).to({
number: number
}, duration).onUpdate(tween => {
context.setState({[field]: tween.number.toFixed(0)})
}).start()
animate()
}