如何将jq动画做出高帧的感觉？(丝滑顺畅)
前言
我最近在一点一点研究我 博客园 的前端代码，算是边敲边学吧，还算是挺有意思的。
是这样的，之前见过一个效果，就是先显示博客的背景，然后博客主界面缓缓的上升到正确位置，于是乎，干他！开撸代码！
各位来自五湖四海的大帅哥小姐姐懂我的意思就行啊哈哈，原谅我是个灵魂画手
实现过程
到这可能有的人说，jQuery里面不是有slideUp和slideDown方法吗？兄台，且听我慢慢道来~
slideUp():
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帧等等...
建议帧数越高，改变的数字差值小一点。
如果能够帮到你，或者学到点东西，请给我点赞哦！
你的点赞就是对我最大的鼓励！
浙公网安备 33010602011771号