Question

所以我有一个绘制路径的函数。我想沿着这些不同的路径动画一些圆圈，而圆圈从正确的位置开始（在路径的第一点），当我试图沿着路径动画它们时，它们会变得混乱。我究竟做错了什么？

您可以在jsfiddle或此处查看我的代码：

function commerce() {
    Raphael("commercebounce", function () {
        var r = this;
        function pathfade() {
        var a = .1,
            b = .4, 
            c = [0, 2], 
            d = [50, 300], 
            e = [150, 800], 
            fz = [150, 350], 
            g = d[0] + Math.random() * (d[1] - d[0]), 
            h = e[0] + Math.random() * (e[1] - e[0]), 
            i = fz[0] + Math.random() * (fz[1] - fz[0]),
            colours = ["215,10,45", "115,115,115"],
            stroke = ["", "- "];
            opacity = a + Math.random() * (b - a), colour = "rgb(" + colours[Math.round(Math.random())] + ")", strokeW = c[Math.round(Math.random())];
            j = r.path("M 0 " + g + " C 0 " + g + " " + (h - 100) + " " + g + " " + h + " 400 M " + h + " 400 C " + h + " 400 " + (h + 100) + " " + g + " 960 " + i).attr({stroke: colour,"stroke-dasharray": stroke[Math.round(Math.random())],"stroke-opacity": .1});
            return j
            }   
        ja = pathfade();
        jb = pathfade();
        jc = pathfade();
        jd = pathfade();
        je = pathfade();
        jf = pathfade();
        jg = pathfade();
        jh = pathfade();
        ji = pathfade();
        jj = pathfade();
        function bowlball(x) {
            leng = x.getTotalLength(),
            a = .1,
            b = .4,
            c = [0, 2],
            opacity = a + Math.random() * (b - a),
            strokeW = c[Math.round(Math.random())],
            colours = ["215,10,45", "115,115,115"],
            colour = "rgb(" + colours[Math.round(Math.random())] + ")";
            h = r.circle(0, 0, 7, 7).attr({"stroke-width": this.strokeW,stroke: colour,"stroke-opacity": this.opacity,fill: "none","fill-opacity": 0}).onAnimation(function() {
            var t01 = this.attr("transform")})
            r.customAttributes.along1 = function (v) {
                var point = x.getPointAtLength(v * leng);
                return {
                    transform: "t01" + [point.x, point.y] + "r" + point.alpha
                   }
            };
            return h.attr({along1:0}), h;         
        }
        ha = bowlball(ja);
        hb = bowlball(jb);
        hc = bowlball(jc);
        hd = bowlball(jd);
        he = bowlball(je);
        hf = bowlball(jf);
        hg = bowlball(jg);
        hh = bowlball(jh);
        hi = bowlball(ji);
        hj = bowlball(jj);
        ha.animate({along1:.02},5000); //animation fail
    }); 
};

Answer 1

这是一个古老的屁股问题，但我猜它是因为你在变换字符串中使用了小写的“t”，这意味着它是一个相对转换。但是getPointAtLength不会返回绝对坐标吗？如果是这样，您应该使用大写“T”将元素移动到那些绝对坐标

Raphael对象不会正确地沿路径设置动画

1 个答案: