border:
1px solid
#000;大专栏
帧动画插件iv>
}
</style>
</head>
<body>
<button id="btn">click
</button>
<div id="box" class="box">
</div>
<script>
function (element , props , duration , easing , callback) {
if (
typeof element !==
'object' && element.nodeType !==
1) {
return;
};
if (
typeof props !==
'object' && props.toString() !==
'[object Object]') {
return;
};
var noop =
function () {};
this.element = element;
this.props = props;
this.duration = duration ||
600;
this.easing = easing ||
'linear';
this.callback = callback || noop;
this.tickID =
0;
this.styles =
this.getStyle();
this.animate();
};
Animator.prototype = {
getStyle :
function () {
return
window.getComputedStyle ?
window.getComputedStyle(
this.element) :
this.element.currentStyle();
},
animate :
function () {
for (
var prop
in
this.props) {
this.step.call(
this , prop);
}
},
step :
function (prop) {
var self =
this;
var initialValue =
0;
var beginTime =
new
Date();
var endValue =
parseFloat(
this.props[prop]);
var beginValue =
parseFloat(
this.styles[prop]);
var changeValue =
parseFloat(endValue - beginValue);
var distance =
0;
var move =
function () {
var p = (
new
Date() - beginTime) / self.duration;
if (p >
1) {
self.element.style[prop] = (prop ===
'opacity') ? endValue : endValue +
'px';
cancelAnimationFrame(self.tickID);
self.tickID =
null;
self.callback.call(self);
}
else {
if (self.easing ===
'linear') {
distance = changeValue * p;
}
else
if (self.easing ===
'easeIn') {
distance = changeValue * p * p;
}
else
if (self.easing ===
'easeOut') {
distance = changeValue * (
2 * p - p * p);
};
self.element.style[prop] = (prop ===
'opacity') ? (beginValue + distance) : (beginValue + distance +
'px');
this.tickID = requestAnimationFrame(move);
}
};
move();
}
};
var box =
document.querySelector(
'#box');
var btn =
document.querySelector(
'#btn');
btn.addEventListener(
'click' ,
function () {
new Animator(box , {
width :
300,
height :
300,
top :
200,
left :
100,
opacity :
0.5,
borderWidth :
20
});
});
btn.addEventListener(
'click' ,
function () {
new Animator(box , {
width :
500
} ,
1000 ,
'easeOut' ,
function () {
new Animator(box , {
height :
300,
left :
100,
borderWidth :
50
} ,
1000 ,
'easeIn' ,
function () {
new Animator(box , {
opacity :
0.6
})
});
});
});
</script>