raphael.js菜鸟笔记（二）
金宣
Raphael.animation()及el.animate()的用法
该raphael.js的api的作用是设置元素动画，它的用法和jquery中的animation的用法是相同的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Raphael.jsanimation的用法</title>
<script src="raphael.js"></script>
</head>
<body>
<div id="paper">
<script>
var paper = Raphael("paper", 600, 400);
var circle = paper.circle(200, 200, 40);
circle.attr({
"fill": "blue",
"stroke": "none"
});
// Raphael.animation({a,b,c,d)是设置元素动画的函数，该函数有4个参数，第一个为对象即元素attr的，表示动画结束后的样子，第二个为动画的持续时间，
// 第三个为动画的执行方式，第四个为回调函数，可选参数。
var anima = Raphael.animation({"fill": "red", "cx": 100, "r": 10}, 1000, "easing",function (){
alert("动画执行完毕，执行毁掉函数，该函数为可选参数")
});
//el.animate(),参数为Raphael.animation,或者是直接把Raphael.animation内容作为参数。
circle.click(function () {
circle.animate(anima);
// circl.animate()为元素执行动画。
})
</script>
</div>
</body>
</html>只需要掌握raphael中attr的设置方法就好。attr的一些相应的方法在
raphael.js菜鸟笔记（一）中有简单的介绍
类似资料：