| 参数 |
类型 |
说明 |
| el |
element |
必需，为页面元素 |
| begin |
number |
必需，开始的位置 |
| change |
number |
必需，要移动的距离 |
| duration |
number |
可选，缓动效果持续时间，默认是500ms。建议取300~1000ms。 |
| field |
string |
必需，要发生变化的样式属性。请在top，left，bottom,right，width与height中选择。 |
| ftp |
number |
可选，每秒进行多少帧动画，默认50帧，保证流畅播放。一些参考资料，日本动画1秒36帧，中国卡通24帧，赛车游戏60帧。 |
| ease |
function |
必需，缓动公式，参数为0~1之间的数。可参考我下面给出的45条公式。 |
| onStart |
function |
可选，在开始时执行。 |
| onEnd |
function |
可选，在结束时执行。 |
prototype流派的缓动公式，只需一个参数（增至45种）
';
}).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需刷新才能执行]
