vue項目tween方法實現返回頂部

Ryan_Li 發布于2019-08-22 14:54 / 2190人閱讀

摘要：一場景當你要實現一個返回頂部的功能時候你會怎么做，大部分人會使用這么寫就實現了功能，不過要更加的細膩一點我們不妨用的緩動來實現，看看效果如何吧。

一、場景

當你要實現一個返回頂部的功能時候你會怎么做，大部分人會使用document.body.scrollTop =0；這么寫就實現了功能，不過要更加的細膩一點我們不妨用tween的緩動來實現，看看效果如何吧。
之前我們寫過tween的相關文章，這里不做介紹了。

二、代碼

Top

三、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

Top

四、相關鏈接

https://www.cnblogs.com/qiand...
https://www.jianshu.com/p/b77...

云服務器 GPU云服務器 javascript返回頂部 html返回頂部菜單 html返回頂部浮動 js鼠標返回頂部

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92974.html

PocketLibs（1）—— 動畫 tween.js

摘要：繪制變換曲線起飛以上函數就是我們基于內置的實現的自定義變換。例如飛行動畫結束后，將飛機復位。如何運行的? new Vue({ el:#app-1, data:{ position:{ distance:10, height:30, } }, methods:{ ...

ShowerSun 2019-08-22 15:35 評論0 收藏0
高仿騰訊QQ Xplan（X計劃）的H5頁面（2）：動畫控制

摘要：比如地球自轉時播放背景音樂，動畫一旦開始則停止穿越云層后播放視頻，其他時候視頻是停止的。在上面做動畫分析的時候，是把這個開場動畫分開來設想的，但是上面的用上狀態機之后，意外的發現這個入場動畫可以以另外一個放進來。上一篇知道如何制作threejs地球之后，就正式coding了，當然還是使用最心愛的Vue。本篇會有一些代碼，但是都是十幾行的獨立片段，相信你不用擔心。布局在進入本篇主題...

wyk1184 2019-08-20 17:04 評論0 收藏0