使用RaphaelJS和GSAP动画SVG路径使用RaphaelJS和GSAP

Question

我可以用Raphael逐步绘制基本路径，但我在试图合并GSAP的TweenLite/Max时遇到了问题。我在GSAP网站上发布了this，但没有收到任何回复，所以我想将它添加到此处以获得更好的机会，以及将其添加到其他人可能会发现此功能的地方。我已经将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(); 
     } 
    }); 
}); 

Answer 1

非常感谢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(); 
     } 
    }); 
});