Question

我正在构建一个小UI，为用户提供下载或加载某些信息的进度。这是迄今为止的代码

    var s = Snap("svg");
    var movepath = s.select("#movePath").attr({
        "fill":"none"
    });
    var dapath = s.select("#dapath").attr({
        stroke: "#cdcdcd",
        "stroke-width": 5,
    });
    var dapoints = [242,334.5, 372,334.5, 372,390, 320.5,390.5 ,308.5,421.5 ,293.5,391.5 ,242,391]
    var circle = s.select("circle");
    var poly = s.select("polygon");

    $("a").click(function(){
        circle.animate({
            opacity: 0
        },100);
        poly.polyAnimate(dapoints,100,mina.linear,function(){
            moveAlongPath(poly,{x:308,y:421},s.halfArc(308,421,135,382,50,0),100);
        });
        dapath.animate({
        d:"M135,382.5c0,52.159,85,79.031,170.001,79.498 C 390.3,462.466,475.598,436.344,475,382.5",
    },100,function(){
        dapath.animate({d:"M135,382.5c0,0,85.999-0.467,171,0c85.299,0.468,169,0,169,0"
    },100,function(){
        dapath.animate({
        d:"M135,382.292c0,0,85.999-22.759,171-22.292c85.299,0.468,169,22.292,169,22.292"
        },100,function(){
            dapath.animate({
                d:"M136,382.415c0,0,90.999,13.118,176,13.585c85.299,0.468,164-13.585,164-13.585"
            },100,function(){
                dapath.animate({
                d:"M135,382.5c0,0,85.999-0.467,171,0c85.299,0.468,169,0,169,0"
                },500,mina.bounce,function(){
                var pathclone = dapath.clone().attr({
                    stroke: "blue",
                    strokeDashoffset: 500,
                    strokeDasharray: 500
                });
                var datext = s.text(100,330,"90").attr("style","text-align: center");
                var banner  = s.group(poly,datext);
                    moveAlongPath(banner,{x:136,y:382.415},movepath,3600);
                    var tick = 0; 
                    var interval = setInterval(function(){
                        tick += 1;
                        var red = Math.random()*255;
                        var blue = Math.random()*255;
                        var green = Math.random()*255;
                        var hex = Snap.rgb(red,green,blue);
                        var dadatext = $("text").text(tick+" %")
                        if(tick % 10 == 0){
                        dadatext.attr({"font-size":"30px","fill":hex});
                        };
                        if (tick >= 100){clearTimeout(interval)};
                        },36);
                    pathclone.animate({
                        "stroke-dashoffset":0,
                    },5300);
                    var paths = Snap.set().push(dapath,pathclone);
                     paths.animate({
                        d:"M135,382.5c0,0,30,17,42,17c10,0.208,298-17,298-17"
                    },300,function(){
                        paths.animate({
                            d:"M135,382.5c0,0,287,17.208,297,17c12,0,43-17,43-17"
                        },2900,function(){
                            paths.animate({d:"M135,382.5c0,0,287,17.208,297,17c12,0,43-17,43-17"},100,function(){
                                paths.animate({
                                    d:"M135,382.5c0,0,85.999-0.467,171,0c85.299,0.468,169,0,169,0"
                                },200,function(){
                                    $("a").off("click");
                                /* End of animation */
              /* Ready for next transformation*/
                banner.animate({
                transform: "rotate(180deg)"
                },200);
                                })
                            })
                        });
                    })

                });
        });
    })
    })
    });
    });`

在动画结束时，横幅应在尖点上旋转180度。然而，它并没有像我预期的那样具有动画效果。这有什么解决方案吗？改造动画是令人生畏的，我不完全理解它......

Answer 1

我认为您缺少的是您需要提供原始变换以包含，否则它将假设您只是替换该变换。

所以这条线......

banner.animate({ transform: 'rotate(180)' },200);

这实际意味着，我将覆盖任何当前的变换并动画为新的旋转（180）。

你可能想要的是......保留任何现有的变换，现在也旋转（180）。

所以你可能想要更像这样的东西......没有参数的transform（）会给我们现有的变换。所以我们可以结合起来。

转换 - ＆gt; nowtransform然后应用其他变换

这将如下所示。

banner.animate({ transform: banner.transform() + " s-1,1" },200);

我不太确定你所追求的旋转效果（你的意思是颠倒过来还是回到前面？），但是's-1,1'可能就是你想到的。< / p>

jsfiddle示例

编辑：jsfiddle并进行轮换。请注意，为此，您需要考虑多边形相对于组的“位置”，作为移动它时的偏移（然后还移动组）。

编辑：旋转中心点非常困难，因为我们有多边形点偏移（不以0为中心）然后翻译。他们所在的小组也被翻译了，所以你有三件事要做。

为了尝试并帮助理解获取实际点数，我已经重写了旋转动画。

banner.animate({ transform: banner.transform() + "r180," + banner.getBBox(1).cx + ',' + banner.getBBox(1).y2 },200);

我们得到了边界框，它为我们计算中心。枢轴点是中间长度cx，最低y点是y2。我怀疑有一种更简单的方法可以让整个过程降低整个代码中的变换复杂度，但是这里有一个太多的问题可以分解。

带有getBBox的

jsfiddle

使用Snap SVG的多级svg变换动画

1 个答案: