在單值動(dòng)畫中，一次只能改變其中的單個(gè)量，比如left、width、height~~~
如果需要一次改變多的量，就需要傳入多個(gè)變量，在多變量傳輸中，一般選擇用數(shù)組或者json。這里選擇用json的鍵值對(duì)便于程序的開發(fā)和維護(hù)。
<!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">開始動(dòng)畫</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");
btn.onclick=function(){
buffer(box,{width:400,left:400,height:400})
};
function buffer(obj,json){
clearInterval(obj.timer);
obj.timer = setInterval(function () {
for(var key in json ) {
var begin = parseInt(getCss(obj, key));
var target = parseInt(json[key]);
var speed = (target - begin) / 10;
speed = target > begin ? Math.ceil(speed) : Math.floor(speed);
begin = begin + speed;
box.style[key] = begin + "px";
if (begin == target) {
clearInterval(obj.timer)
}
}
}, 20)
}
function getCss(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return window.getComputedStyle(obj,null)[attr];
}
}
}
</script>
</body>
</html>
- 在多值動(dòng)畫會(huì)存在一個(gè)問題：如果其中一個(gè)值在滿足
if (begin == target)條件后，會(huì)被立刻清空定時(shí)器。而停止動(dòng)畫，而其余只無法達(dá)到目標(biāo)值。
利用布爾條件設(shè)置一個(gè)判定條件來將定時(shí)器清空
function buffer(obj,json){
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var flag=true;
for(var key in json ) {
var begin = parseInt(getCss(obj, key));
var target = parseInt(json[key]);
var speed = (target - begin) / 10;
speed = target > begin ? Math.ceil(speed) : Math.floor(speed);
begin = begin + speed;
box.style[key] = begin + "px";
if(begin!=target)
{flag=false;
}
if (flag==true) {
clearInterval(obj.timer)
}
}, 20)
}
-
特殊情況考慮：函數(shù)回調(diào)；
在某些特殊情況下，動(dòng)畫需要復(fù)原，或者需要連續(xù)運(yùn)動(dòng)，會(huì)使用到一個(gè)函數(shù)回調(diào)的概念。
function buffer(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var flag = true;
for (var key in json) {
var begin = parseInt(getCssAttr(obj, key));
var target = parseInt(json[key]);
var speed = (target - begin) * 0.2;
speed = target > obj.offsetLeft ? Math.ceil(speed) : Math.floor(speed);
obj.style[key] = begin + speed + 'px';
if (begin != target) {
flag = false;
}
}
if (flag == true) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
}, 20)
}
