一、場景
網(wǎng)站的建設(shè)創(chuàng)新互聯(lián)專注網(wǎng)站定制,經(jīng)驗(yàn)豐富,不做模板,主營網(wǎng)站定制開發(fā).小程序定制開發(fā),H5頁面制作!給你煥然一新的設(shè)計(jì)體驗(yàn)!已為成都木包裝箱等企業(yè)提供專業(yè)服務(wù)。
tween.js是一款可生成平滑動畫效果的js動畫庫
當(dāng)你要實(shí)現(xiàn)一個返回頂部的功能時(shí)候你會怎么做，大部分人會使用document.body.scrollTop =0；這么寫就實(shí)現(xiàn)了功能，
不過要更加的細(xì)膩一點(diǎn)我們不妨用tween的緩動來實(shí)現(xiàn)，看看效果如何吧。
之前我們寫過tween的相關(guān)文章，這里不做介紹了。
二、代碼
重慶分公司
重慶分公司
三、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)
}
})
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
