如何将jq动画做出高帧的感觉？(丝滑顺畅)

前言

我最近在一点一点研究我 博客园 的前端代码，算是边敲边学吧，还算是挺有意思的。

是这样的，之前见过一个效果，就是先显示博客的背景，然后博客主界面缓缓的上升到正确位置，于是乎，干他！开撸代码！

各位来自五湖四海的大帅哥小姐姐懂我的意思就行啊哈哈，原谅我是个灵魂画手

实现过程

到这可能有的人说，jQuery里面不是有slideUp和slideDown方法吗？兄台，且听我慢慢道来~

slideUp():

slideUp() 方法以滑动方式隐藏被选元素。

注意：隐藏的元素不会被完全显示（不再影响页面的布局）。

来自菜鸟教程jQuery slideUp() 方法

注意关键词！以滑动的方式隐藏被选元素！

我刚开始没看到，直接用上，效果吓哭我这个弱鸡了，主体界面直接没了！

来，上个demo，诶？老夫的demo呢？马上来！为了代码能简洁，css写成了内联样式

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>滑动上升demo</title>

		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

		<style type="text/css">

			/*body背景图*/

			body {

				/*设置背景图片*/

			    background: rgba(12, 100, 129, 1) url('https://img2020.cnblogs.com/blog/1916157/202003/1916157-20200320155023660-1382835829.png') fixed no-repeat;

			    background-size: cover;/*完全覆盖整个body*/

			}

			/*页面主体*/

			#home {

				margin: 0 auto;/*实现布局居中*/

				width: 80%;/*原始65*/

			    background-color: rgba(245, 245, 245, 0.7);/*背景颜色*/

			    padding: 30px;/*内边距*/

			    margin-top: 200px;/*上边外延边距*/

			    margin-bottom: 50px;/*下边外延边距*/

			    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);/*阴影效果*/

			    border-radius:30px/*圆角化*/;

			}

		</style>

	</head>

	<body>

		<div id="home"></div>

		<script type="text/javascript">

			$("#home").css("margin-top",window.innerHeight);//将页面主体放到刚好屏幕下方一点的位置

			$("#home").slideUp(3000);

		</script>

	</body>

</html>

由于gif展示效果太差，大家可以复制这段html代码去看下嘿嘿

slideDown():

slideDown() 方法以滑动方式显示被选元素。

注意：slideDown() 适用于通过 jQuery 方法隐藏的元素，或在 CSS 中声明 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。

诶诶？这个方法似乎也不错，但是就是从上到下滑动出现的，似乎有点卡顿（可能因为我电脑关系吧，但此处是为了讲我的高帧方法，啊哈哈不好不好）

将上面代码中的javascript的部分替换为以下两行代码就行啦

$("#home").css("display","none");

$("#home").slideDown(3000);

重头戏来了

我们来重写一个方法来实现这个效果，不要怕，让我一点点的给你分析

这个上升滑动动画的实质就是margin-top值的改变,至于为什么，就不过多细讲啦，相信大家都知道(其实是因为我讲不清，有兴趣的同学可以搜下css盒子模型)

动画其实就是一帧一帧的画面，那么我们让它的margin-top每秒减少一定的值就能实现了

But！但是这个值究竟怎么控制才最为完美呢？

我们先来粗略尝试一下：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>滑动上升demo</title>

		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

		<style type="text/css">

			/*body背景图*/

			body {

				/*设置背景图片*/

			    background: rgba(12, 100, 129, 1) url('https://img2020.cnblogs.com/blog/1916157/202003/1916157-20200320155023660-1382835829.png') fixed no-repeat;

			    background-size: cover;/*完全覆盖整个body*/

			}

			/*页面主体*/

			#home {

				margin: 0 auto;/*实现布局居中*/

				width: 80%;/*原始65*/

			    background-color: rgba(245, 245, 245, 0.7);/*背景颜色*/

			    padding: 30px;/*内边距*/

			    margin-top: 200px;/*上边外延边距*/

			    margin-bottom: 50px;/*下边外延边距*/

			    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);/*阴影效果*/

			    border-radius:30px/*圆角化*/;

			}

		</style>

	</head>

	<body>

		<div id="home"></div>

		<script type="text/javascript">

			$("#home").css("margin-top",window.innerHeight);//将页面藏到屏幕下方一点

			function Up(){

				$("#home").css("margin-top",parseInt($("#home").css("margin-top"))-50);

				console.log($("#home").css("margin-top"));

				if(parseInt($("#home").css("margin-top"))==207){//这个207是我计算出来的，因为我屏幕的高度是657，所以会减少到这个值

					clearInterval(id);

					alert("停止");

				}

			}

			var id = setInterval("Up()",1000);

		</script>

	</body>

</html>

大家试一试上面的代码，感觉效果很差，很卡，有没有！

这个代码的意思是每一秒上升50个像素，所以看起来一卡一卡的，跳太多了！

那么我们怎么实现高帧的效果呢？简单粗暴点，先来个60帧试试水

众所周知，动画的制作原理是利用了人眼的视觉暂留效应，好吧我们粗暴点，直接上原理。

60帧意思就是每秒刷新60次，

1s=1000ms

那么1000/60≈17,也就是说17ms刷新一次，就是60帧了！

我们还是将上面代码中的javascript的代码替换为以下几行就行了！

$("#home").css("margin-top",window.innerHeight);//将页面藏到屏幕下方一点

function Up(){

    $("#home").css("margin-top",parseInt($("#home").css("margin-top"))-2);

    console.log($("#home").css("margin-top"));

    if(parseInt($("#home").css("margin-top"))<210){//这个210是我计算出来的合适位置

        clearInterval(id);

        alert("停止");

    }

}

var id = setInterval("Up()",17);

大家可以复制去感觉以下！！！简直不要太丝滑！！！

同理你也可以实现90帧，120帧等等...

建议帧数越高，改变的数字差值小一点。

如果能够帮到你，或者学到点东西，请给我点赞哦！

你的点赞就是对我最大的鼓励！