js anim小框架完善的问题
HTML code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>
.a {
position:absolute; left:100px; top:100px;
width:100px; height:100px;
border:1px solid red; background:#ddd;
opacity:1;
}
</style>
</head>
<body>
<div id="a" class="a">a</div>
<div id="b">b</div>
<button id="pause">pause</button>
<button id="move">move</button>
<script>
function $(o){return document.getElementById(o)}
var Easing = {
'linear' : function(t){
return t;
},
'easeIn' : function(t){
return t * t;
},
'easeOut' : function(t) {
return ( 2 - t) * t;
},
'easeBoth' : function(t){
return (t *= 2) < 1 ?
.5 * t * t :
.5 * (1 - (--t) * (t - 2));
},
'easeInStrong' : function(t){
return t * t * t * t;
},
'easeOutStrong' : function(t){
return 1 - (--t) * t * t * t;
},
'easeBothStrong' : function(t){
return (t *= 2) < 1 ?
.5 * t * t * t * t :
.5 * (2 - (t -= 2) * t * t * t);
},
'elasticIn' : function(t){
var p = .3, s = p / 4;
if (t === 0 || t === 1) return t;
return -(Math.pow(2, 10 * (t -= 1)) * Math.sin((t - s) * (2 * Math.PI) / p));
},
'elasticOut' : function(t){
var p = .3, s = p / 4;
if (t === 0 || t === 1) return t;
return Math.pow(2, -10 * t) * Math.sin((t - s) * (2 * Math.PI) / p) + 1;
},
'elasticBoth' : function(t){
var p = .45, s = p / 4;
if (t === 0 || (t *= 2) === 2) return t;
if (t < 1) {
return -.5 * (Math.pow(2, 10 * (t -= 1)) *
Math.sin((t - s) * (2 * Math.PI) / p));
}
return Math.pow(2, -10 * (t -= 1)) *
Math.sin((t - s) * (2 * Math.PI) / p) * .5 + 1;
},
'backIn' : function(t){
if (t === 1) t -= .001;
return t * t * ((BACK_CONST + 1) * t - BACK_CONST);
},
'backOut' : function(t){
return (t -= 1) * t * ((BACK_CONST + 1) * t + BACK_CONST) + 1;
},
'backBoth' : function(t){
if ((t *= 2 ) < 1) {
return .5 * (t * t * (((BACK_CONST *= (1.525)) + 1) * t - BACK_CONST));
}
return .5 * ((t -= 2) * t * (((BACK_CONST *= (1.525)) + 1) * t + BACK_CONST) + 2);
},
'bounceIn' : function(t){
return 1 - Easing.bounceOut(1 - t);
},
'bounceOut' : function(t){
var s = 7.5625, r;
if (t < (1 / 2.75)) {
r = s * t * t;
}
else if (t < (2 / 2.75)) {
r = s * (t -= (1.5 / 2.75)) * t + .75;
}
else if (t < (2.5 / 2.75)) {
r = s * (t -= (2.25 / 2.75)) * t + .9375;
}
else {
r = s * (t -= (2.625 / 2.75)) * t + .984375;
}
return r;
},
'bounceBoth' : function(t){
if (t < .5) {
return Easing.bounceIn(t * 2) * .5;
}
return Easing.bounceOut(t * 2 - 1) * .5 + .5;
}
};
var Anim = function(el, json, options){
this.fps = 30;
this.el = typeof el == 'string' ? document.getElementById(el) : el;
this.json = json || {};
options = options || {};
this.duration = options.duration || 700;
this.easing = options.easing || 'linear';
this.start = options.start || function(){};
this.complete = options.complete || function(){};
this.init();
}
Anim.prototype = {
init: function(){
clearInterval(this.timer);
var _this = this;
this.timer = setInterval(function(){
_this.start(_this.el);
_this.doMove();
}, this.fps);
},
css: function(attr, value){
if (value != null){
attr == "opacity" ? (this.el.style.filter = "alpha(opacity=" + value + ")", this.el.style.opacity = value / 100) : this.el.style[attr] = value + "px";
} else {
var a = parseFloat(window.getComputedStyle ? getComputedStyle(this.el, null)[attr] : this.el.currentStyle[attr]);
return a || 0;
}
},
doMove: function(){
var opt = this.json;
var bComplete = true;
for(var p in opt){
var iCur = p == "opacity" ? parseInt(this.css(p).toFixed(2) * 100) : this.css(p);
var iSpeed = (opt[p] - iCur) / 5;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
iCur != opt[p] && (bComplete = false, this.css(p, iSpeed + iCur));
bComplete && (clearInterval(this.timer), this.complete(this.el));
}
//console.log( bComplete )
},
pause: function(){
clearInterval(this.timer);
},
move: function(){
this.init();
}
}
var a = new Anim('a', {left: 400, opacity: 40}, {
duration: 1000,
easing: 'bounceBoth',
start: function(o){
o.innerHTML = 'start...';
},
complete: function(o){
o.innerHTML = 'complete...';
}
})
$('pause').onmouseover = function(){
a.pause();
}
$('move').onmouseover = function(){
a.move();
}
</script>
</body>
</html>