通过在 Snap.svg 中移动最短距离来获取任意路径以进行动画处理

Question

我有一个canvas。在这个 canvas 中，我有一条封闭的路径，我正试图将这条路径变成另一条路径。

路径可以有任意数量的点（>=3）。

我有两条路：

    var path1 = "M50,50L200,50,200,200,50,200z"
    var path2 = "M300,200L50,200,50,50,200,50z"

这就是我用来制作变形动画的东西：

    var path = paper.path(path1).attr({'stroke':'black','fill':'white'})
    var currentPath = 1
    path.click(function () {
        if(currentPath==1) {
            path.stop().animate({d: path2},2000, function () {
                currentPath=2
            })

        }
        else {
            path.stop().animate({d: path1},2000,function () {
                currentPath=1
            })
        }
    })

这是我想要达到的情况： http://jsfiddle.net/MichaelSel/vgw3qxpg/7/

这是我想避免的情况。 http://jsfiddle.net/MichaelSel/vgw3qxpg/6/

有什么方法可以告诉 snap 使用到每个点的最短距离来制作动画吗？

注意：我不能只是 'rewrite' 倒序的路径（这会修复它们），因为是客户任意定位这些点。

我能做什么？

如果我的问题不清楚，我很乐意添加更多详细信息。

谢谢大家

Answer 1

不，没有办法做到这一点（除了用检查编码你自己的复杂变形）。

它使用点之间的基本插值，因此让开发人员在他们的 svg 创建中移动点很重要，而不是仅仅从头开始创建一个可以从任何位置开始点的新 svg。

据我所知，即使客户端任意定位它们，您仍然不能使用一些巧妙的代码来旋转路径点，但我认为这并不简单。

通过在 Snap.svg 中移动最短距离来获取任意路径以进行动画处理

Getting arbitrary paths to animate by moving the shortest distance in Snap.svg

svg

snap.svg