運動也可以叫做動畫
1戏自、運動原理
通過連續(xù)不斷的改變物體的位置壁酬，而發(fā)生移動變化望浩。
使用setInterval實現(xiàn)辖所。
勻速運動：速度值一直保持不變。
多物體同時運動：將定時器綁設置為對象的一個屬性磨德。
注：物體每次運動都應該把之前的定時器清除掉缘回。
//box為絕對定位
var speedX = 2
?box.timer = setInterval(function(){
? ? ? box.style.left = box.offsetLeft + speedX +'px';
},80)
2、邊界處理
遇到邊界是應該停止掉還是反彈典挑，方向相反酥宴。
改變物體運動方向：將物體的速度值取反。
//邊界屬性 ?瀏覽器視口寬高
//返回當前視口的高度（即瀏覽器窗口的高度）
console.log(document.documentElement.clientHeight)
console.log(document.documentElement.clientWidth)
// 網(wǎng)頁總高度 ? ? body默認有margin您觉，記得重置
console.log(document.body.clientHeight)
console.log(document.body.clientWidth)
var speedX = 2
?box.timer = setInterval(function(){
? ? ? box.style.left = box.offsetLeft + speedX +'px';
? ? ?//左右邊界
?????if(box.offsetLeft <=0?|| box.offsetLeft >= cWidth - box.offsetWidth){
? ? ? ? ? speedX = -speedX;
? ?? }
},80
3幅虑、加速減速
加速：速度越來越快。
減速：速度越來越慢顾犹。
box.timer = setInterval(function() {
?????speedX = speedX + 2;
?????div.style.left = div.offsetLeft + speedX + 'px';
}, 50);
4倒庵、拋物線
水平方向有一速度，垂直方向有一速度炫刷，并做自由落體擎宝。
var speedY = 0;
var speedX = 10;
// x 方向? 勻速
// y 方向? 勻加速
box.timer = setInterval(function() {
?????speedY += 9.8
?????box.style.left = box.offsetLeft + speedX + 'px';
?????box.style.top = box.offsetTop + speedY + 'px'
}, 80)
5、透明度的變換
box逐漸消失
//使用css將box的opacity 設置為1?
var op = 1;
box.timer = setInterval(function() {
?????op = op - 0.01;
?????div.style.opacity = op
?????//或者
?????//div.style.opacity = getComputedStyle(div).opacity - 0.01;
}, 80);
6浑玛、緩沖運動
速度一開始很大绍申，然后慢慢變小，比較類似自然界中的緩沖運動
//一開始box 在 （0，0）位置极阅，我們將box運動到（300,0）位置
var target = 300; //目標位置
box.timer = setInterval(function() {
? ?//target - div.offsetLeft
是元素距離目標的路程胃碾，隨著越來越靠近目標，這個值就越來越小筋搏，如果把這個值當做速度仆百，速度一開始很大，然后慢慢變小奔脐，比較類似自然界中的緩沖運動俄周。如果把這個值直接當速度，一下子就到髓迎，所以除以8以后當做速度
?????var speed = (target - div.offsetLeft) / 8;
?????//所以要對速度向上取整得到速度1峦朗，當speed小于0.375的時候，div就不會移動了
?????speed = Math.ceil(speed);
? ? ?box.style.left = div.offsetLeft + speed + 'px';
?????if(box.offsetLeft == target) {
? ? ? ? ? //到達目標清除定時器
??????????clearInterval(box.timer);
?????}
}, 30);
考慮到運動的時候可能往前排龄，也可以能往后波势，增加判斷
//一開始box 在 （0，0）位置橄维，我們將box運動到（300,0）位置
var target = 300; //目標位置
div.timer = setInterval(function() {
?????var speed = (target - div.offsetLeft) / 8;
?????//當speed小于0.375的時候尺铣，div就不會移動了
?????//所以要對速度向上取整或者向下取整
?????if(speed > 0) {
??????????//speed大于0 說明是往前運動
??????????//當speed小于0.375的時候，div就不會移動了
??????????//所以要對速度向上取整或者向下取整
??????????speed = Math.ceil(speed);
?????} else {
??????????//speed大于0 說明是往后運動
??????????speed = Math.floor(speed);
?????}
?????div.style.left = div.offsetLeft + speed + 'px';
?????if(div.offsetLeft == target) {
??????????clearInterval(div.timer);
?????}
}, 30);
上面代碼封裝為函數(shù)
function animate(div,targetX) {
??? var target = targetX;
??? div.timer =? setInterval(function () {
??????? var speed = (target - div.offsetTop)/8;
??????? speed = (speed>0? Math.ceil(speed): Math.floor(speed));
??????? div.style.top = div.offsetTop + speed +'px';
??????? if(div.offsetTop == target){
??????????? clearInterval(div.timer);
??????? }
??? },30);
}
7挣郭、多屬性緩沖運動函數(shù)封裝
上面的封裝只能固定的在x方向做動畫
如果想讓一個div 從一個點運動到另一個點，怎么辦疗韵？
比如從（0兑障，0）到（100，200）
這個時候我們把第二個參數(shù)改為一個這樣的對象?{left:100;top:200} ?
function animate(div, obj) {
?????//{left:100;top:200}
?????//{left:100}
?????clearInterval(div.timer);
?????div.timer = setInterval(function() {
??????????var flag = true; //假設已經(jīng)到了目的地
??????????for(var key in obj) {
??????????????console.log(key) //left?? top
??????????????console.log(obj[key]) //300
??????????????var target = obj[key]; //目標值
??????????????// getComputedStyle['left']? 元素left 屬性 當前值
??????????????var speed = (target - parseInt(getComputedStyle(div)[key])) / 8;
??????????????speed = (speed > 0 ? Math.ceil(speed) : Math.floor(speed));
??????????????div.style[key] = parseInt(getComputedStyle(div)[key]) + speed + 'px';
??????????????if(parseInt(getComputedStyle(div)[key]) != target) {
???????????????????flag = false;
??????????????}
??????????}
??????????//必須等到所有的 屬性都到達目的地 才能結束定時器
??????????if(flag == true) {
??????????????clearInterval(div.timer);
??????????}
?????}, 30);
}
上面咱們就封裝了一個運動函數(shù)蕉汪，也可以叫運動框架流译，說白了，就是封裝一次以后者疤，我們再做一些動畫就非常方便福澡！前人栽樹后人乘涼，便是框架的好處驹马！
如果想讓框架支持透明度動畫怎么辦呢革砸？無非是增加更多的判斷
運動框架最終封裝見animateBak.j
編輯：千鋒HTML5
