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 = "变成蓝色妖姬了~";
});
});