SVG多帧动画与组合：使用Snap.svg实现复杂过渡效果

<!-- 通过CDN引入 Snap.svg -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>

# 或者通过npm安装
npm install snapsvg

// 选择一个ID为“mySvg”的SVG画布
var s = Snap("#mySvg");

// 在该画布内选择ID为“frame1”的组元素
var frame1 = s.select("#frame1"); 
// 或者，如果frame1是顶级元素且Snap()已绑定到document，可以直接
// var frame1 = Snap("#frame1"); 

<svg id="mainSvg" width="100%" height="100%" viewBox="0 0 2758 2440" fill="none" xmlns="http://www.w3.org/2000/svg">
    <!-- 第1帧：初始可见 -->
    <g id="frame1">
        <path d="M2193 2124C..." fill="url(#paint0_linear_54_9)" />
        <path d="M2193 2124C..." fill="url(#paint1_linear_54_9)" fill-opacity="0.32" />
        <defs>
            <filter id="filter0_f_54_9" x="0.554688" y="0.743164" width="2757.32" height="2438.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">...</filter>
            <linearGradient id="paint0_linear_54_9" x1="661.172" y1="668.504" x2="-590.5" y2="1723" gradientUnits="userSpaceOnUse">...</linearGradient>
            <linearGradient id="paint1_linear_54_9" x1="504.172" y1="584.622" x2="1975.31" y2="1778.8" gradientUnits="userSpaceOnUse">...</linearGradient>
        </defs>
    </g>

    <!-- 第2帧：初始隐藏 -->
    <g id="frame2" style="opacity:0;">
        <path d="M2193 2124C..." fill="url(#paint0_linear_70_4)" />
        <path d="M2193 2124C..." fill="url(#paint1_linear_70_4)" fill-opacity="0.32" />
        <defs>
            <filter id="filter0_f_70_4" x="0.554688" y="0.743164" width="2783.89" height="2438.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">...</filter>
            <linearGradient id="paint0_linear_70_4" x1="661.172" y1="668.504" x2="-274" y2="1703.5" gradientUnits="userSpaceOnUse">...</linearGradient>
            <linearGradient id="paint1_linear_70_4" x1="504.172" y1="584.622" x2="1975.31" y2="1778.8" gradientUnits="userSpaceOnUse">...</linearGradient>
        </defs>
    </g>

    <!-- 更多帧... -->
</svg>

document.addEventListener('DOMContentLoaded', function() {
    var s = Snap("#mainSvg"); // 绑定到主SVG容器

    // 确保初始状态，只有frame1可见
    s.select("#frame1").attr({ opacity: 1, display: 'block' });
    s.select("#frame2").attr({ opacity: 0, display: 'none' });
    s.select("#frame3").attr({ opacity: 0, display: 'none' }); // 假设有更多帧

    animateFrame1(); // 启动第一个动画

    function animateFrame1() {
        var frame1 = s.select("#frame1");
        var frame2 = s.select("#frame2");

        // 动画frame1，例如旋转180度并逐渐消失
        frame1.animate(
            { transform: 'r180,1379,1220', opacity: 0 }, // 围绕中心点旋转并淡出
            1000, // 持续1秒
            mina.easeinout, // 缓动函数
            function() {
                frame1.attr({ display: 'none' }); // 动画结束后隐藏frame1
                animateFrame2(); // 启动下一帧动画
            }
        );

        // 同时，让frame2逐渐显现并进行形态变换
        frame2.attr({ display: 'block' }); // 确保frame2可见
        frame2.animate(
            { opacity: 1, transform: 's1.1' }, // 放大并淡入
            1000,
            mina.easeinout
        );
    }

    function animateFrame2() {
        var frame2 = s.select("#frame2");
        var frame3 = s.select("#frame3"); // 假设有frame3

        // 动画frame2，例如进行颜色渐变变化或路径形变
        // 注意：路径形变需要两个路径有相同的节点数，或者使用Snap.svg的morph方法
        // 这里仅作示例，假设frame2的fill属性可以直接动画化
        frame2.animate(
            { transform: 'r-90,1379,1220', opacity: 0 }, // 旋转并淡出
            1000,
            mina.easeinout,
            function() {
                frame2.attr({ display: 'none' });
                // animateFrame3(); // 启动下一帧动画，依此类推
            }
        );

        // 同时，让frame3逐渐显现
        if (frame3) { // 检查frame3是否存在
            frame3.attr({ display: 'block' });
            frame3.animate(
                { opacity: 1, transform: 's1.05' },
                1000,
                mina.easeinout
            );
        }
    }

    // 更多 animateFrameX 函数...
});