Javascript Raphael 动画路径答案

【问题标题】：Javascript Raphael animating a pathJavascript Raphael 动画路径
【发布时间】：2017-11-10 22:05:40
【问题描述】：

我有一条可以形成形状并能够旋转的路径，但我不知道如何让形状/路径在屏幕上向下移动。我已经查看了其他解决方案，但似乎无法让它们发挥作用。谢谢。

leftRec = paper.path("M400 50 L380 70 420 90 380 110 420 130 400 150 350 150 350 50z");
leftRec.attr("fill","#f00");
leftRec.animate({transform:"r-70,400,150"}, 2000, "ease-in");

leftRec.animate({cy: 600, cx: 200}, 2000);

【问题讨论】：

那么，您希望形状在屏幕上旋转并向下移动，还是仅仅向下移动就足够了？

标签： javascript raphael

【解决方案1】：

要同时执行旋转和平移，请使用animate 方法

var leftRec = paper.path("M400 50 L380 70 420 90 380 110 420 130 400 150 350 150 350 50Z");
leftRec.attr("fill","#f00");
leftRec.animate({transform: "T0,500R-90"}, 1000, "ease-in");

要先旋转再平移，请使用animate方法中的回调

var leftRec = paper.path("M400 50 L380 70 420 90 380 110 420 130 400 150 350 150 350 50Z");
leftRec.attr("fill","#f00");
leftRec.animate({transform:"r-90,400,150"}, 1000, "ease-in", function() {
    this.animate({
        path: Raphael.transformPath('M400 50 L380 70 420 90 380 110 420 130 400 150 350 150 350 50Z', 'T-500,0')
    }, 1000);

    // The below approach could have worked in theory but probably the coordinate system change might 
    // tamper with the subsequent transform. I am not so sure.
    // this.animate({transform: "T0,500"}, 1000)
});

在这两种情况下，形状都会垂直移动 500 像素。

这可能不是最好的解决方案，如果有更好的方法来解决这个问题，请更正/改进它。

【讨论】：

谢谢，我发现上面的代码完全符合预期。