AnimatedNumber

从起始数字到达最终数字

基本用法

import {AnimatedNumber} from 'react-native-maui';

<AnimatedNumber style={{ fontSize: 40, fontWeight: 'bold', marginHorizontal: 10 }} value={10} toValue={113} />
<AnimatedNumber 
  style={{ fontSize: 40, color: 'orange', fontWeight: 'bold', marginHorizontal: 10 }} 
  toFixed={2} 
  value={0.11} 
  toValue={1.23}
/>

自定义样式

import {AnimatedNumber} from 'react-native-maui';

<AnimatedNumber 
  easing={'ease'} 
  style={{ fontSize: 40, fontWeight: 'bold', marginHorizontal: 10, color: '#f1441d' }} 
  value={0} 
  toValue={100}
  duration={2000}
  delay={1000}
/>

属性

名称	描述	类型	默认值
value Required	起始数字	number	-
toValue Required	最终数字	number	-
style	数字样式	TextStyle	-
toFixed	保留小数位数	number	0
duration	动画持续时间，单位ms。	number	1000
delay	动画延迟启动时间，单位ms。	number	500
easing	动画执行曲线。	linear 、 ease 、 EasingFunction 、 EasingFunctionFactory	linear