use

2023-04-24 12:16| 来源: 网络整理| 查看: 265

use-count-up

React/React Native组件和钩子来设置向上或向下计数到一个数字的动画

Key features

🏆 与类似功能解决方案相比，实现更轻，捆绑规模更小🎏 声明性API（不再需要对start()和update()的命令调用）📱 React Native支持iOS和Android🌳 Tree-shakable 🗄️ Server-side渲染（SSR）兼容性

Installation yarn add use-count-up Demo

检查CodeSandbox上的React演示和Expo零食上的React Native演示以开始。

组件基本用法 import { CountUp } from 'use-count-up' const MyComponent = () =>

在React Native项目中使用CountUp组件时，应将其包装在Text组件中，如下所示：

import { Text } from 'react-native' import { CountUp } from 'use-count-up' const MyComponent = () => ( ) 钩子的基本用法

钩子接受与组件相同的属性。React和React Native的用法相同。

import { useCountUp } from 'use-count-up' const MyComponent = () => { const { value } = useCountUp({ isCounting: true, end: 1320, duration: 3.2, }) return value } Props

组件和挂钩接受相同的道具。它们完全可以互换。

Prop Name Type Default Description isCounting boolean false 播放和暂停计数动画 start number 0 Initial value end number - Target value duration number - 动画持续时间（秒）。如果设置了end，则默认为2秒 decimalPlaces number - 小数分隔符后的小数位数。默认为start和end属性的最大小数位数计数 decimalSeparator string - 小数分隔符 thousandsSeparator string - 千位分隔符字符 easing 字符串|函数 easeOutCubic 类型：easeOutCubic | easeInCubic | linear | easing func easing函数，用于控制动画进度 formatter function - Type：（value:number）=>number | string | node格式化输出值的函数。它具有最高优先级，因此忽略所有其他格式选项 updateInterval number 0 更新间隔（秒）。确定动画值更改的频率。当设置为0时，该值将在每个关键帧上更新 children function - 类型：（{value:number，reset：（）=>void}）=>number | string | node CountUp component-children prop onComplete function - 在完整处理程序上键入：（）=>void |{shouldreat:boolean，delay:number}。通过在秒内返回一个shouldRepeat等于true和delay的对象来重复动画。 onUpdate function - 类型：（currentValue:number | string | node）=>void On value update事件处理程序 Return values

钩子返回当前的向上计数值和重置方法以重置动画。

import { useCountUp } from 'use-count-up' const { value, reset } = useCountUp({ isCounting: true })

组件的子渲染函数将接收当前的累积值和重置方法作为道具，以重置动画。

import { CountUp } from 'use-count-up' const MyComponent = () => ( {({ value, reset }) => value} ) 为什么使用toLocaleString和formatter

数字格式因语言组而异。例如，数字3842.45在德语中的格式为3.842,45，而在英式英语中的格式为3,842.45（找出不同的小数点和千位分隔符）。Number.toLocaleString()是一个built-inJS方法，它返回一个带有数字language-sensitive表示的字符串。该方法的基本实现将检测用户计算机上设置的默认区域设置，并相应地格式化数字。浏览器对toLocaleString的支持非常好。

如果您希望用户的地理/国家分布存在差异，那么这是必须的。将toLocaleString与计数组件或挂钩一起使用的最简单方法是使用formatter属性，如下所示：

import { CountUp } from 'use-count-up' const MyComponent = () => ( value.toLocaleString()} /> )

toLocaleString方法接受具有两个参数的对象，locale和options，这允许进一步自定义数值。设置第一个参数locale，允许使用特定的区域设置和回退选项。第二个参数options，将允许您以自定义方式格式化值。例如，您可以选择添加最小和最大小数位数，或设置货币。请记住，并非所有浏览器都支持locale和options参数。

Recipes Reset animation

将关键点道具传递给CountUp组件，并在动画应该重复时更改它。当start或end值的更改应该重新开始动画时，也可以使用它。

import { CountUp } from 'use-count-up' const MyComponent = ({ end }) => 完成后重复动画

从onComplete处理程序返回键为shouldRepeat: true的对象。可以选择设置重复之前的delay。在下面的示例中，动画将在2秒内重复

import { CountUp } from 'use-count-up' const onComplete = () => { // do your stuff here return { shouldRepeat: true, delay: 2 } } const MyComponent = () => ( ) 数到无穷大

不要提供end和duration道具。startprop可以设置为任何值

import { CountUp } from 'use-count-up' const MyComponent = () => 向上/向下计数n-seconds

将easing设置为“线性”，将duration设置为它应该向上/向下计数的秒数。updateInterval可以设置为1，因此它每秒更新一次。以下是10-secondcount-down的示例：

import { CountUp } from 'use-count-up' const MyComponent = () => ( { // it will fire once every second }} /> ) Browser support

组件和钩子支持所有以es6为目标的现代浏览器。不再支持Internet Explorer（IE）。

【本文地址】

公司简介

联系我们