使用对齐.svg在镶边中错误"d"值进行动画处理

Question

您可以通过打开http://cjohn.design在Chrome和Safari中。徽标动画被假设为一次只动画一个部分，就像在Safari-Chrome动画中一样。

以下是运行以下内容的Snap.svg函数：

function logo_in() {
    logo.animate ({
        d: p1
    }, 75, mina.easein);
            setTimeout(function() {
                logo.animate ({
                    d: p2
                }, 75, mina.easein);    
            }, 100);
            setTimeout(function() {
                logo.animate ({
                    d: p3
                }, 75, mina.easein);    
            }, 200);
            setTimeout(function() {
                logo.animate ({
                    d: p4
                }, 75, mina.easein);    
            }, 300);
            setTimeout(function() {
                logo.animate ({
                    d: p5
                }, 50, mina.easein);    
            }, 400);
};

变量p0-p5是徽标动画的6个阶段。默认情况下，它设置为p0，并使用setTimeouts设置每个动画。

这一直持续到最近。标志是如何开始如此笨拙地动画化的？

Answer 1

我的CSS值

transition: all .8s ease

与动画时间值冲突

logo.animate ({
    d: p1
}, **75**, mina.easein);