炫酷数字动画效果

今天发现一个很不错的数字动画库，很丝滑的动画效果。数字在切换的时候会有一个滚动的效果，能够提升用户体验的同时，还能使界面更加生动有趣。

这个动画库的名字是MotionNumber，它是一个基于Framer Motion的React组件，专门用于创建平滑的数字动画。这个库非常适合需要展示动态数据的场景，比如统计图表、仪表板、倒计时等。

官方网站：https://motion-number.barvian.me

用途

MotionNumber的主要用途是为数字添加平滑的过渡动画，使得数字的变化更加自然和吸引人。它可以用于：

• 实时数据展示，如股票价格、用户数量等。
• 仪表板上的动态指标。
• 倒计时和计时器。
• 任何需要展示数字变化的场景。

如何使用

首先，你需要安装Framer Motion和MotionNumber库。可以通过npm或yarn来安装：

npm install framer-motion motion-number

或者

yarn add framer-motion motion-number

然后可以在你的React组件中这样使用MotionNumber：

import MotionNumber from 'motion-number';

<MotionNumber
    value={value}
    format={{ notation: 'compact' }} // 使用紧凑格式
    locales="en-US" // 指定本地化设置
/>

在这里，value是你想要展示的数字，format和locales属性用于控制数字的显示格式。

自定义动画

MotionNumber允许你通过transition属性来自定义动画效果。例如你可以设置弹簧动画的持续时间和反弹效果：

import { easeOut } from 'framer-motion';

<MotionNumber
    transition={{
        layout: { type: 'spring', duration: 0.7, bounce: 0 },
        y: { type: 'spring', duration: 0.7, bounce: 0.25 },
        opacity: { duration: 0.7, ease: easeOut, times: [0, 0.3] }
    }}
/>

自定义样式

除了动画，你还可以自定义MotionNumber的CSS样式。例如你可以调整数字的渐变遮罩高度和宽度，或者设置行高来控制数字之间的垂直间距：

[data-motion-number] {
    line-height: 0.8 !important;
}

组合使用

MotionNumber提供了四个渲染属性（before、first、last、after），允许你将其他内容与数字动画同步。这可以用来创建更复杂的动画效果。

懒加载版本

如果你在使用<LazyMotion>，可以通过以下方式导入MotionNumber的懒加载版本：

import MotionNumber from 'motion-number/lazy';

限制

在使用MotionNumber时，需要注意以下几点限制：

• 科学记数法和工程记数法目前不支持。
• 如果选中数字内部的文本，不会遵循::selection的颜色变化。
• <LayoutGroup>目前不与MotionNumber兼容，可能会导致数字动画出现明显的抖动。

最后

MotionNumber是一个强大的库，可以帮助你轻松地为你的React应用添加动态数字动画。通过简单的配置，你可以创建出既美观又功能丰富的动态数据展示效果。无论是在仪表板上展示实时数据，还是在网站上添加一个吸引人的倒计时，MotionNumber都是一个值得尝试的工具。

---

看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）