使用Snap.svg实现的蚕蛹化蝶动画

SVG Morphing Butterfly using Snap.svg & Sketch 首先是一个蚕蛹的图形，鼠标点击后变成一个蝴蝶形状。包含相关教程的链接。

svg, morph

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2672
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(function() {

// the 5 polygons
    var poly1 = Snap('#poly-01');
    var poly2 = Snap('#poly-02');
    var poly3 = Snap('#poly-03');
    var poly4 = Snap('#poly-04');
    var poly5 = Snap('#poly-05');

// click trigger
    var butterfly = $('#butterfly');

var morph01 = true; //caterpillar
    var morph02 = false; //cocoon
    var morph03 = false; //butterfly
    var morph04 = false; //cocoon-reverse

butterfly.on('click', function() {
        if (morph01) {
            //if caterpillar, morph into cocoon - so paste in cocoon path d values & colours
            poly1.animate({
                d: "M263.779105,286.829982 C268.349981,310.33569 237.417184,340.319503 225.15195,336.927641 C225.15195,336.927641 196.310607,342.908547 175.58097,323.548947 C170.573498,318.872422 167.701525,313.212284 166.225539,307.316623 C161.591327,288.805775 170.718717,267.973136 170.718717,267.973136 C170.718717,267.973136 191.242791,240.040939 216.951293,243.19372 C242.659797,246.346502 259.208229,263.324273 263.779105,286.829982 L263.779105,286.829982 Z",
                fill: "#B3AB12"
            }, 500, mina.easein);
            poly2.animate({
                d: "M153.071418,261.56878 C152.533703,292.242657 185.523947,310.674883 185.523947,310.674883 C185.523947,310.674883 245.502818,325.942176 267.350318,296.904568 C289.197819,267.866959 277.893006,244.558108 261.019587,224.543976 C244.146167,204.529844 222.724566,200.345462 194.462778,210.038884 C166.20099,219.732306 153.609133,230.894902 153.071418,261.56878 L153.071418,261.56878 Z",
                fill: "#DBDE66"
            }, 500, mina.easein);
            poly3.animate({
                d: "M147.395457,236.053163 C134.069881,206.121368 183.58576,150.852538 183.58576,150.852538 C183.58576,150.852538 218.844973,124.857982 246.477583,145.960666 C274.110194,167.06335 286.108814,190.778272 279.094985,223.791755 C272.081157,256.805237 253.668972,274.202506 219.644317,277.777087 C185.619662,281.351669 160.721034,265.984957 147.395457,236.053163 L147.395457,236.053163 Z",
                fill: "#E2CD32"
            }, 500, mina.easein);
            poly4.animate({
                d: "M145.271408,178.297141 C151.78606,215.230044 181.351896,242.728157 216.935496,247.723373 C252.519097,252.718589 270.851364,221.929376 283.883024,195.553319 C296.914684,169.177262 301.174082,138.467884 276.572957,111.998908 C251.971833,85.5299319 208.075786,75.5717647 189.902858,94.5517024 C157.217476,111.91996 138.756756,141.364238 145.271408,178.297141 L145.271408,178.297141 Z",
                fill: "#DBDE66"
            }, 500, mina.easein);
            poly5.animate({
                d: "M217.40979,158.058464 C235.034607,156.516493 248.418505,168.715084 255.686236,185.187507 C262.953966,201.659929 260.40715,216.059694 248.053876,227.513751 C235.700603,238.967807 221.592686,240.288019 206.076219,231.18632 C190.559752,222.08462 183.329912,210.120355 186.25261,191.262162 C189.175309,172.403969 199.784974,159.600436 217.40979,158.058464 L217.40979,158.058464 Z",
                fill: "#B3AB12"
            }, 500, mina.easein);
            morph01 = false;
            morph02 = true;
        } else if (morph02) {
            //if cocoon, morph into butterfly - so paste in butterfly path d values & colours
            poly1.animate({
                d: "M368.006756,115.192288 C371.140649,144.995285 327.949529,184.540861 327.949529,184.540861 L248.687588,212.672346 L241.449245,88.3042896 C241.449245,88.3042896 282.700915,48.9489766 314.399723,55.6836022 C346.09853,62.4182278 364.872863,85.3892903 368.006756,115.192288 Z",
                fill: "#B82A9D"
            }, 500, mina.easein);
            poly2.animate({
                d: "M85.023027,115.192288 C81.8891342,144.995285 125.080254,184.540861 125.080254,184.540861 L204.342195,212.672346 L211.580538,88.3042896 C211.580538,88.3042896 170.328868,48.9489766 138.63006,55.6836022 C106.931253,62.4182278 88.1569199,85.3892903 85.023027,115.192288 Z",
                fill: "#B82A9D"
            }, 500, mina.easein);
            poly3.animate({
                d: "M433.305638,290.117404 C428.864071,340.860906 399.325188,372.884688 351.781826,383.855784 C304.238463,394.82688 237.509734,306.754637 237.509734,306.754637 L248.22743,213.446791 C248.22743,213.446791 325.006419,168.258872 371.275971,187.889909 C417.545523,207.520946 437.747205,239.373902 433.305638,290.117404 Z",
                fill: "#5E2174"
            }, 500, mina.easein);
            poly4.animate({
                d: "M16.4805179,290.117404 C20.9220847,340.860906 50.4609675,372.884688 98.0043301,383.855784 C145.547693,394.82688 212.276421,306.754637 212.276421,306.754637 L201.558726,213.446791 C201.558726,213.446791 124.779737,168.258872 78.510185,187.889909 C32.240633,207.520946 12.0389511,239.373902 16.4805179,290.117404 Z",
                fill: "#5E2174"
            }, 500, mina.easein);
            poly5.animate({
                d: "M225.463602,67.0227273 C236.706839,67.0227273 243.644696,69.6008212 247.950076,157.49385 C252.255456,245.386878 246.478634,242.821242 239.361007,295.127994 C232.24338,347.434745 222.311257,374.092407 211.566196,295.127994 C200.821136,216.16358 200.351852,211.088044 202.977127,157.49385 C205.602402,103.899655 214.220364,67.0227273 225.463602,67.0227273 Z",
                fill: "#EEC563"
            }, 500, mina.easein);
            morph02 = false;
            morph03 = true;
        } else if (morph03) {
            //if butterfly, morph back into cocoon - so paste in cocoon path d values & colours
            poly1.animate({
                d: "M263.779105,286.829982 C268.349981,310.33569 237.417184,340.319503 225.15195,336.927641 C225.15195,336.927641 196.310607,342.908547 175.58097,323.548947 C170.573498,318.872422 167.701525,313.212284 166.225539,307.316623 C161.591327,288.805775 170.718717,267.973136 170.718717,267.973136 C170.718717,267.973136 191.242791,240.040939 216.951293,243.19372 C242.659797,246.346502 259.208229,263.324273 263.779105,286.829982 L263.779105,286.829982 Z",
                fill: "#B3AB12"
            }, 500, mina.easein);
            poly2.animate({
                d: "M153.071418,261.56878 C152.533703,292.242657 185.523947,310.674883 185.523947,310.674883 C185.523947,310.674883 245.502818,325.942176 267.350318,296.904568 C289.197819,267.866959 277.893006,244.558108 261.019587,224.543976 C244.146167,204.529844 222.724566,200.345462 194.462778,210.038884 C166.20099,219.732306 153.609133,230.894902 153.071418,261.56878 L153.071418,261.56878 Z",
                fill: "#DBDE66"
            }, 500, mina.easein);
            poly3.animate({
                d: "M147.395457,236.053163 C134.069881,206.121368 183.58576,150.852538 183.58576,150.852538 C183.58576,150.852538 218.844973,124.857982 246.477583,145.960666 C274.110194,167.06335 286.108814,190.778272 279.094985,223.791755 C272.081157,256.805237 253.668972,274.202506 219.644317,277.777087 C185.619662,281.351669 160.721034,265.984957 147.395457,236.053163 L147.395457,236.053163 Z",
                fill: "#E2CD32"
            }, 500, mina.easein);
            poly4.animate({
                d: "M145.271408,178.297141 C151.78606,215.230044 181.351896,242.728157 216.935496,247.723373 C252.519097,252.718589 270.851364,221.929376 283.883024,195.553319 C296.914684,169.177262 301.174082,138.467884 276.572957,111.998908 C251.971833,85.5299319 208.075786,75.5717647 189.902858,94.5517024 C157.217476,111.91996 138.756756,141.364238 145.271408,178.297141 L145.271408,178.297141 Z",
                fill: "#DBDE66"
            }, 500, mina.easein);
            poly5.animate({
                d: "M217.40979,158.058464 C235.034607,156.516493 248.418505,168.715084 255.686236,185.187507 C262.953966,201.659929 260.40715,216.059694 248.053876,227.513751 C235.700603,238.967807 221.592686,240.288019 206.076219,231.18632 C190.559752,222.08462 183.329912,210.120355 186.25261,191.262162 C189.175309,172.403969 199.784974,159.600436 217.40979,158.058464 L217.40979,158.058464 Z",
                fill: "#B3AB12"
            }, 500, mina.easein);
            morph03 = false;
            morph04 = true;
        } else if (morph04) {
            //if cocoon for second time, morph back to caterpillar & start again - paste in caterpillar info
            poly1.animate({
                d: "M192.628097,260.168598 C194.607669,278.994129 168.189119,300.475039 158.766374,296.958931 C158.766374,296.958931 135.647728,299.681783 120.660839,283.008003 C117.040591,278.980267 115.169365,274.325071 114.413417,269.580581 C112.039936,254.684111 120.66084,238.907375 120.66084,238.907375 C120.66084,238.907375 138.743325,218.324972 158.766373,222.579004 C178.789424,226.833036 190.648524,241.343068 192.628097,260.168598 Z",
                fill: "#9ED06E"
            }, 500, mina.easein);
            poly2.animate({
                d: "M177.037824,234.969493 C174.88478,255.444718 195.856673,269.696961 195.856673,269.696961 C195.856673,269.696961 235.052043,283.411876 251.352244,265.27696 C267.652444,247.142044 261.45962,230.89796 251.352244,216.530817 C241.244867,202.163675 227.171976,198.113314 207.715802,202.940723 C188.259628,207.768131 179.190868,214.494267 177.037824,234.969493 Z",
                fill: "#72994C"
            }, 500, mina.easein);
            poly3.animate({
                d: "M291.484239,292.222339 C268.812521,292.61715 253.260538,281.029879 246.191176,260.492094 C239.121814,239.954309 275.007964,206.314189 275.007964,206.314189 C275.007964,206.314189 299.789917,191.183904 316.815707,206.717347 C333.841496,222.250791 340.393839,238.606101 333.855823,260.00391 C327.317808,281.40172 314.155956,291.827527 291.484239,292.222339 L291.484239,292.222339 Z",
                fill: "#9ECF6E"
            }, 500, mina.easein);
            poly4.animate({
                d: "M85.1725267,298.749497 C86.4510504,313.356228 94.9539422,322.574408 108.639499,325.732484 C122.325056,328.890561 135.560318,313.367565 141.533202,303.538595 C147.506085,293.709624 133.307784,277.95377 133.307784,277.95377 C133.307784,277.95377 116.346913,263.672005 103.028028,269.322882 C89.7091422,274.973759 83.894003,284.142766 85.1725267,298.749497 Z",
                fill: "#8AB55F"
            }, 500, mina.easein);
            poly5.animate({
                d: "M309.445156,113 C333.652273,113 350.440308,131.227716 358.38214,154.55274 C366.323972,177.877764 361.135399,197.206293 342.931561,211.348995 C324.727723,225.491697 305.340707,225.608852 285.276602,211.348995 C265.212497,197.089138 256.784712,179.914954 263.017293,154.55274 C269.249874,129.190526 285.238039,113 309.445156,113 Z",
                fill: "#CEE382"
            }, 500, mina.easein);
            morph04 = false;
            morph01 = true;
        }
    });
})()

编译

CSS

HTML

<div><a href="https://medium.com/@natacoops/svg-metamorphosis-a9d6ca14fce2" target="_blank">Click Here for Blog Post/Tutorial</a>
</div>

SVG Morphing Butterfly using Snap.svg & Sketch 首先是一个蚕蛹的图形，鼠标点击后变成一个蝴蝶形状。包含相关教程的链接。

svg, morph

编辑器支持Emmet

快捷键

SVG Morphing Butterfly using Snap.svg & Sketch 首先是一个蚕蛹的图形，鼠标点击后变成一个蝴蝶形状。包含相关教程的链接。

svg, morph

使用Snap.svg.js实现的背包动画

使用Snap.svg.js实现的螺旋圆点动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：