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

Element.animate(attrs, duration, [easing], [callback])

让给定的元素属性动画执行。

参数

• attrs 对象。描述属性的键值对。
• duration 数值。动画持续的时间，单位是毫秒。
• easing 函数。自定义的或者mina提供的缓动函数。
• callback 函数。动画结束时候的回调。

返回值

元素。返回当前元素。

使用

<svg id="svg" width="100" height="100"></svg>
            
<input id="button" type="button" value="点击颜色变变变">

var svg = Snap("#svg");
var c = svg.paper.circle(50, 50, 40).attr({
    fill: "#f00"	// 红色
});

// 事件
document.querySelector("#button").addEventListener("click", function() {
    var button = this;
    c.animate({
        fill: "#00f"	// 蓝色
    }, 1500, mina.bounce, function() {
        button.value = "变成蓝色妖姬了~";
    });	
});

效果

HTML变化

颜色变化过程中的某个时刻的截图：