在单值动画中，一次只能改变其中的单个量，比如left、width、height~~~
如果需要一次改变多的量，就需要传入多个变量，在多变量传输中，一般选择用数组或者json。这里选择用json的键值对便于程序的开发和维护。
<!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");
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>
- 在多值动画会存在一个问题：如果其中一个值在满足
if (begin == target)条件后，会被立刻清空定时器。而停止动画，而其余只无法达到目标值。
利用布尔条件设置一个判定条件来将定时器清空
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)
}
-
特殊情况考虑：函数回调；
在某些特殊情况下，动画需要复原，或者需要连续运动，会使用到一个函数回调的概念。
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)
}
