探究countup.js

发布时间：2023-05-20

一、countup.js效果

countup.js是一个用于数字计数动画的Javascript库。它可以将数字动态地从一个起始值增加到一个结束值，实现数字计数效果的动画。使用countup.js可以实现比如页面上的销售额、访问量、时间倒计时等数字效果的展示。下面我们通过示例来看看countup.js的效果。

<!DOCTYPE html>
<html>
<head>
	<title>countup.js示例</title>
	<script src="https://cdn.jsdelivr.net/npm/countup.js@2.0.7/dist/countUp.min.js"></script>
</head>
<body>
	<span id="count">0</span>
	<button onclick="startCount()">开始计数</button>
	<script>
		var count = new CountUp('count', 0, 1000);
		function startCount() {
			count.start();
		}
	</script>
</body>
</html>

在这个示例中，我们在页面上创建了一个初始值为0的span元素，点击“开始计数”按钮后会实现这个数字从0到1000的计数效果。我们使用了countup.js提供的CountUp对象创建了一个count实例，指定了动画的起始值和结束值，并在按钮的点击事件中调用了count.start()方法，开始动画效果。

二、countup.js封装和应用

使用countup.js时，我们还可以对其进行封装，进一步提高代码的复用性和可读性。下面我们给出一个示例。

function startCountup(id, start, end, duration, options) {
	var count = new CountUp(id, start, end, 0, duration, options);
	if (!count.error) {
		count.start();
	} else {
		console.error(count.error);
	}
}

在这个例子中，我们定义了一个名为startCountup的函数，它接收五个参数：id为数字效果所在元素的id，start为起始值，end为结束值，duration为持续时间（毫秒），options为可选参数，可以配置数字效果的一些选项。函数内部创建了一个count实例，并使用count.start()方法启动动画效果，同时也处理了错误异常的情况。这样我们在使用countup.js时只需要调用这个封装好的函数，将需要的数字效果的id、起始值、结束值、持续时间等参数传递过去即可。

三、countup.js的uniapp应用

在uniapp开发中，我们也可以使用countup.js来实现数字效果的动画展示。下面我们给出一个uniapp的示例。

<template>
	<view class="count-container">
		<view class="count-item">{{count1}}</view>
		<view class="count-item">{{count2}}</view>
		<view class="count-item">{{count3}}</view>
	</view>
</template>
<script>
	import CountUp from "@/common/countUp.min.js"
	export default {
		data() {
			return {
				count1: 0,
				count2: 0,
				count3: 0
			}
		},
		onLoad() {
			this.startCountup('count1', 0, 1000);
			this.startCountup('count2', 0, 2000);
			this.startCountup('count3', 0, 500);
		},
		methods: {
			startCountup(id, start, end, duration = 3000, options) {
				var count = new CountUp(id, start, end, 0, duration, options);
				if (!count.error) {
					count.start(() => {
						this[id] = end;
					});
				} else {
					console.error(count.error);
				}
			}
		},
	}
</script>

在这个uniapp示例中，我们在页面上创建了三个需要计数的数字元素，分别用count1、count2、count3的id属性标识，然后在页面加载时调用了startCountup方法启动数字计数动画。在startCountup内部，我们创建了一个count实例，指定了数字计数的起始值、结束值、持续时间，并使用count.start()方法开始动画效果，同时定义了在动画完成时的回调函数，更新数据并重新渲染页面。这样就可以在uniapp中方便地使用countup.js来实现数字效果的动画了。

四、countup.js的更新方法

在countup.js中，还提供了额外的update方法，用于在动画进行过程中更新数字计数的值。下面我们给出一个示例。

<!DOCTYPE html>
<html>
<head>
	<title>countup.js示例</title>
	<script src="https://cdn.jsdelivr.net/npm/countup.js@2.0.7/dist/countUp.min.js"></script>
</head>
<body>
	<span id="count">0</span>
	<button onclick="startCount()">开始计数</button>
	<button onclick="updateCount()">增加100</button>
	<script>
		var count = new CountUp('count', 0, 1000);
		function startCount() {
			count.start();
		}
		function updateCount() {
			count.update(count.endVal + 100);
		}
	</script>
</body>
</html>

在这个示例中，我们同样创建了一个count实例，然后使用count.start()方法开始数字计数动画。我们还定义了一个updateCount方法，它调用了count.update()方法，传递动画的结束值加100作为参数，这样动画效果就会重新开始，并从目前值开始增加到新的结果值。这个update方法提供了一个方便的功能，可以在数字计数动画进行中，通过程序动态地更新数字的结果值。

推荐文章