CountUp.js 实现数字增长动画 Vue
// 括号内为默认值
interface CountUpOptions {
startVal?: number; // 开始数字 (0)
decimalPlaces?: number; // 小数位数 (0)
duration?: number; // 动画时间:秒 (2)
useGrouping?: boolean; // ,的位置。示例: 1,000 vs 1000 (true)
useIndianSeparators?: boolean; // ,的位置。示例: 1,00,000 vs 100,000 (false)
useEasing?: boolean; // ease animation (true)
smartEasingThreshold?: number; // smooth easing for large numbers above this if useEasing (999)
smartEasingAmount?: number; // amount to be eased for numbers above threshold (333)
separator?: string; // 分隔符 (',')
decimal?: string; // 小数点 ('.')
// easingFn: easing function for animation (easeOutExpo)
easingFn?: (t: number, b: number, c: number, d: number) => number;
formattingFn?: (n: number) => string; // 格式化为字符串
prefix?: string; // 在结果前面添加字符
suffix?: string; // 在结果后面添加字符
numerals?: string[]; // 数字替换。numeral glyph substitution
enableScrollSpy?: boolean; // 当视图可见时开始动画
scrollSpyDelay?: number; // 视图可见后,延迟多久(单位:ms)开始动画
scrollSpyOnce?: boolean; // 只运行一次
onCompleteCallback?: () => any; // 动画完成后的回调函数
onStartCallback?: () => any; // 动画开始时的回调函数
plugin?: CountUpPlugin; // 插入CountUp动画
}