反应-原生-活体-数

数字动画的自定义本地组件 .

• 实例
• 基础
• 格式化
• 时间安排函数
• 计数
• 道具

安装

$ yarn add @bankify/react-native-animate-number

使用量

import AnimateNumber from '@bankify/react-native-animate-number'

实例

基础

唯一需要的财产是 value,当此属性发生变化时,它会自动插入 值和进行动画.

<AnimateNumber value={100}/>

格式化

您可以通过指定自定义文本格式 formatter 道具,这个财产必须是 function。 。 。 .

<AnimateNumber value={100} formatter={(val) => {
    return '$ ' + parseFloat(val).toFixed(2)
  }}/>

时间安排函数

有三个内置的计时功能 linear, (中文(简体) ), easeIn,以及 easeOut。 。 。 . 也可以自定义您的计时功能, 参见示例 Bellow .

内置计时函数

<AnimateNumber value={100} timing="linear"/>
<AnimateNumber value={100} timing="easeOut"/>
<AnimateNumber value={100} timing="easeIn"/>

自定义的时间函数

自定义的计时函数返回 a number 它代表动画框的长度.

interval

动画框架的基本间隔长度,默认值为 14 m. 您可以通过 interval 道具 (英语).

progress

0到1之间的浮点数,指动画的进步.

<AnimateNumber value={200}
  countBy={1}
  timing={(interval, progress) => {
    // slow start, slow end
    return interval * (1 - Math.sin(Math.PI*progress) )*10
  }}/>

上面的例子将制作这样的动画

计数

默认情况下,这个组件计算每个动画框架的数值递增, 但您可以通过设置道具自定义此规则 countBy。 。 。 .

<AnimateNumber value={100} countBy={1} />

但记住,如果 countBy 数值比 value动画可能会持续很长一段时间. 和下面的例子一样,它将任务为150秒来完成动画.

<AnimateNumber value={10000} interval={15} countBy={1} />

自定义内容渲染

默认情况下,此组件将生成 <Text> 组件。 你可以提供你的 通过设置道具自有组件 renderContent。 。 。 .

<AnimateNumber value={100} countBy={1} renderContent={(displayValue) => #Your own component} />

道具

value:number(必须)

动画数字组件的值 .

countBy:number(可选默认为 null(中文(简体) )

设定此属性以强制组件的值由此数字增减 .

interval:number(可选默认为 14(中文(简体) )

每个动画框的基础间隔, 单位 ms。 。 。 .

steps:number(可选默认为 45(中文(简体) )

设定动画的总帧数,比如如果间隔为14个而步为30个,动画在使用线性计时功能时会需要14x30ms来完成.

timing: 'linear' | 'easeOut' | 'easeIn' | () => number

自定义计时函数或使用默认计时函数.

formatter: () => string(可选)

此道具接受一个 function 返回一个 string 作为显示值.

renderContent: (displayValue: number) => React.Node (可选)

此道具接受一个 function 以显示值为参数 期望返回值为反应节点

onProgress: () => void(可选)

当文本状态更新时触发函数 .

onFinish: () => void(可选)

动画完成后触发函数 .