基于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 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 Javascript
JS判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
JS获取URL中的参数数据
Dec 05 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
JavaScript操作URL的相关内容集锦
Oct 29 Javascript
实例详解ECMAScript5中新增的Array方法
Apr 05 Javascript
深入理解js promise chain
May 05 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 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
域名查询代码公布
2006/10/09 PHP
php简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
phpfpm的作用和用法
2019/10/10 PHP
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
2020/07/24 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
为什么要用EJB
2014/04/17 面试题
买房子个人收入证明
2014/01/16 职场文书
放飞中国梦演讲稿
2014/04/23 职场文书
商务英语专业求职信
2014/06/26 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
领导干部作风建设自查报告
2014/10/23 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
《和时间赛跑》读后感3篇
2019/12/16 职场文书