1. 原理和實現(xiàn)
緩動動畫的工作原理在于：讓其目標(biāo)值減去開始位置的值，我們假設(shè)目標(biāo)位置
target=800px，開始位置在begin=0的位置。按照一定比例縮小移動距離，
得出一個運動的距離。
speed=（target-begin）/20
根據(jù)盒子所在位置的不同，也就得出了移動距離的不同。
begin=begin+speed;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* { margin: 0; padding: 0; }
div{ width: 100px; height: 100px; background: red; position: absolute; }
</style>
</head>
<body>
<button id="btn">開始動畫,改變位置和高度</button>
<button id="btn1">改變高度</button>
<div id="box"></div>
<script>
window.onload = function () {
function $(TagId){return document.getElementById(TagId);}
var box=$("box");
var btn=$("btn");
var btn1=$("btn1");
var target=400;
btn.onclick=function(){
clearInterval(timer);
var timer=setInterval(function () {
var begin = box.offsetLeft;
var begin = box.offsetLeft;
var speed=Math.ceil((target-begin)/10);
begin=begin+speed;
box.style.left=begin+"px";
if(begin==target){
clearInterval(timer);
}
},20)
};
var target1=0;
btn1.onclick=function(){
clearInterval(timer1);
var timer1=setInterval(function () {
var begin1 = box.offsetLeft;
var speed1=(target1-begin1)/10;
speed1=Math.floor(speed1);
begin1=begin1+speed1;
box.style.left=begin1+"px";
if(begin1==target1){
clearInterval(timer1)
}
},20)
}
}
</script>
</body>
</html>
2. 初步封裝
提取出相同部分分代碼；
function boffer(obj,target){
clearInterval(obj.timer);
obj.timer=setInterval(function () {
var begin = box.offsetLeft;
var speed =(target-begin)/10;
speed = target > begin?Math.ceil(speed):Math.floor(speed);
begin=begin+speed;
box.style.left=begin+"px";
if(begin==target){
clearInterval(obj.timer)
}
},20)
}
如果是向負方向移動需要用一個判斷語句來為速度取整
ceil()向大數(shù)值取整
floor（）向小值取整
speed = target > begin?Math.ceil(speed):Math.floor(speed);
3. 封裝進一步優(yōu)化
- 提取出屬性值可以更進一步對元素的寬度、高度、位置進行動態(tài)修改。
function boffer(obj,target,attr){
clearInterval(obj.timer);
obj.timer=setInterval(function () {
var begin = parseInt(getCss(obj,attr));
var speed =(target-begin)/10;
speed = target > begin?Math.ceil(speed):Math.floor(speed);
begin=begin+speed;
box.style[attr] =begin+"px";
if(begin==target){
clearInterval(obj.timer)
}
},20)
}
以下是獲取標(biāo)簽屬性
function getCss(obj,attr){
if(obj.currentStyle){
//IE游覽器下獲取屬性
return obj.currentStyle[attr];
}else{
//其他游覽器獲取方式
return window.getComputedStyle(obj,null)[attr];
}
}
