基于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 相关文章推荐
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
Aug 15 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
js实现select组件的选择输入过滤代码
Oct 14 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
jQuery中$.extend()用法实例
Jun 24 Javascript
提高jQuery性能优化的技巧
Aug 03 Javascript
js实现车辆管理系统
Aug 26 Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 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导入导出excel实例
2013/10/25 PHP
PHP函数in_array()使用详解
2014/08/20 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
uniapp实现横向滚动选择日期
2020/10/21 Javascript
Array.filter中如何正确使用Async
2020/11/04 Javascript
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
Python正则表达式指南 推荐
2018/10/09 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
Python如何实现的二分查找算法
2020/05/27 Python
浅谈python 类方法/静态方法
2020/09/18 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
自我鉴定200字
2013/10/28 职场文书
乡镇庆八一活动方案
2014/02/02 职场文书
感恩节红领巾广播稿
2014/02/11 职场文书
2014年3.15团委活动总结
2014/03/16 职场文书
个人作风建设自查报告
2014/10/22 职场文书
处级干部考察材料
2014/12/24 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
nginx部署多前端项目的几种方法
2021/05/25 Servers