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

2018-07-17 admin

实现目标

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

解决思路

主要的解决要点如下:

  1. 如何实现数字动画的效果
  2. 如何监听滚动条到指定的位置

分解要点寻找解决思路:

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

在vue的官方文档(https://cn.vuejs.org/v2/guide…) 中,实现了数字动画特效。于是参照此示例基于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)
  }
}

原文链接:https://segmentfault.com/a/1190000015665620

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-36209.html

文章标题:基于vue,如何实现滚动条滚动到指定位置,对应位置数字进行tween特效

相关文章
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot; style=&quot;width: 100%; height:100%;&quot;&gt...
2017-02-17
HTML5究竟会火到什么地步
这已经是第N次,HTML5火热了起来,这次的火热是否可以延续? H5的最大优势就是可以在网页上直接调试和修改,而且更重要的是,它几乎不用考虑用户的机型与适配性问题。智能手机主要被分裂为两大系统:Android和iOS,一个做应用的团队,怎么...
2015-11-12
如何为高负载网络优化Nginx 和 Node.js?
译者:AlfredCheung 在搭建高吞吐量web应用这个议题上,NginX和Node.js可谓是天生一对。他们都是基于事件驱动模型而设计,可以轻易突破Apache等传统web服务器的C10K瓶颈。预设的配置已经可以获得很高的并发,不过,...
2015-11-12
可以从CSS框架中借鉴到什么
现在很多人会使用 CSS 框架进行快速建站。   那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。   当然对于一些大...
2016-03-11
纯JS实现旋转图片3D展示效果
CSS: &lt;style type=&quot;text&#x2F;css&quot;&gt; #show{position:relative;margin:20px auto;width:800px;} .item{position:...
2017-03-22
js实现手机拍照上传功能
在前段时间的项目开发中,用到了拍照上传的地方,后来发现了最为简单的一种方法,现总结如下: &lt;form id=&quot;form&quot; method=&quot;post&quot; action=&quot;http:&#x2...
2017-03-06
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
如何编写干净高效的CSS代码
其实CSS的学习并不困难,但在一些较为大型的项目中就显得杂乱无章,变得很难管理,尤其是不同的人编写CSS的风格总会略有不同,从团队合作的层面上来说,就更加难以沟通,所以,我们为此总结了一些如何实现高效整洁的CSS代码原则: 使用Reset但...
2015-11-12
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
从 JavaScript 到 TypeScript - 声明类型
从 JavaScript 语法改写为 TypeScript 语法,有两个关键点,一点是类成员变量 (Field) 需要声明,另一点是要为各种东西 (变量、参数、函数 / 方法等) 声明类型。而这两个点直接引出了两个关键性的问题,有哪些类型?...
2017-06-05
回到顶部