[英]Raphael.js customAttributes animation
I'm trying to create a simple animation of a circle sector using Raphael.js. 我正在尝试使用Raphael.js创建一个简单的圆形扇区动画。 The animation should unfold circle sector from 0 to 2 * Pi.
动画应展开从0到2 * Pi的圆形扇区。 The problem is that it just draw a circle without any animation after 1 second.
问题在于,它仅在1秒后绘制了一个没有任何动画的圆。
Here is my code: 这是我的代码:
<html>
<head>
<title></title>
<script src="raphael.js"></script>
</head>
<body>
<script>
window.onload = function () {
var paper = Raphael("holder");
paper.ca.sector = function (x, y, r1, r2, startAngle, endAngle, color) {
var x11 = x + r1 * Math.sin(startAngle);
var y11 = y - r1 * Math.cos(startAngle);
var x21 = x + r1 * Math.sin(endAngle);
var y21 = y - r1 * Math.cos(endAngle);
var x12 = x + r2 * Math.sin(startAngle);
var y12 = y - r2 * Math.cos(startAngle);
var x22 = x + r2 * Math.sin(endAngle);
var y22 = y - r2 * Math.cos(endAngle);
var big = 0;
if (endAngle - startAngle > Math.PI)
big = 1;
var pathList = ["M", x12, y12,
"A", r2, r2, 0, big, 1, x22, y22,
"L", x21, y21,
"A", r1, r1, 0, big, 0, x11, y11,
"Z"];
return {path: pathList, fill: color, stroke: "none"};
}
var p = paper.path().attr({sector: [300, 300, 100, 140, 0, 0.0001, "pink"]});
p.animate({sector: [300, 300, 100, 140, 0, Math.PI * 1.999999, "pink"]}, 1000, "bounce");
};
</script>
<div id="holder" style="width: 700px; height: 700px;"></div>
</body>
</html>
Sorry for the long listing. 很抱歉,清单很长。
So the question why does it happen? 那么问题为什么会发生呢? And what am I doing wrong?
我在做什么错呢?
Thanks! 谢谢!
Here is working code: 这是工作代码:
var paper = Raphael("holder");
var createSector = function (x, y, r1, r2, startAngle, endAngle, color) {
var x11 = x + r1 * Math.sin(startAngle);
var y11 = y - r1 * Math.cos(startAngle);
var x21 = x + r1 * Math.sin(endAngle);
var y21 = y - r1 * Math.cos(endAngle);
var x12 = x + r2 * Math.sin(startAngle);
var y12 = y - r2 * Math.cos(startAngle);
var x22 = x + r2 * Math.sin(endAngle);
var y22 = y - r2 * Math.cos(endAngle);
var big = 0;
if (endAngle - startAngle > Math.PI)
big = 1;
var pathList = ["M", x12, y12,
"A", r2, r2, 0, big, 1, x22, y22,
"L", x21, y21,
"A", r1, r1, 0, big, 0, x11, y11,
"Z"];
return {path: pathList, fill: color, stroke: "none"};
}
var p = paper.path();
p.attr(createSector(300, 300, 100, 140, 0, 0.001, "pink"));
p.animate(createSector(300, 300, 100, 140, 0.01, Math.PI * 1.999999, "pink"), 1000, "bounce");
Still I am not sure yet, why your code is not working 我仍然不确定为什么您的代码无法正常工作
EDIT: Ok, I ve been trying some values and it looks like some kind of a bug in raphael, since the fill of the path is not used in conjunction with the animate. 编辑:好的,我一直在尝试一些值,它看起来像raphael中的某种错误,因为路径的填充不与动画配合使用。
var paper = Raphael("holder");
paper.customAttributes.sector = function (x, y, r1, r2, startAngle, endAngle, color,strokeWidth) {
var x11 = x + r1 * Math.sin(startAngle);
var y11 = y - r1 * Math.cos(startAngle);
var x21 = x + r1 * Math.sin(endAngle);
var y21 = y - r1 * Math.cos(endAngle);
var x12 = x + r2 * Math.sin(startAngle);
var y12 = y - r2 * Math.cos(startAngle);
var x22 = x + r2 * Math.sin(endAngle);
var y22 = y - r2 * Math.cos(endAngle);
var big = 0;
if (endAngle - startAngle > Math.PI)
big = 1;
var pathList = ["M", x12, y12,
"A", r2, r2, 0, big, 1, x22, y22,
"L", x21, y21,
"A", r1, r1, 0, big, 0, x11, y11,
"Z"];
return {path: pathList, fill: color,'stroke-width':strokeWidth};
}
var p = paper.path();
p.attr({sector: [300, 300, 100, 140, 0, 0.0001, "#caac12",1]});
p.animate({sector: [300, 300, 100, 140, 0.0001, Math.PI * 1.999999, "#cacaca",0]}, 3000);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.