CountUp.js 实现数字增长动画 Vue

时间:2024-10-14 08:04:08
// 括号内为默认值 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动画 }