将“;d”;chrome中Snap.svg错误的值

Animating a "d" value with Snap.svg erroring in chrome

本文关键字:svg 错误 Snap chrome      更新时间:2023-09-26

您可以通过打开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设置每个动画。

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

我的CSS值

transition: all .8s ease

与动画时间值冲突

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