關於網頁中的動畫，在css3中我們已經可以使用一些屬性快速的做出來，但是有時候為了浏覽器的兼容性我們還是需要使用js來制作網頁中的動畫。
使用js做動畫最重要的一個函數就是setInterval函數，這裡不再贅述，不懂可以直接百度用法。本文主要講動畫的原理已經在制作過程中的要點。
老規矩，先上代碼，能直接看懂的可以節省時間。
html部分：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>move</title> <link rel="stylesheet" href="move1.css"> </head> <body> <input type="button" value="勻速移動" id="move1"> <input type="button" value="漸變移動" id="move2"> <div id="box1" class="box"></div> <div id="box2" class="box"></div> <script type="text/javascript" src="move1.js"></script> </body> </html>
css部分：
*{
margin: 0px;
padding: 0px;
}
.box{
width: 100px;
height: 100px;
background-color: green;
position: relative;
margin-top: 10px;
}
js部分：
/**
* Created by siri on 2016/9/10.
*/
window.onload=function () {
var btn1 = document.getElementById('move1');
var btn2 = document.getElementById('move2');
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
btn1.onclick = function () {
animate1(box1,500);
}
btn2.onclick = function () {
animate2(box2,500);
}
//勻速動畫
function animate1(ele,target){
//要用定時器，先清除定時器
//一個盒子只能有一個定時器，這樣兒的話，不會和其他盒子出現定時器沖突
//而定時器本身講成為盒子的一個屬性
clearInterval(ele.timer);
//我們要求盒子既能向前又能向後，那麼我們的步長就得有正有負
//目標值如果大於當前值取正，目標值如果小於當前值取負
var speed = target>ele.offsetLeft?3:-3;
ele.timer = setInterval(function () {
//在執行之前就獲取當前值和目標值之差
var val = target - ele.offsetLeft;
ele.style.left = ele.offsetLeft + speed + "px";
//目標值和當前值只差如果小於步長，那麼就不能再前進了
//因為步長有正有負，所有轉換成絕對值來比較
console.log(val);
if(Math.abs(val)<=Math.abs(speed)){
ele.style.left = target + "px";
clearInterval(ele.timer);
}
},30);
}
//緩動動畫封裝
function animate2(ele,target) {
clearInterval(ele.timer); //清楚歷史定時器
ele.timer = setInterval(function () {
//獲取步長 確定移動方向(正負值) 步長應該是越來越小的，緩動的算法。
var step = (target-ele.offsetLeft)/10;
//對步長進行二次加工(大於0向上取整,小於0項下取整)
step = step>0?Math.ceil(step):Math.floor(step);
//動畫原理： 目標位置 = 當前位置 + 步長
console.log(step);
ele.style.left = ele.offsetLeft + step + "px";
//檢測緩動動畫有沒有停止
if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
ele.style.left = target + "px"; //直接移動指定位置
clearInterval(ele.timer);
}
},30);
}
}
html和css基本就是為了我們的js部分搭框架，不講太多，要注意的是，一定要對全局的margin和padding清零，否則的話他在計算的時候初始的margin和padding會影響計算，從而導致有時候運動不停止的情況。
javascript部分代碼的解析在源碼中已經很詳細了，下面主要講解原理。
勻速運動：
通過setInterval函數我們控制每多少毫秒運動的距離，然後在快要到達指定位置的時候，判斷步長（每多少毫秒運動的距離）和此時和目標位置的距離，如果步長大於此時和目標位置的距離，則直接定位到目標位置，這樣做是為了避免步長和總距離不是整數倍關系而產生最後到達位置和目標位置有差值的錯誤。
緩沖運動：
緩沖運動的基本函數是和勻速運動一樣的，只是緩沖運動的步長我們是通過和目標位置的距離來確定的，這樣我們的步長是不斷變小的，從而實現緩沖運動的效果。在確定步長的時候我們使用Math.ceil和Math.floor對步長值進行取整是為了避免出現小數，因為如果出現小數後面最後到達的位置肯定是和目標位置有誤差的。
注意事項：在每次移動開始前一定要使用clearInterval清除定時器。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。