如何將jQ動畫做出高幀的感覺？(絲滑順暢)
前言
我最近在一點一點研究我 csdn部落格 的前端程式碼，算是邊敲邊學吧，還算是挺有意思的。
是這樣的，之前見過一個效果，就是先顯示部落格的背景，然後部落格主介面緩緩的上升到正確位置，於是乎，幹他！開擼程式碼！
各位來自五湖四海的大帥哥小姐姐懂我的意思就行啊哈哈，原諒我是個靈魂畫手
實現過程
到這可能有的人說，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"))==207){//這個207是我計算出來的，因為我螢幕的高度是657，所以會減少到這個值
clearInterval(id);
alert("停止");
}
}
var id = setInterval("Up()",17);
大家可以複製去感覺以下！！！簡直不要太絲滑！！！
同理你也可以實現90幀，120幀等等...
建議幀數越高，改變的數字差值小一點。
如果能夠幫到你，或者學到點東西，請給我點贊哦！
你的點贊就是對我最大的鼓勵！