Snap.animate(from, to, setter, duration, [easing], [callback])
通过一个很有爱的函数把动画从一个数字运行到另外一个。
参数
from
数值或数组。动画起始数值或数值数组。to
数值或数组。动画结束数值或数值数组。setter
函数。接受一个数值参数的贴心函数。duration
数值。动画持续时间,单位是毫秒。easing
函数。来自mina或自定义的缓动函数。callback
函数。动画结束时候执行的回调函数。
返回值
对象。mina格式的动画对象。
{
'id' 字符串。动画的id, 你可以认为其只读。
'duration' 函数。获得或设置动画的持续时间。
'easing' 函数。缓动函数。
'speed' 函数。获得或设置动画的速度。
'status' 函数。获得或设置动画的状态。
'stop' 函数。停止动画。
}
使用
<svg id="svg" width="100" height="100"></svg>
<input id="button" type="button" value="点击水平位移">
var rect = Snap("#svg").paper.rect(0, 20, 60, 40);
document.getElementById("button").onclick = function() {
Snap.animate(0, 100, function (val) {
rect.attr({
x: val
});
}, 1000);
// 以上代码,类似于下面的效果
// rect.animate({x: 20}, 1000);
// 显然,上面的更强大,更灵活;下面的则是简单易懂
};