vue项目tween方法实现返回顶部

Ryan_Li 发布于2019-08-22 14:54 / 2191人阅读

摘要：一场景当你要实现一个返回顶部的功能时候你会怎么做，大部分人会使用这么写就实现了功能，不过要更加的细腻一点我们不妨用的缓动来实现，看看效果如何吧。

一、场景

当你要实现一个返回顶部的功能时候你会怎么做，大部分人会使用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鼠标返回顶部

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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