微客导航 » 文章资讯 » vue项目tween方法实现返回顶部的示例代码

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

2023-09-15 21:54:05 285

一、场景

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

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

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

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

二、代码








#app{width:100%;height:3000px;background:#CCCCCC;}
.backTop{
width:1.5rem;
height:1.5rem;
border:1pxsolid#ff0000;
position:fixed;
right:1rem;
bottom:2rem;
border-radius:50%;
/*background:url(/static/imgs/backtop20180226.png)no-repeat40%;*/
background-size:70%100%;
}




Top

varapp=newVue({ el:"#app", data:{ }, methods:{ backTop(){ //*t:currenttime（当前时间）； //*b:beginningvalue（初始值）； //*c:changeinvalue（变化量）； //*d:duration（持续时间）。 varTween={ Linear:function(t,b,c,d){//匀速运动，想要实现其他的效果可以使用tween的其他方法 returnc*t/d+b; } } Math.tween=Tween; vart=1; constb=document.documentElement.scrollTop; constc=50; constd=5; constsetInt=setInterval(()=>{ t--; console.log(t) if(document.documentElement.scrollTop==0){clearInterval(setInt)} console.log(t); constbackTop=Tween.Linear(t,b,c,d); console.log(backTop); document.documentElement.scrollTop=backTop; },20) } } })

三、requestAnimationFrame改写setInterval方法：

methods:{
backTop(){
varTween={
Linear:function(t,b,c,d){//匀速
returnc*t/d+b;
}
}
Math.tween=Tween;
vart=1;
constb=document.body.scrollTop;
constc=1;
constd=1;
vartimer;
timer=requestAnimationFrame(functionfn(){
if(document.body.scrollTop>0){
t--;
console.log(t)
console.log(t);
constbackTop=Tween.Linear(t,b,c,d);
console.log(backTop);
document.body.scrollTop=backTop;
timer=requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer)
}
})
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐