num-auto-add：数字自增动画
序言
我们经常在一些好的网站上遇到数字自增的动画效果，为用户提供了更加丰富的交互体验，看起来非常酷。
我之前也有写过，为了方便以后使用，打算将它优化，并上传到npm中。
首先第一步，就是将代码交给chatGPT优化。
可以发现，除了定时器的时间间隔变了，并没有多的变化
继续让chatGPT优化，此时它把用定时器实现动画效果改成用requestAnimationFrame来实现，动画效果更加丝滑了，真不错。
看它输出一大堆，以为很牛逼，然而一运行代码，结果都跑不起来。
总的来说，chatGPT目前只能辅助写代码，逻辑稍微复杂一点就会出错，包括代码的注释都是有问题的，还是得靠自己修修改改。
最终小demo的地址为：num-auto-add - npm (npmjs.com) ，欢迎各位大佬下载使用。
使用教程（vue项目中使用举例）
1.下载包
- 用yarn下载
yarn add num-auto-add - 用npm下载
npm i num-auto-add
2.引入包
import numAutoAdd from "num-auto-add";
3.声明自定义指令
Vue.directive('numAutoAdd', numAutoAdd());
注意：numAutoAdd可以函数接收两个参数
- 第一个参数是设置动画执行的总时间（以毫秒为单位），默认是700ms
- 第二个参数是布尔标志many，用于指示动画是可以执行多次还是只执行一次，默认为true，也就是可以执行多次。
4.给数字绑定指令
到此，就实现数字自增效果了，使用起来非常简单
实现原理
源代码如下：
export default function(totalTime = 700, many = true) {function animateNumber(el, finalNum, startTime) {const currentTime = Date.now();const runTime = currentTime - startTime; // 运行时间const progress = Math.min(runTime / totalTime, 1); // 动画进度el.innerHTML = Math.floor(finalNum * progress); // 当前页面显示的数字if (runTime < totalTime) {requestAnimationFrame(() => animateNumber(el, finalNum, startTime));}}return {// 当被绑定的元素插入到 DOM 时调用inserted: function(el, binding) {// flag用来判断是否能执行动画，防止一个时间段内触发多次动画函数binding.flag = true;// 元素在可视区域内才开始执行动画的函数binding.animate = () => {// 获取元素距离可视区域顶部的距离const top = el.getBoundingClientRect().top;// 获取浏览器可视区域的高度(这里考虑了浏览器兼容的问题)const h =document.documentElement.clientHeight || document.body.clientHeight;// 当元素在可视区域内if (top < h) {// 如果动画没在执行if (binding.flag) {binding.flag = false;const finalNum = el.innerHTML; // 要显示的真实数值animateNumber(el, finalNum, Date.now()); // 执行数字自增动画// 如果只执行一次动画，则解绑滚动事件!many && window.removeEventListener("scroll", binding.animate);}} else {binding.flag = true;}};window.addEventListener("scroll", binding.animate);},// 自定义绑定的组件销毁时，关闭监听器unbind: function(el, binding) {window.removeEventListener("scroll", binding.animate);}};
}
inserted
inserted 属性是一个函数，当元素被插入到 DOM 中时调用。给window添加滚动事件，而回调函数为animate，每次滚动鼠标，都会执行这个函数。
window.removeEventListener("scroll", binding.animate)
animate 函数会检查元素是否出现在可视区域。一旦元素进入视口，就会调用“数字自增动画”animateNumber
if (top < h) {// 如果动画没在执行if (binding.flag) {binding.flag = false;const finalNum = el.innerHTML; // 要显示的真实数值animateNumber(el, finalNum, Date.now()); // 执行数字自增动画// 如果只执行一次动画，则解绑滚动事件!many && window.removeEventListener("scroll", binding.animate);}
animateNumber是一个函数，会计算动画的进度并更新元素的当前值。
function animateNumber(el, finalNum, startTime) {const currentTime = Date.now();const runTime = currentTime - startTime; // 运行时间const progress = Math.min(runTime / totalTime, 1); // 动画进度el.innerHTML = Math.floor(finalNum * progress); // 当前页面显示的数字if (runTime < totalTime) {requestAnimationFrame(() => animateNumber(el, finalNum, startTime));}}
unbind
unbind 属性是一个函数，自定义绑定的组件销毁时调用。此函数将解绑滚动事件，避免占用资源。
// 自定义绑定的组件销毁时，关闭监听器unbind: function(el, binding) {window.removeEventListener("scroll", binding.animate);}
总结
chatGPT在编程方面的成就是非常显著的，它不仅开创了人机交互的新时代，也为技术的发展带来了新的思路和方法，使用chatGPT辅助写代码是大势所趋。另外，它还能辅助我们写文章，例如，该文章的部分内容就是使用AI生成的。
本文链接：https://my.lmcjl.com/post/8419.html
4 评论