javascript 45种缓动效果 非常酷

.taxiway{
width:800px;
height:100px;
background:#E8E8FF;
}
.move{
width:100px;
height:100px;
background:#a9ea00;
}
#panel {
float:left;
width:810px
}
#panel div{
float:left;
width:88px;
border:1px solid #333;
height:20px;
font-size:11px;
}
div.transition {
margin-top: 30px;
width: 200px;
height: 200px;
position: relative;
margin-bottom:10px;
}
div.transition div {
position: absolute;
height: 1px;
width: 1px;
background: #000;
}
div.transition span {
display: block;
position: absolute;
border-bottom: 1px solid #dadada;
font-size: 10px;
color: #888;
width: 200px;
left: 0px;
}
div.transition div#indicator {
position:absolute;
background-color:#a9ea00;
height: 200px;
top: 0px;
left: 0px;
}
div.transition div#marker {
background-color: #f00;
height: 6px;
width: 6px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
left: 0px;
margin-bottom: -3px;
margin-left: -3px;
}
div.transition div#label {
background: transparent;
color: #ABD474;
font-size: 20px;
height: 20px;
width: 200px;
text-align: center;
top: 80px;
left: 0px;
z-index: -1;
}

var getCoords = function(el){
var box = el.getBoundingClientRect(),
doc = el.ownerDocument,
body = doc.body,
html = doc.documentElement,
clientTop = html.clientTop || body.clientTop || 0,
clientLeft = html.clientLeft || body.clientLeft || 0,
top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop ) - clientTop,
left = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft
return { 'top': top, 'left': left };
};
var getStyle = function(el, style){
if(!+"\v1"){
style = style.replace(/\-(\w)/g, function(all, letter){
return letter.toUpperCase();
});
var value = el.currentStyle[style];
(value == "auto")&&(value = "0px" );
return value;
}else{
return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
}
}
var tween = {
easeInQuad: function(pos){
return Math.pow(pos, 2);
},
easeOutQuad: function(pos){
return -(Math.pow((pos-1), 2) -1);
},
easeInOutQuad: function(pos){
if ((pos/=0.5) 1 ? 1 : pos);
},
wobble: function(pos) {
return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5;
},
pulse: function(pos, pulses) {
return (-Math.cos((pos*((pulses||5)-.5)*2)*Math.PI)/2) + .5;
},
blink: function(pos, blinks) {
return Math.round(pos*(blinks||5)) % 2;
},
spring: function(pos) {
return 1 - (Math.cos(pos * 4.5 * Math.PI) * Math.exp(-pos * 6));
},
none: function(pos){
return 0
},
full: function(pos){
return 1
}
}
var _ = function(id){
return document.getElementById(id);
}
var transition = function(el){
el.style.position = "absolute";
var options = arguments[1] || {},
begin = options.begin,//开始位置
change = options.change,//变化量
duration = options.duration || 500,//缓动效果持续时间
field = options.field,//必须指定，基本上对top,left,width,height这个属性进行设置
ftp = options.ftp || 50,
onEnd = options.onEnd || function(){},
ease = options.ease,//要使用的缓动公式
end = begin + change,//结束位置
startTime = new Date().getTime();//开始执行的时间
(function(){
setTimeout(function(){
var newTime = new Date().getTime(),//当前帧开始的时间
timestamp = newTime - startTime,//逝去时间
delta = ease(timestamp / duration);
el.style[field] = Math.ceil(begin + delta * change) + "px"
if(duration 0'+
'1',
graph = range(0,200).map(function(v){
return '

';
}).join('') + '

'
+'

';
demo.innerHTML = grid + graph;
var indicator = _("indicator"),
marker = _("marker"),
label = _("label"),
demoTransition = function(pos){
var value = tween[ease](pos);
indicator.style.display = "block";
marker.style.display = "block";
marker.style.left = Math.round(pos*200)+'px';
marker.style.bottom = Math.round((value*200-min)*factor)+'px';
label.innerHTML = Math.round(pos*200)+'px';
return value;
}
transition(indicator,{field:"left",begin:parseFloat(getCoords(demo).left),change:200,
ease:demoTransition})
}
window.onload = function(){
var panelHTML = function(){
var builder = [];
var _temp = 'Back Circ Cubic Expo Quad Quart Quint Sine'.split(' ');
var ease = _temp.map(function(v){
return 'easeIn'+v;
});
ease = ease.concat(_temp.map(function(v){
return 'easeOut'+v;
}));
ease = ease.concat(_temp.map(function(v){
return 'easeInOut'+v;
}));
ease = ease.concat('blink bounce bouncePast easeFrom easeFromTo easeOutBounce easeTo elastic'.split(' '));
ease = ease.concat('flicker full linear mirror none pulse reverse sinusoidal spring swingTo swingFrom swingFromTo wobble'.split(' '))
for(var i =0,l=ease.length;i");
builder.push(ease[i]);
builder.push("

");
}
return builder.join('');
}
var panel = document.createElement("div");
panel.id = "panel"
panel.innerHTML = panelHTML();
_("transition").parentNode.insertBefore(panel,_("transition").nextSibling);
}

缓动BY司徒正美

请点击下表的格子

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]