使用RaphaelJS和GSAP动画SVG路径

时间：2013-11-25 22:37:45

标签： javascript svg raphael greensock

我可以逐步使用Raphael绘制基本路径，但我在尝试合并GSAP的TweenLite / Max时遇到问题。我在this网站上发布了GSAP但未收到任何回复，所以我认为我会在这里添加回复以获得更好的机会，以及它可能会在其他人身上找到这些回复。我已经在GSAP帖子中使用了大多数示例作为参考，所以我不会继续讨论我想要完成的事情等等。这里的jsfiddle应该非常简单。我希望我只是遗漏了一些完全愚蠢的东西......在过去的5天里，我一直在寻找很多不同的js canvas / svg绘图库，我的脑袋在转动，所以也许我只是陷入了另一个框架。 ：P有关我在这里做什么的想法吗？

JSFIDDLE LINK

HTML：

<div id="canvas"></div>
<div id="controls">
    <button id="native" type="button">Native</button>
    <button id="gsap" type="button">GSAP</button>
</div>

CSS：

#canvas {
    float: left;
}
#controls {
    float: left;
}
button {
    width: 100px;
    height: 30px;
}

JS：

var paper = new Raphael('canvas', 600, 600),
pathString = 'M 206.53939,490.41562 C 202.40433,496.12926 196.55503,503.89998 188.47724,507.72796 C 182.4113,509.44219 176.00252,509.44219 170.27943,507.72796 C 163.58247,503.34049 158.77116,498.7816 155.33124,491.47993 C 145.50143,484.36656 135.32876,477.42462 127.38461,468.08275 C 139.97609,474.03193 152.39614,485.80949 162.58769,487.98735 C 177.75253,488.6636 191.7174,488.48273 206.88224,485.90194 C 219.23818,478.003 224.22292,471.30402 231.77901,461.348 C 230.15521,447.82988 240.70247,441.85437 235.99305,442.90723 C 227.70605,451.04713 216.67627,452.33009 206.67504,453.78448 C 184.22542,456.11286 162.97575,457.92698 138.12621,455.96978 C 125.38421,459.40568 121.89906,457.52747 122.18524,447.93519 C 122.18524,441.43597 121.32812,431.85114 121.32812,425.35192 C 123.92781,429.25145 125.32753,438.29368 129.9843,440.13613 C 147.61317,441.63372 166.78485,440.73139 183.21376,439.82906 C 199.46923,438.82685 213.83905,438.85317 222.55189,436.13672 C 230.62969,434.34893 236.99326,430.16123 237.87127,426.48778 C 237.43799,420.85513 238.3761,414.19393 237.94282,408.56128 C 233.80776,415.79884 228.81558,418.92224 219.02355,419.98856 C 200.60911,421.93832 182.70893,423.54524 163.6088,423.78077 C 150.87222,424.37603 135.05003,427.19979 126.94189,422.65235 C 121.01308,426.21656 120.12812,418.82458 120.8854,413.48935 C 127.99475,403.507 114.87614,406.03856 118.3856,385.59939 C 120.552,389.71556 120.14705,400.51724 126.08477,403.0906 C 140.46403,405.3191 154.15761,404.80483 168.0226,404.80483 C 186.87032,405.02147 205.20378,405.06669 224.22292,403.74052 C 232.02942,403.28835 237.77883,400.0934 237.87127,397.24131 C 238.53808,391.39202 230.97655,386.39984 232.6719,379.69343 C 224.06837,386.4525 211.86497,387.55458 200.17582,388.14241 C 185.48949,389.17095 171.14599,389.34237 156.63108,388.14241 C 141.41359,387.94265 123.11048,386.02866 120.23548,380.34335 C 112.63618,372.5254 107.60823,362.99321 104.63736,351.7468 C 102.79692,340.87901 106.09918,331.55401 103.40162,321.20049 C 93.200631,299.54588 81.456827,279.60552 69.541601,258.80803 C 50.51903,224.05512 45.210335,192.2164 47.44427,153.52075 C 62.098848,108.2678 74.182075,84.957039 117.63579,59.932049 C 147.4944,44.673356 171.3532,44.328502 196.92622,47.58354 C 230.59935,52.118115 249.53007,66.252402 264.51805,80.729537 C 288.01853,102.63856 301.06217,128.83317 304.16326,154.17067 C 310.5417,177.42275 307.32043,198.61774 302.2135,219.81274 C 286.39874,251.44225 270.58399,283.07177 254.76923,314.70128 C 249.26279,324.27526 254.72743,353.04865 237.22135,378.39358 C 226.43454,383.7266 209.81934,388.88819 205.37519,383.59296 C 207.32496,378.61023 209.27472,373.62749 211.22449,368.64476 C 189.99372,369.29468 168.76295,369.94461 147.53218,370.59453 C 155.27457,370.23279 155.47432,370.04248 155.33124,365.39515 C 156.1978,349.36375 156.5501,336.93225 157.41666,320.90085 C 161.34251,313.78949 162.35417,310.10661 163.02298,305.90945 C 162.41627,300.09593 155.46689,298.73942 152.46025,287.61177 C 152.36238,280.15756 153.29304,279.38888 160.22354,276.73453 C 164.72777,278.91782 170.94624,279.38687 172.87912,275.05607 C 171.79592,255.34178 170.71271,235.6275 169.62951,215.91321 C 167.46311,200.09845 165.2967,184.2837 163.1303,168.46894 C 172.66248,168.68558 182.19466,168.90222 191.72684,169.11886 C 190.427,203.5647 187.07007,240.92474 185.77023,275.37058 C 189.80541,280.45119 193.8406,277.30346 199.24717,276.55567 C 204.10168,278.26247 205.3563,287.51189 203.35388,290.7615 C 202.80183,297.3417 196.24997,299.4649 194.32653,306.90222 C 206.39973,320.26439 200.98772,347.85472 203.80405,366.70244 M 161.70443,272.07413 C 148.01517,240.84549 134.3259,209.61686 120.63664,178.38822 C 132.07442,172.84968 139.59482,171.3636 151.84309,171.76866 C 154.45213,166.83049 154.49461,164.32378 159.12987,163.57314 C 166.79222,164.85848 169.99687,171.95235 178.87496,171.88687 C 188.87701,171.33578 192.80037,164.43584 199.83061,162.93918 C 205.16655,164.89993 203.47823,169.6974 206.78794,171.2529 C 217.88326,175.83905 227.76285,172.72552 236.29162,178.12216 C 223.73443,209.51513 211.17725,240.90809 198.62006,272.30106',
testLineDrawNative = function() {
    var triangle = paper.path(pathString).attr({
      stroke: '#000000'
    }),
    length = triangle.getTotalLength();
    $('path[fill*="none"]').animate({
      to: 1
    }, {
      duration: 5000,
      step: function(pos, fx) {
        var offset, subpath;
        offset = length*fx.pos;
        subpath = triangle.getSubpath(0, offset);
        paper.clear();
        paper.path(subpath).attr({
          stroke: '#000000'
        });
      }
    });
},
testLineDrawGSAP = function() {
    var triangle = paper.path(pathString).attr({
      stroke: '#000000'
    }),
    obj = {
      length: 0,
      pathLength: triangle.getTotalLength()
    },
    drawLine = function() {
      triangle.attr({
        strokeDashArray: [obj.length, obj.pathLength].join(' ')
      });
    };
    tween = TweenMax.to(triangle, 5, {
      raphael: {
        length: obj.pathLength,
        onUpdate: drawLine,
        ease: Linear.easeNone
      }
    });
};

$(function() {
    $('button').click(function() {
        paper.clear();
        if($(this).prop('id') === 'native') {
            testLineDrawNative();
        } else {
            testLineDrawGSAP();
        }
    });
});

1 个答案:

答案 0 :(得分：2)

非常感谢Carl。

新JSFiddle

新JS 

var paper = new Raphael('canvas', 600, 600),
pathString = 'M 206.53939,490.41562 C 202.40433,496.12926 196.55503,503.89998 188.47724,507.72796 C 182.4113,509.44219 176.00252,509.44219 170.27943,507.72796 C 163.58247,503.34049 158.77116,498.7816 155.33124,491.47993 C 145.50143,484.36656 135.32876,477.42462 127.38461,468.08275 C 139.97609,474.03193 152.39614,485.80949 162.58769,487.98735 C 177.75253,488.6636 191.7174,488.48273 206.88224,485.90194 C 219.23818,478.003 224.22292,471.30402 231.77901,461.348 C 230.15521,447.82988 240.70247,441.85437 235.99305,442.90723 C 227.70605,451.04713 216.67627,452.33009 206.67504,453.78448 C 184.22542,456.11286 162.97575,457.92698 138.12621,455.96978 C 125.38421,459.40568 121.89906,457.52747 122.18524,447.93519 C 122.18524,441.43597 121.32812,431.85114 121.32812,425.35192 C 123.92781,429.25145 125.32753,438.29368 129.9843,440.13613 C 147.61317,441.63372 166.78485,440.73139 183.21376,439.82906 C 199.46923,438.82685 213.83905,438.85317 222.55189,436.13672 C 230.62969,434.34893 236.99326,430.16123 237.87127,426.48778 C 237.43799,420.85513 238.3761,414.19393 237.94282,408.56128 C 233.80776,415.79884 228.81558,418.92224 219.02355,419.98856 C 200.60911,421.93832 182.70893,423.54524 163.6088,423.78077 C 150.87222,424.37603 135.05003,427.19979 126.94189,422.65235 C 121.01308,426.21656 120.12812,418.82458 120.8854,413.48935 C 127.99475,403.507 114.87614,406.03856 118.3856,385.59939 C 120.552,389.71556 120.14705,400.51724 126.08477,403.0906 C 140.46403,405.3191 154.15761,404.80483 168.0226,404.80483 C 186.87032,405.02147 205.20378,405.06669 224.22292,403.74052 C 232.02942,403.28835 237.77883,400.0934 237.87127,397.24131 C 238.53808,391.39202 230.97655,386.39984 232.6719,379.69343 C 224.06837,386.4525 211.86497,387.55458 200.17582,388.14241 C 185.48949,389.17095 171.14599,389.34237 156.63108,388.14241 C 141.41359,387.94265 123.11048,386.02866 120.23548,380.34335 C 112.63618,372.5254 107.60823,362.99321 104.63736,351.7468 C 102.79692,340.87901 106.09918,331.55401 103.40162,321.20049 C 93.200631,299.54588 81.456827,279.60552 69.541601,258.80803 C 50.51903,224.05512 45.210335,192.2164 47.44427,153.52075 C 62.098848,108.2678 74.182075,84.957039 117.63579,59.932049 C 147.4944,44.673356 171.3532,44.328502 196.92622,47.58354 C 230.59935,52.118115 249.53007,66.252402 264.51805,80.729537 C 288.01853,102.63856 301.06217,128.83317 304.16326,154.17067 C 310.5417,177.42275 307.32043,198.61774 302.2135,219.81274 C 286.39874,251.44225 270.58399,283.07177 254.76923,314.70128 C 249.26279,324.27526 254.72743,353.04865 237.22135,378.39358 C 226.43454,383.7266 209.81934,388.88819 205.37519,383.59296 C 207.32496,378.61023 209.27472,373.62749 211.22449,368.64476 C 189.99372,369.29468 168.76295,369.94461 147.53218,370.59453 C 155.27457,370.23279 155.47432,370.04248 155.33124,365.39515 C 156.1978,349.36375 156.5501,336.93225 157.41666,320.90085 C 161.34251,313.78949 162.35417,310.10661 163.02298,305.90945 C 162.41627,300.09593 155.46689,298.73942 152.46025,287.61177 C 152.36238,280.15756 153.29304,279.38888 160.22354,276.73453 C 164.72777,278.91782 170.94624,279.38687 172.87912,275.05607 C 171.79592,255.34178 170.71271,235.6275 169.62951,215.91321 C 167.46311,200.09845 165.2967,184.2837 163.1303,168.46894 C 172.66248,168.68558 182.19466,168.90222 191.72684,169.11886 C 190.427,203.5647 187.07007,240.92474 185.77023,275.37058 C 189.80541,280.45119 193.8406,277.30346 199.24717,276.55567 C 204.10168,278.26247 205.3563,287.51189 203.35388,290.7615 C 202.80183,297.3417 196.24997,299.4649 194.32653,306.90222 C 206.39973,320.26439 200.98772,347.85472 203.80405,366.70244 M 161.70443,272.07413 C 148.01517,240.84549 134.3259,209.61686 120.63664,178.38822 C 132.07442,172.84968 139.59482,171.3636 151.84309,171.76866 C 154.45213,166.83049 154.49461,164.32378 159.12987,163.57314 C 166.79222,164.85848 169.99687,171.95235 178.87496,171.88687 C 188.87701,171.33578 192.80037,164.43584 199.83061,162.93918 C 205.16655,164.89993 203.47823,169.6974 206.78794,171.2529 C 217.88326,175.83905 227.76285,172.72552 236.29162,178.12216 C 223.73443,209.51513 211.17725,240.90809 198.62006,272.30106',
testLineDrawNative = function() {
    var triangle = paper.path(pathString).attr({
      stroke: '#000000'
    }),
    length = triangle.getTotalLength();
    $('path[fill*="none"]').animate({
      to: 1
    }, {
      duration: 5000,
      step: function(pos, fx) {
          console.log(fx.pos);
        var offset, subpath;
        offset = length*fx.pos;
        subpath = triangle.getSubpath(0, offset);
        paper.clear();
        paper.path(subpath).attr({
          stroke: '#000000'
        });
      }
    });
    console.log($('path[fill*="none"]'));
},
testLineDrawGSAP = function() {
    var triangle = paper.path(pathString).attr({
      stroke: '#000000'
    }),
    obj = {
      length: 0,
      pathLength: triangle.getTotalLength()

    },

    drawLine = function() {

      var offset, subpath;
        offset = obj.pathLength * tween.progress();

        subpath = triangle.getSubpath(0, offset);
        paper.clear();
        paper.path(subpath).attr({
          stroke: '#000000'
        });
    };

    tween = TweenMax.to(triangle, 5, {

        length: obj.pathLength,
        onUpdate: drawLine,
        ease: Linear.easeNone,
        onUpdateScope:this

    });
};

$(function() {
    $('button').click(function() {
        paper.clear();
        if($(this).prop('id') === 'native') {
            testLineDrawNative();
        } else {
            testLineDrawGSAP();
        }
    });
});
相关问题
最新问题