基于vue 滚动条到与补间特效的指定位置相对应的数字

实现目标

在浏览各大云平台后，我们发现一个页面特效被频繁使用。以百度云(https://cloud.baidu.com/)为例。进入百度云后，当滚动条滚动到“更可靠的数据支持”模块时，页面数据会开始滚动，增加特效。我的解决方案将在下面介绍，我们希望同行能有更好的解决方案互相交流。

解决方案

主要解决点如下：

如何实现数字动画的效果，如何将滚动条监控到指定位置，并分解关键点寻找解决方案；

一、如何达到数字动画的效果

在vue(https://cn.vuejs.org/v2/guide)的官方文件中。实现了数字动画的特效。然后，参考这个例子，它是基于补间完成的。

二、如何监控滚动条到指定位置

使用窗口。addeventlistener ('scroll '，这。handlesscroll)来监控窗口的滚动并判断位置。

实现代码

1.下载tween.js

cnpm安装tween.js - save-dev

2.引入tween.js

从“tween . js”//* * *”导入补间。vue，请不要在main.js中介绍，否则运行报告会是：TWEEN未定义。//这里有疑问，不知道main.js. 3为什么不执行。实现数字动画效果，监控滚动条。

div class=' section right ' span class=' number init ' style=' display : none ' { num 1 } }/span P class=' number grow number 1 ' { format num 1 } }/P P class=' section txt '抵御攻击/p/div导出默认值{ computed : { format num 1(){ let num=this。动画num1return (num | | 0)。tostring()。替换(/(\ d)(？=(?\d{3}) $)/g，' $1，')}，data () { return { num1: 0，animatedNum1: 0 } }，watch: { num1:函数(newValue，oldValue) { var vm=此函数animate(time){ requestAnimationFrame(animate)TWEEN . update(time)} new TWEEN。补间({ tweeningNumber: oldValue })。放松(TWEEN。放松。二次。出去)。to({ tweeningnumber : new value }，5000)。onupdate (function () {vm。animatednum1=这个。补间号码。to fixed(0)//to fixed(num): num代表几个小数位})。start() animate()}}，methods : { setAnimatedNum(){ this . num 1=3567892881 }，Handlescroll(){ let windowh=document . body . client height let docroll top=$(document)。scroll top()//文档滚动值让clienth=$ (window)。高度()//窗口大小让sectiontop=$('。section body’)。偏移量()。top//动态文本模块和文档头let sectionh之间的距离=$('。section body’)。height()if((docSrollTop client h-section top)=0(docSrollTop-section top-section h)=0){ this . setanimatednum()} }，Mounted(){ this . handlesscroll()window . addeventlistener(' scroll '，this.handlesscroll)}} github源代码：https://github.com/Mirror1988.演示地址：https://mirror 198829 . github I。

摘要

以上就是边肖给大家的介绍，基于vue，通过滚动条滚动到指定位置对应的数字来实现tween的特效。希望对你有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！