vue项目tween方法实现返回顶部的示例代码
一、场景
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
三、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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。