Javascript Raphael.js自定义属性动画_Javascript_Animation_Raphael

Javascript Raphael.js自定义属性动画

javascript animation

Javascript Raphael.js自定义属性动画,javascript,animation,raphael,Javascript,Animation,Raphael,我正在尝试使用Raphael.js创建一个简单的圆形扇区动画。动画应在0到2*Pi之间展开圆形扇区。问题是它在1秒后只画了一个没有任何动画的圆这是我的密码： <html> <head> <title></title> <script src="raphael.js"></script> </head> <body> <script> window.

我正在尝试使用Raphael.js创建一个简单的圆形扇区动画。动画应在0到2*Pi之间展开圆形扇区。问题是它在1秒后只画了一个没有任何动画的圆

这是我的密码：

<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>


window.onload=函数（）{
var票据=拉斐尔（“持有人”）；
paper.ca.sector=函数（x，y，r1，r2，startAngle，endAngle，color）{
变量x11=x+r1*Math.sin（startAngle）；
变量y11=y-r1*Math.cos（startAngle）；
变量x21=x+r1*Math.sin（端角）；
变量y21=y-r1*数学cos（端角）；
变量x12=x+r2*Math.sin（startAngle）；
变量y12=y-r2*数学系数（startAngle）；
var x22=x+r2*Math.sin（端角）；
变量y22=y-r2*数学cos（端角）；
var=0；
if（endAngle-startAngle>Math.PI）
大=1；
变量路径列表=[“M”，x12，y12，
“A”，r2，r2，0，大，1，x22，y22，
“L”、x21、y21、，
“A”，r1，r1，0，大，0，x11，y11，
“Z”]；
返回{path:pathList，fill:color，stroke:“none”}；
}
var p=paper.path（）.attr（{sector:[300300100140,0,0.0001，“pink”]}）；
p、 制作动画（{sector:[300300100140,0，Math.PI*1.999999，“pink”]}，1000，“bounce”）；
};

很抱歉，清单太长了

那么问题是为什么会发生？我做错了什么

谢谢

以下是工作代码：

        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");

我仍然不确定，为什么你的代码不起作用

编辑：好的，我一直在尝试一些值，它看起来像拉斐尔中的某种错误，因为路径的填充没有与动画一起使用

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);