_{Snap.svg demo之}Snap.animate()

Snap.animate(from, to, setter, duration, [easing], [callback])

通过一个很有爱的函数把动画从一个数字运行到另外一个。

参数

• from 数值或数组。动画起始数值或数值数组。
• to 数值或数组。动画结束数值或数值数组。
• setter 函数。接受一个数值参数的贴心函数。
• duration 数值。动画持续时间，单位是毫秒。
• easing 函数。来自mina或自定义的缓动函数。
• callback 函数。动画结束时候执行的回调函数。

返回值

对象。mina格式的动画对象。

1. {
   1. id字符串。动画的id, 你可以认为其只读。
   2. duration函数。获得或设置动画的持续时间。
   3. easing函数。缓动函数。
   4. speed函数。获得或设置动画的速度。
   5. status函数。获得或设置动画的状态。
   6. stop函数。停止动画。
2. }

使用

<svg id="svg" width="100" height="100"></svg>
            
<input id="button" type="button" class="zhxx_api_button" value="点击水平位移">

var rect = Snap("#svg").paper.rect(0, 20, 60, 40);

document.getElementById("button").onclick = function() {        
    Snap.animate(0, 20, function (val) {
        rect.attr({
            x: val
        });
    }, 1000);
    // 以上代码，类似于下面的效果
    // rect.animate({x: 20}, 1000);
    // 显然，上面的更强大，更灵活；下面的则是简单易懂
};

效果