基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效


Posted in Javascript onApril 18, 2019

实现目标

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

基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效

解决思路

主要的解决要点如下:

如何实现数字动画的效果
如何监听滚动条到指定的位置
分解要点寻找解决思路:

一、如何实现数字动画的效果

在vue的官方文档(https://cn.vuejs.org/v2/guide... 中,实现了数字动画特效。于是参照此示例基于tween来完成。

基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效

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

使用 window.addEventListener('scroll',this.handleScroll)监听窗口的滚动,进行位置判断。

实现代码

1.下载tween.js

cnpm install tween.js --save-dev

2.引入tween.js

import TWEEN from 'tween.js'
// ***.vue,注意这里千万别在main.js中引入,否则运行会报:TWEEN is undefined,
// 这边存疑,不知道为什么在main.js中不执行

3.实现数字动画效果和监听滚动条

<div class="sectionRight">
 <span class="numberInit" style="display:none">{{num1}}</span>
 <p class="numberGrow numberGrow1">{{formatNum1}}</p>
 <p class="sectionTxt">抵御攻击</p>
</div>
export default {
 computed:{
 formatNum1(){
  let num = this.animatedNum1
  return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
 }
 },
 data () {
 return {
  num1: 0,
  animatedNum1: 0
 }
 },
 watch: {
 num1: function(newValue, oldValue) {
  var vm = this
  function animate (time) {
  requestAnimationFrame(animate)
  TWEEN.update(time)
  }
  new TWEEN.Tween({ tweeningNumber: oldValue })
  .easing(TWEEN.Easing.Quadratic.Out)
  .to({ tweeningNumber: newValue }, 5000)
  .onUpdate(function () {
   vm.animatedNum1 = this.tweeningNumber.toFixed(0) 
   //toFixed(num):num代表小数点后几位
  })
  .start()
  animate()
 }
 },
 methods:{
 setAnimatedNum(){
  this.num1 = 3567892881
 },
 handleScroll(){  
  let windowH = document.body.clientHeight
  let docSrollTop = $(document).scrollTop() //文档卷动值
  let clientH = $(window).height() //视窗大小
  let sectionTop = $(".sectionBody").offset().top //动态文字模块距离文档头部的距离
  let sectionH = $(".sectionBody").height()
  if((docSrollTop + clientH - sectionTop) >= 0 
  && (docSrollTop - sectionTop - sectionH) <= 0){
  this.setAnimatedNum()
  }
 }
 },
 mounted(){
 this.handleScroll()
 window.addEventListener('scroll',this.handleScroll)
 }
}

github源码:https://github.com/Mirror1988...
演示地址 :https://mirror198829.github.i...

总结

以上所述是小编给大家介绍的基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript 在线压缩和格式化收藏
Jan 16 Javascript
JS 常用校验函数
Mar 26 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
Dec 12 Javascript
jQuery点击tr实现checkbox选中的方法
Mar 19 Javascript
angular中使用路由和$location切换视图
Jan 23 Javascript
JQuery select(下拉框)操作方法汇总
Apr 15 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
Feb 20 Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
VUE注册全局组件和局部组件过程解析
Oct 10 Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 #Javascript
详解Vue中的scoped及穿透方法
Apr 18 #Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 #Javascript
Vue 进阶之路(三)
Apr 18 #Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 #Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 #Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 #Javascript
You might like
解析php如何将日志写进syslog
2013/06/28 PHP
php使用变量动态创建类的对象用法示例
2017/02/06 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
详解Python中的Lock和Rlock
2021/01/26 Python
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
餐饮主管岗位职责
2013/12/10 职场文书
顶撞老师检讨书
2014/02/07 职场文书
药剂专业自荐书
2014/06/20 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
学校远程教育工作总结
2015/08/11 职场文书
上班旷工检讨书
2015/08/15 职场文书
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python
如何利用python创作字符画
2022/06/25 Python
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang