資訊專欄INFORMATION COLUMN
摘要：一場景當你要實現(xiàn)一個返回頂部的功能時候你會怎么做，大部分人會使用這么寫就實現(xiàn)了功能，不過要更加的細膩一點我們不妨用的緩動來實現(xiàn)，看看效果如何吧。
一、場景
當你要實現(xiàn)一個返回頂部的功能時候你會怎么做，大部分人會使用document.body.scrollTop =0；這么寫就實現(xiàn)了功能，不過要更加的細膩一點我們不妨用tween的緩動來實現(xiàn)，看看效果如何吧。 之前我們寫過tween的相關文章，這里不做介紹了。二、代碼
三、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)
}
})
}
}
jquery
四、相關鏈接
https://www.cnblogs.com/qiand...
https://www.jianshu.com/p/b77...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/92974.html
摘要：繪制變換曲線起飛以上函數(shù)就是我們基于內置的實現(xiàn)的自定義變換。例如飛行動畫結束后，將飛機復位。 如何運行的? new Vue({ el:#app-1, data:{ position:{ distance:10, height:30, } }, methods:{ ...
摘要：比如地球自轉時播放背景音樂，動畫一旦開始則停止穿越云層后播放視頻，其他時候視頻是停止的。在上面做動畫分析的時候，是把這個開場動畫分開來設想的，但是上面的用上狀態(tài)機之后，意外的發(fā)現(xiàn)這個入場動畫可以以另外一個放進來。 上一篇知道如何制作threejs地球之后，就正式coding了，當然還是使用最心愛的Vue。本篇會有一些代碼，但是都是十幾行的獨立片段，相信你不用擔心。 布局 在進入本篇主題...
閱讀 2975·2023-04-25 17:46
閱讀 3601·2021-11-25 09:43
閱讀 1103·2021-11-18 10:02
閱讀 3064·2021-10-14 09:43
閱讀 2785·2021-10-13 09:40
閱讀 1535·2021-09-28 09:35
閱讀 2197·2019-08-30 15:52
閱讀 3165·2019-08-30 14:06
