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);
    // 显然,上面的更强大,更灵活;下面的则是简单易懂
};