SVG动画制作

本质就是：通过库（GSAP）操作svg的“dom”元素，顺序执行动画。

1.找到svg图案
2.引入库
3.通过库api编写动画

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #House {
            margin: 0 auto;
            display: block;
            width: 500px;
            height: 500px;
        }
    </style>
</head>

<body>
    <svg version="1.1" id="House" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
        y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="25.278" y1="479.7732" x2="221.489"
            y2="411.5112" gradientTransform="matrix(1.0039 0 0 -1.0039 0.1922 516.5547)">
            <stop offset="0" style="stop-color:#E2EDF2" />
            <stop offset="1" style="stop-color:#9FC7E2" />
        </linearGradient>
        <path style="fill:url(#SVGID_1_);"
            d="M44.912,72.683c-4.814-9.951-0.651-21.92,9.3-26.733c3.248-1.571,6.707-2.17,10.066-1.94
      c3.168-7.043,8.73-13.055,16.225-16.681c16.942-8.197,37.321-1.107,45.518,15.835c1.981,4.095,3.062,8.391,3.333,12.666
      c7.562-0.252,14.923,3.868,18.431,11.117c4.746,9.809,0.642,21.607-9.168,26.353c-8.908,4.31-19.44,1.303-24.856-6.63
      c-1.138,0.73-2.326,1.406-3.574,2.011c-13.394,6.48-28.931,3.399-38.904-6.545C61.406,86.68,49.669,82.513,44.912,72.683z" />
        <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="44.1546" y1="496.9826" x2="73.0446"
            y2="486.9286" gradientTransform="matrix(1.0039 0 0 -1.0039 0.1922 516.5547)">
            <stop offset="0" style="stop-color:#E2EDF2" />
            <stop offset="1" style="stop-color:#9FC7E2" />
        </linearGradient>
        <circle style="fill:url(#SVGID_2_);" cx="49.945" cy="19.511" r="16.727" />
        <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="112.1688" y1="402.6902" x2="132.3288"
            y2="382.5402" gradientTransform="matrix(1.0039 0 0 -1.0039 0.1922 516.5547)">
            <stop offset="0" style="stop-color:#816965" />
            <stop offset="1" style="stop-color:#654E48" />
        </linearGradient>
        <path style="fill:url(#SVGID_3_);" d="M149.315,171.132h-40.343c-5.709,0-10.337-4.628-10.337-10.337V96.446
      c0-5.709,4.628-10.337,10.337-10.337h40.343c5.709,0,10.337,4.628,10.337,10.337v64.349
      C159.653,166.504,155.025,171.132,149.315,171.132z" />
        <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="75.8086" y1="141.8" x2="75.8086" y2="5.04"
            gradientTransform="matrix(1.0039 0 0 -1.0039 0.1922 516.5547)">
            <stop offset="0" style="stop-color:#FFE7A5" />
            <stop offset="0.966" style="stop-color:#FFBF5C" />
        </linearGradient>
        <rect x="16.063" y="354.612" style="fill:url(#SVGID_4_);" width="120.471" height="154.604" />
        <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="74.6335" y1="177.22" x2="74.6335" y2="127.48"
            gradientTransform="matrix(1.0039 0 0 -1.0039 0.1922 516.5547)">
            <stop offset="0" style="stop-color:#FF5D00" />
            <stop offset="1" style="stop-color:#D54003" />
        </linearGradient>
        <path style="fill:url(#SVGID_5_);" d="M141.553,387.739H16.333c-5.131,0-8.804-4.954-7.315-9.865l12.426-40.931
      c0.978-3.222,3.948-5.423,7.315-5.423h112.795V387.739z" />
        <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="433.8086" y1="141.8" x2="433.8086" y2="5.04"
            gradientTransform="matrix(1.0039 0 0 -1.0039 0.1922 516.5547)">
            <stop offset="0" style="stop-color:#FFE7A5" />
            <stop offset="0.966" style="stop-color:#FFBF5C" />
        </linearGradient>
        <rect x="375.467" y="354.612" style="fill:url(#SVGID_6_);" width="120.471" height="154.604" />

        <linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="434.9837" y1="177.22" x2="434.9837" y2="127.48"
            gradientTransform="matrix(1.0039 0 0 -1.0039 0.1922 516.5547)">
            <stop offset="0" style="stop-color:#FF5D00" />
            <stop offset="1" style="stop-color:#D54003" />
        </linearGradient>
        <path style="fill:url(#SVGID_8_);" d="M370.447,387.739h125.22c5.131,0,8.804-4.954,7.315-9.865l-12.426-40.931
      c-0.978-3.222-3.948-5.423-7.315-5.423H370.447V387.739z" />
        <linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="254.8286" y1="240.99" x2="254.8286" y2="-94.5"
            gradientTransform="matrix(1.0039 0 0 -1.0039 0.1922 516.5547)">
            <stop offset="0" style="stop-color:#FFE7A5" />
            <stop offset="0.966" style="stop-color:#FFBF5C" />
            <stop offset="1" style="stop-color:#DB9E36" />
        </linearGradient>
        <polygon style="fill:url(#SVGID_9_);"
            points="415.061,189.342 415.061,509.211 96.979,509.211 96.979,189.342 256,33.433 " />

        <path style="fill:#503837;" d="M181.863,417.879h-49.615c-3.129,0-5.665-2.536-5.665-5.665v-68.815c0-3.129,2.537-5.665,5.665-5.665
      h49.615c3.129,0,5.665,2.537,5.665,5.665v68.815C187.529,415.343,184.992,417.879,181.863,417.879z" />
        <path style="fill:#FFFFFF;" d="M181.863,425.899h-49.615c-7.545,0-13.684-6.139-13.684-13.684v-68.815
      c0-7.545,6.139-13.684,13.684-13.684h49.615c7.545,0,13.684,6.139,13.684,13.684v68.815
      C195.548,419.76,189.409,425.899,181.863,425.899z M134.603,409.86h44.906v-64.107h-44.906V409.86z" />

        <path style="fill:#503837;" d="M381.697,417.879h-49.615c-3.129,0-5.665-2.536-5.665-5.665v-68.815c0-3.129,2.536-5.665,5.665-5.665
      h49.615c3.129,0,5.665,2.537,5.665,5.665v68.815C387.363,415.343,384.826,417.879,381.697,417.879z" />
        <path style="fill:#FFFFFF;" d="M381.698,425.899h-49.615c-7.545,0-13.684-6.139-13.684-13.684v-68.815
      c0-7.545,6.139-13.684,13.684-13.684h49.615c7.545,0,13.684,6.139,13.684,13.684v68.815
      C395.382,419.76,389.243,425.899,381.698,425.899z M334.436,409.86h44.906v-64.107h-44.906V409.86z" />
        <path style="fill:#816965;" d="M222.877,509.209V335.44c0-7.665,6.213-13.878,13.878-13.878h38.536
      c7.665,0,13.878,6.213,13.878,13.878v173.769H222.877z" />
        <path style="fill:#503837;" d="M297.376,509.209H280.96V340.172c0-5.72-4.68-10.401-10.401-10.401h-29.074
      c-5.744,0-10.401,4.656-10.401,10.401v169.037h-16.415V329.316c0-8.815,7.146-15.961,15.961-15.961h50.784
      c8.815,0,15.961,7.146,15.961,15.961v179.893H297.376z" />
        <circle style="fill:#FFFFFF;" cx="244.264" cy="386.788" r="7.484" />
        <rect x="96.969" y="465.415" style="fill:#654E48;" width="318.103" height="43.792" />
        <linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="20.1112" y1="53.3485" x2="77.5672"
            y2="-4.1015" gradientTransform="matrix(1.0039 0 0 -1.0039 0.1922 516.5547)">
            <stop offset="0" style="stop-color:#9EB644" />
            <stop offset="1" style="stop-color:#738611" />
        </linearGradient>
        <path style="fill:url(#SVGID_14_);" d="M93.486,492.097c0,6.044-1.143,11.811-3.231,17.112H3.231C1.143,503.908,0,498.141,0,492.097
      c0-5.885,1.085-11.511,3.072-16.694c6.719-17.579,23.739-30.049,43.672-30.049s36.952,12.471,43.672,30.049
      C92.402,480.587,93.486,486.213,93.486,492.097z" />
        <linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="70.13" y1="40.7114" x2="111.81" y2="-0.9687"
            gradientTransform="matrix(1.0039 0 0 -1.0039 0.1922 516.5547)">
            <stop offset="0" style="stop-color:#9EB644" />
            <stop offset="1" style="stop-color:#738611" />
        </linearGradient>
        <path style="fill:url(#SVGID_15_);" d="M123.628,496.797c0,4.384-0.829,8.567-2.343,12.413H58.156
      c-1.514-3.845-2.343-8.029-2.343-12.413c0-4.269,0.787-8.35,2.229-12.11c4.874-12.752,17.22-21.798,31.68-21.798
      s26.806,9.046,31.68,21.798C122.841,488.446,123.628,492.528,123.628,496.797z" />
        <linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="424.9272" y1="60.9786" x2="491.8972"
            y2="-6.0014" gradientTransform="matrix(1.0039 0 0 -1.0039 0.1922 516.5547)">
            <stop offset="0" style="stop-color:#9EB644" />
            <stop offset="1" style="stop-color:#738611" />
        </linearGradient>
        <path style="fill:url(#SVGID_16_);" d="M512,489.262c0,7.045-1.333,13.768-3.766,19.947H406.79
      c-2.432-6.178-3.766-12.902-3.766-19.947c0-6.86,1.265-13.417,3.581-19.46c7.833-20.491,27.672-35.028,50.907-35.028
      c23.235,0,43.074,14.537,50.907,35.028C510.735,475.845,512,482.402,512,489.262z" />
        <linearGradient id="SVGID_17_" gradientUnits="userSpaceOnUse" x1="327.6079" y1="281.3493" x2="181.0779"
            y2="427.8793" gradientTransform="matrix(1.0039 0 0 -1.0039 0.1922 516.5547)">
            <stop offset="0" style="stop-color:#FF5D00;stop-opacity:0" />
            <stop offset="1" style="stop-color:#D54003" />
        </linearGradient>

        <path style="fill:#654E48;"
            d="M391.75,218.606H124.372c-6.376,0-11.562,5.187-11.562,11.562v51.333h8.031v-51.333
      c0-1.947,1.584-3.531,3.531-3.531h15.994v54.863h8.031v-54.863h23.859v54.863h8.031v-54.863h23.859v54.863h8.031v-54.863h23.859
      v54.863h8.031v-54.863h23.86v54.863h8.031v-54.863h23.859v54.863h8.031v-54.863h23.859v54.863h8.031v-54.863h23.859v54.863h8.031
      v-54.863h20.118c1.947,0,3.531,1.584,3.531,3.531v51.333h8.031v-51.333C403.312,223.793,398.125,218.606,391.75,218.606z" />
        <linearGradient id="SVGID_18_" gradientUnits="userSpaceOnUse" x1="254.8086" y1="245.14" x2="254.8086" y2="192.8"
            gradientTransform="matrix(1.0039 0 0 -1.0039 0.1922 516.5547)">
            <stop offset="0" style="stop-color:#FF5D00" />
            <stop offset="1" style="stop-color:#D54003" />
        </linearGradient>
        <path style="fill:url(#SVGID_18_);" d="M421.654,273.168v25.75c0,3.827-3.102,6.929-6.929,6.929H97.275
      c-3.827,0-6.929-3.102-6.929-6.929v-25.75c0-3.827,3.102-6.929,6.929-6.929h317.45C418.552,266.239,421.654,269.341,421.654,273.168
      z" />
        <linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="254.8086" y1="368.7599" x2="254.8086"
            y2="191.07" gradientTransform="matrix(1.0039 0 0 -1.0039 0.1922 516.5547)">
            <stop offset="0" style="stop-color:#FF5D00" />
            <stop offset="1" style="stop-color:#D54003" />
        </linearGradient>
        <path style="fill:url(#SVGID_19_);" d="M472.01,217.228L266.626,11.776c-5.854-5.854-15.346-5.854-21.2,0L39.99,217.211
      c-3.83,3.83-3.83,10.039,0,13.869l8.755,8.755c3.83,3.83,10.039,3.83,13.869,0l190.62-190.62c1.541-1.541,4.04-1.541,5.581,0
      l190.57,190.636c3.83,3.83,10.039,3.83,13.869,0l8.755-8.755C475.84,227.267,475.84,221.058,472.01,217.228z" />
        <linearGradient id="SVGID_20_" gradientUnits="userSpaceOnUse" x1="407.64" y1="337.2113" x2="300.24"
            y2="444.6093" gradientTransform="matrix(1.0039 0 0 -1.0039 0.1922 516.5547)">
            <stop offset="0" style="stop-color:#FF5D00;stop-opacity:0" />
            <stop offset="1" style="stop-color:#D54003" />
        </linearGradient>

        <path style="fill:#654E48;" d="M294.433,193.67h-76.865c-3.031,0-5.487-2.457-5.487-5.487v-38.433
      c0-24.257,19.664-43.921,43.921-43.921l0,0c24.257,0,43.921,19.664,43.921,43.921v38.433
      C299.921,191.213,297.463,193.67,294.433,193.67z" />
        <path style="fill:#FFFFFF;" d="M256,97.49c-28.816,0-52.259,23.444-52.259,52.259v38.432c0,7.625,6.202,13.827,13.827,13.827h76.865
      c7.625,0,13.827-6.202,13.827-13.827v-38.432C308.259,120.933,284.817,97.49,256,97.49z M291.293,145.302H264.34v-30.137
      C278.542,118.591,289.445,130.555,291.293,145.302z M247.66,115.165v30.137h-26.953C222.555,130.555,233.457,118.591,247.66,115.165
      z M220.419,161.981h27.241v23.35h-27.241V161.981z M264.34,185.331v-23.35h27.241v23.35H264.34z" />

    </svg>

    <button onclick="animateHouse()"> Build! </button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
    <script>
        function animateHouse() {
            // another timeline
            const tl2 = new TimelineMax();
            // Smoke
            tl2
                .from(
                    "#House > path:nth-child(2)",
                    1.5,
                    {
                        scaleX: 0,
                        scaleY: 0,
                        transformOrigin: "bottom-right",
                        ease: Back.easeOut
                    },
                    0,
                    "houseTimeline"
                )
                .from("#House > circle:nth-child(4)", 1.5, {
                    scaleX: 0,
                    scaleY: 0,
                    transformOrigin: "bottom-right",
                    ease: Back.easeOut
                })
                .staggerFromTo(
                    ["#House > circle:nth-child(4)", "#House > path:nth-child(2)"],
                    1,
                    { opacity: 1 },
                    { opacity: 0 },
                    0.3
                )
                .repeat(5);

            const tl = new TimelineMax();
            tl
                // Ground
                .from("#House > rect:nth-child(24)", 1, {
                    scaleX: 0,
                    transformOrigin: "center",
                    ease: Power2.easeOut
                })
                // House
                .from("#House > polygon", 1, {
                    scaleY: 0,
                    transformOrigin: "bottom",
                    ease: Bounce.easeOut
                })
                // Roof
                .from("#House > path:nth-child(36)", 1, {
                    scaleX: 0,
                    scaleY: 0,
                    transformOrigin: "top",
                    ease: Bounce.easeOut
                })
                // Balcony
                .staggerFrom(
                    ["#House > path:nth-child(34)", "#House > path:nth-child(32)"],
                    0.8,
                    {
                        scaleY: 0,
                        transformOrigin: "bottom",
                        ease: Bounce.easeOut,
                        stagger: 0.2
                    },
                    0,
                    "scene1+=0.5"
                )
                // Side house
                .staggerFrom(
                    ["#House > path:nth-child(10)", "#House > rect:nth-child(8)"],
                    0.8,
                    {
                        scaleX: 0,
                        transformOrigin: "right",
                        ease: Bounce.easeOut,
                        stagger: 0.2
                    },
                    0,
                    "scene1+=0.5"
                )
                // Side house
                .staggerFrom(
                    ["#House > path:nth-child(14)", "#House > rect:nth-child(12)"],
                    0.8,
                    {
                        scaleX: 0,
                        transformOrigin: "left",
                        ease: Bounce.easeOut,
                        stagger: 0.2
                    },
                    0,
                    "scene1+=0.5"
                )
                // Windows
                .staggerFrom(
                    [
                        "#House > path:nth-child(39)",
                        "#House > path:nth-child(38)",
                        "#House > path:nth-child(17)",
                        "#House > path:nth-child(18)",
                        "#House > path:nth-child(19)",
                        "#House > path:nth-child(20)"
                    ],
                    0.8,
                    { scaleX: 0, transformOrigin: "top", ease: Bounce.easeOut, stagger: 0.2 }
                )
                // Tree
                .staggerFrom(
                    [
                        "#House > path:nth-child(28)",
                        "#House > path:nth-child(26)",
                        "#House > path:nth-child(30)"
                    ],
                    0.8,
                    {
                        scaleY: 0,
                        transformOrigin: "bottom",
                        ease: Power2.easeOut,
                        stagger: 0.2
                    }
                )
                // Door & chimney
                .staggerFrom(
                    [
                        "#House > path:nth-child(21)",
                        "#House > path:nth-child(22)",
                        "#House > path:nth-child(23)",
                        "#House > circle:nth-child(23)",
                        "#House > path:nth-child(6)"
                    ],
                    0.8,
                    {
                        scaleY: 0,
                        transformOrigin: "bottom",
                        ease: Power2.easeOut,
                        stagger: 0.2
                    }
                )
                .add("houseTimeline", "+=0.5");

            tl.add(tl2);
        }

    </script>
</body>

</html>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,293评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,604评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,958评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,729评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,719评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,630评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,000评论 3赞 397
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,665评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,909评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,400评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,986评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2赞 342

推荐阅读更多精彩内容