vue项目tween方法实现返回顶部的示例代码

来源：动视网责编：小采时间：2020-11-27 22:18:17

vue项目tween方法实现返回顶部的示例代码

vue项目tween方法实现返回顶部的示例代码:一、场景 tween.js是一款可生成平滑动画效果的js动画库当你要实现一个返回顶部的功能时候你会怎么做，大部分人会使用document.body.scrollTop =0；这么写就实现了功能，不过要更加的细腻一点我们不妨用tween的缓动来实现，看看效果如何吧。之前我们

推荐度：

点击下载本文 文档为doc格式

导读vue项目tween方法实现返回顶部的示例代码:一、场景 tween.js是一款可生成平滑动画效果的js动画库当你要实现一个返回顶部的功能时候你会怎么做，大部分人会使用document.body.scrollTop =0；这么写就实现了功能，不过要更加的细腻一点我们不妨用tween的缓动来实现，看看效果如何吧。之前我们

一、场景

tween.js是一款可生成平滑动画效果的js动画库

当你要实现一个返回顶部的功能时候你会怎么做，大部分人会使用document.body.scrollTop =0；这么写就实现了功能，

不过要更加的细腻一点我们不妨用tween的缓动来实现，看看效果如何吧。

之前我们写过tween的相关文章，这里不做介绍了。

二、代码

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <style type="text/css">
 #app{width: 100%; height: 3000px;background: #CCCCCC;}
 .backTop{
 width: 1.5rem;
 height: 1.5rem;
 border: 1px solid #ff0000;
 position: fixed;
 right: 1rem;
 bottom: 2rem;
 border-radius: 50%;
 /*background: url(/static/imgs/backtop20180226.png) no-repeat 40%;*/
 background-size: 70% 100%;
 }
 </style>
 </head>
 <body>
 <div id="app">
 <div @click="backTop()" class="backTop">Top</div>
 </div>
 
 <script type="text/javascript">
 var app = new Vue({
 el:"#app",
 data:{
 
 },
 methods:{
 backTop(){
// * t: current time（当前时间）；
// * b: beginning value（初始值）；
// * c: change in value（变化量）；
// * d: duration（持续时间）。
 var Tween = {
 Linear: function(t, b, c, d) { //匀速运动，想要实现其他的效果可以使用tween的其他方法
 return c * t / d + b; 
 }
 }
 Math.tween = Tween;
 var t = 1;
 const b = document.documentElement.scrollTop;
 const c = 50;
 const d = 5;
 const setInt = setInterval(()=>{
 t--;
 console.log(t)
 if(document.documentElement.scrollTop == 0){clearInterval(setInt)}
 console.log(t);
 const backTop = Tween.Linear(t,b,c,d);
 console.log(backTop);
 document.documentElement.scrollTop = backTop;
 },20)
 }
 }
 })
 </script>
 </body>
</html>

三、requestAnimationFrame改写setInterval方法：

methods:{
 backTop(){
 var Tween = {
 Linear: function(t, b, c, d) { //匀速
 return c * t / d + b; 
 }
 }
 Math.tween = Tween;
 var t = 1;
 const b = document.body.scrollTop;
 const c = 1;
 const d = 1;
 var timer;
 timer= requestAnimationFrame(function fn(){
 if(document.body.scrollTop > 0){
 t--;
 console.log(t)
 console.log(t);
 const backTop = Tween.Linear(t,b,c,d);
 console.log(backTop);
 document.body.scrollTop = backTop;
 timer = requestAnimationFrame(fn);
 }else{
 cancelAnimationFrame(timer)
 }
 })
 }
 }

vue项目tween方法实现返回顶部的示例代码

推荐度：

点击下载本文 文档为doc格式

标签：代码 tween 返回顶部的

热门焦点

vue项目tween方法实现返回顶部的示例代码

vue项目tween方法实现返回顶部的示例代码

vue项目tween方法实现返回顶部的示例代码

最新推荐

猜你喜欢

热门推荐