1. 首頁
  2. 問答
  3. 任何路徑從動畫設計到HTML5的動畫？

任何路徑從動畫設計到HTML5的動畫？

2013-04-27 76 views
4

我已經在inkscape中創建了幾個設計思路，我可以將它們導出到svg併爲它們製作一些簡單動畫的動畫，我想要伴隨我創建的基於文本的遊戲。在我看來，沒有任何好的方法來動畫.svg文件？我看着raphealjs，但它似乎無法處理svg文件而沒有簡單的插件，只加載黑色的形狀。任何路徑從動畫設計到HTML5的動畫？

我發現這個https://github.com/karlisson/ink2canvas這是一個插件來獲取HTML5畫布與所有的對象繪製出來。輸出看起來像這樣

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Inkscape Output</title> 
</head> 
<body> 
    <canvas id='canvas' width='744' height='1052'></canvas> 
    <script> 
    var ctx = document.getElementById("canvas").getContext("2d"); 

// #layer6 

// #left_arm 
    ctx.lineJoin = 'miter'; 
    ctx.strokeStyle = 'rgb(0, 0, 0)'; 
    ctx.lineCap = 'butt'; 
    ctx.miterLimit = 4; 
    ctx.lineWidth = 12.051516; 
    ctx.fillStyle = 'rgb(226, 205, 178)'; 
    ctx.beginPath(); 
    ctx.moveTo(169.049330, 474.312810); 
    ctx.bezierCurveTo(169.049330, 474.312810, 123.876460, 497.974790, 72.250311, 549.600940); 
    ctx.bezierCurveTo(20.624171, 601.227070, 50.739424, 622.737970, 50.739424, 622.737970); 
    ctx.bezierCurveTo(50.739424, 622.737970, 74.401403, 637.795590, 100.214470, 622.737970); 
    ctx.bezierCurveTo(126.027540, 607.680340, 117.423180, 584.018370, 117.423180, 584.018370); 
    ctx.bezierCurveTo(117.423180, 584.018370, 115.272090, 573.262920, 123.876460, 566.809650); 
    ctx.bezierCurveTo(132.480810, 560.356380, 160.444970, 543.147670, 160.444970, 543.147670); 
    ctx.bezierCurveTo(160.444970, 543.147670, 209.920030, 523.787870, 201.315670, 500.125880); 
    ctx.bezierCurveTo(192.711310, 476.463900, 169.049330, 474.312810, 169.049330, 474.312810); 
    ctx.closePath(); 
    ctx.fill(); 
    ctx.stroke(); 

// #layer10 

// #sword 

// #sword_handle 
    ctx.lineJoin = 'miter'; 
    ctx.strokeStyle = 'rgb(0, 0, 0)'; 
    ctx.lineCap = 'butt'; 
    ctx.miterLimit = 4; 
    ctx.lineWidth = 8.034344; 
    ctx.fillStyle = 'rgb(189, 197, 198)'; 
    ctx.beginPath(); 
    ctx.moveTo(460.209840, 512.697960); 
    ctx.lineTo(546.445130, 596.255150); 
    ctx.lineTo(561.978190, 598.933250); 
    ctx.lineTo(559.835700, 625.714410); 
    ctx.lineTo(534.125800, 626.785660); 
    ctx.lineTo(532.518930, 606.431980); 
    ctx.lineTo(499.310320, 574.294610); 
    ctx.lineTo(437.713670, 622.500670); 
    ctx.lineTo(431.286200, 641.783090); 
    ctx.lineTo(405.576300, 641.783090); 
    ctx.lineTo(405.576300, 619.286940); 
    ctx.lineTo(424.858720, 609.645720); 
    ctx.lineTo(485.919740, 559.832780); 
    ctx.lineTo(448.426130, 523.410430); 
    ctx.lineTo(431.821820, 520.196690); 
    ctx.lineTo(433.964310, 498.771770); 
    ctx.lineTo(457.531730, 496.093660); 
    ctx.closePath(); 
    ctx.fill(); 
    ctx.stroke(); 

// #sword_blade 
    ctx.lineJoin = 'miter'; 
    ctx.strokeStyle = 'rgb(0, 0, 0)'; 
    ctx.lineCap = 'butt'; 
    ctx.miterLimit = 4; 
    ctx.lineWidth = 12.051516; 
    ctx.fillStyle = 'rgb(221, 221, 221)'; 
    ctx.beginPath(); 
    ctx.moveTo(491.275970, 542.157230); 
    ctx.lineTo(633.751670, 379.327860); 
    ctx.lineTo(724.807540, 338.620520); 
    ctx.lineTo(691.063300, 431.818900); 
    ctx.lineTo(521.806470, 570.009620); 
    ctx.closePath(); 
    ctx.fill(); 
    ctx.stroke(); 

// #sword_detail 
    ctx.lineJoin = 'miter'; 
    ctx.strokeStyle = 'rgb(0, 0, 0)'; 
    ctx.lineCap = 'butt'; 
    ctx.miterLimit = 4; 
    ctx.lineWidth = 4.017172; 
    ctx.beginPath(); 
    ctx.moveTo(631.609170, 431.818900); 
    ctx.lineTo(520.199610, 541.085990); 
    ctx.closePath(); 
    ctx.stroke(); 

// #g5700 

// #right_arm 
    ctx.lineJoin = 'miter'; 
    ctx.strokeStyle = 'rgb(0, 0, 0)'; 
    ctx.lineCap = 'butt'; 
    ctx.miterLimit = 4; 
    ctx.lineWidth = 12.051516; 
    ctx.fillStyle = 'rgb(226, 205, 178)'; 
    ctx.beginPath(); 
    ctx.moveTo(367.878830, 471.124850); 
    ctx.bezierCurveTo(367.878830, 471.124850, 413.051700, 494.786840, 464.677840, 546.412980); 
    ctx.bezierCurveTo(516.303990, 598.039120, 486.188740, 619.550010, 486.188740, 619.550010); 
    ctx.bezierCurveTo(486.188740, 619.550010, 462.526760, 634.607640, 436.713690, 619.550010); 
    ctx.bezierCurveTo(410.900620, 604.492390, 419.504970, 580.830410, 419.504970, 580.830410); 
    ctx.bezierCurveTo(419.504970, 580.830410, 421.656070, 570.074960, 413.051700, 563.621700); 
    ctx.bezierCurveTo(404.447340, 557.168420, 376.483190, 539.959710, 376.483190, 539.959710); 
    ctx.bezierCurveTo(376.483190, 539.959710, 327.008130, 520.599910, 335.612490, 496.937920); 
    ctx.bezierCurveTo(344.216840, 473.275950, 367.878830, 471.124850, 367.878830, 471.124850); 
    ctx.closePath(); 
    ctx.fill(); 
    ctx.stroke(); 

// #layer4 

// #body 
    ctx.lineJoin = 'miter'; 
    ctx.strokeStyle = 'rgb(0, 0, 0)'; 
    ctx.lineCap = 'butt'; 
    ctx.miterLimit = 4; 
    ctx.lineWidth = 14.461820; 
    ctx.fillStyle = 'rgb(136, 8, 6)'; 
    ctx.beginPath(); 
    ctx.moveTo(214.358910, 461.584230); 
    ctx.lineTo(140.227660, 476.352560); 
    ctx.lineTo(174.646290, 679.888840); 
    ctx.bezierCurveTo(174.646290, 679.888840, 319.264480, 686.775420, 351.401860, 679.888840); 
    ctx.bezierCurveTo(383.539240, 673.002260, 381.243720, 668.411210, 381.243720, 668.411210); 
    ctx.lineTo(346.810810, 475.586950); 
    ctx.closePath(); 
    ctx.fill(); 
    ctx.stroke(); 

// #layer7 

// #path5705 
    ctx.lineJoin = 'miter'; 
    ctx.strokeStyle = 'rgb(0, 0, 0)'; 
    ctx.lineCap = 'butt'; 
    ctx.miterLimit = 4; 
    ctx.lineWidth = 14.461820; 
    ctx.fillStyle = 'rgb(0, 47, 102)'; 
    ctx.beginPath(); 
    ctx.moveTo(179.804770, 682.968460); 
    ctx.bezierCurveTo(145.387350, 846.451280, 129.267080, 840.230130, 129.267080, 840.230130); 
    ctx.lineTo(245.425900, 861.741040); 
    ctx.lineTo(270.150520, 741.228420); 
    ctx.lineTo(344.376000, 861.741040); 
    ctx.lineTo(415.465120, 848.860290); 
    ctx.lineTo(377.730780, 671.150370); 
    ctx.closePath(); 
    ctx.fill(); 
    ctx.stroke(); 

// #layer8 

// #left_boot 

// #path5708 
    ctx.lineJoin = 'miter'; 
    ctx.strokeStyle = 'rgb(0, 0, 0)'; 
    ctx.lineCap = 'butt'; 
    ctx.miterLimit = 4; 
    ctx.lineWidth = 9.641212; 
    ctx.fillStyle = 'rgb(63, 27, 15)'; 
    ctx.beginPath(); 
    ctx.moveTo(115.907270, 790.712140); 
    ctx.lineTo(189.044310, 827.280700); 
    ctx.lineTo(287.994420, 816.525200); 
    ctx.lineTo(249.274800, 857.395910); 
    ctx.lineTo(236.368270, 921.928520); 
    ctx.bezierCurveTo(236.368270, 921.928520, 208.404110, 932.684050, 178.288860, 919.777490); 
    ctx.bezierCurveTo(148.173610, 906.871020, 115.907270, 913.324300, 115.907270, 913.324300); 
    ctx.lineTo(130.964900, 835.884990); 
    ctx.closePath(); 
    ctx.fill(); 
    ctx.stroke(); 

// #path5710 
    ctx.lineJoin = 'miter'; 
    ctx.strokeStyle = 'rgb(0, 0, 0)'; 
    ctx.lineCap = 'butt'; 
    ctx.miterLimit = 4; 
    ctx.lineWidth = 8.034344; 
    ctx.fillStyle = 'rgb(47, 17, 7)'; 
    ctx.beginPath(); 
    ctx.moveTo(234.217180, 917.626460); 
    ctx.bezierCurveTo(234.217180, 917.626460, 242.821540, 891.813350, 191.195400, 874.604670); 
    ctx.bezierCurveTo(139.569250, 857.395910, 113.756180, 915.475330, 113.756180, 915.475330); 
    ctx.bezierCurveTo(113.756180, 915.475330, 126.662730, 936.986210, 173.986680, 936.986210); 
    ctx.bezierCurveTo(221.310650, 936.986210, 223.461740, 926.230770, 234.217180, 917.626460); 
    ctx.closePath(); 
    ctx.fill(); 
    ctx.stroke(); 

// #right_group 

// #path5708-5 
    ctx.lineJoin = 'miter'; 
    ctx.strokeStyle = 'rgb(0, 0, 0)'; 
    ctx.lineCap = 'butt'; 
    ctx.miterLimit = 4; 
    ctx.lineWidth = 8.828593; 
    ctx.fillStyle = 'rgb(63, 27, 15)'; 
    ctx.beginPath(); 
    ctx.moveTo(297.898670, 803.891100); 
    ctx.lineTo(366.129690, 811.970370); 
    ctx.lineTo(440.429470, 766.631520); 
    ctx.lineTo(422.319920, 818.623840); 
    ctx.lineTo(431.508460, 883.515780); 
    ctx.bezierCurveTo(431.508460, 883.515780, 412.818260, 903.537450, 385.366440, 902.220320); 
    ctx.bezierCurveTo(357.914630, 900.903280, 334.567490, 918.439940, 334.567490, 918.439940); 
    ctx.lineTo(323.204190, 840.722950); 
    ctx.closePath(); 
    ctx.fill(); 
    ctx.stroke(); 

// #path5710-7 
    ctx.lineJoin = 'miter'; 
    ctx.strokeStyle = 'rgb(0, 0, 0)'; 
    ctx.lineCap = 'butt'; 
    ctx.miterLimit = 4; 
    ctx.lineWidth = 11.703228; 
    ctx.fillStyle = 'rgb(47, 17, 7)'; 
    ctx.beginPath(); 
    ctx.moveTo(515.092570, 881.035350); 
    ctx.bezierCurveTo(515.092570, 881.035350, 468.008310, 856.551410, 424.189650, 846.672550); 
    ctx.bezierCurveTo(337.326750, 827.089400, 333.932730, 919.065630, 333.932730, 919.065630); 
    ctx.bezierCurveTo(333.932730, 919.065630, 373.749010, 924.295430, 425.686820, 923.723430); 
    ctx.bezierCurveTo(474.390020, 923.187180, 520.877320, 922.241510, 515.092570, 881.035350); 
    ctx.closePath(); 
    ctx.fill(); 
    ctx.stroke(); 

// #layer3 

// #head 
    ctx.lineJoin = 'miter'; 
    ctx.strokeStyle = 'rgb(0, 0, 0)'; 
    ctx.lineCap = 'butt'; 
    ctx.miterLimit = 4; 
    ctx.lineWidth = 16.068687; 
    ctx.fillStyle = 'rgb(226, 205, 178)'; 
    ctx.beginPath(); 
    ctx.moveTo(122.996940, 449.647500); 
    ctx.bezierCurveTo(288.274870, 550.650680, 322.707770, 527.236300, 322.707770, 527.236300); 
    ctx.lineTo(384.687000, 465.716190); 
    ctx.lineTo(393.869110, 362.417480); 
    ctx.bezierCurveTo(393.869110, 362.417480, 345.663040, 259.118770, 242.364330, 277.482980); 
    ctx.bezierCurveTo(139.065620, 295.847190, 122.996930, 350.939840, 120.701410, 380.781690); 
    ctx.bezierCurveTo(118.405880, 410.623550, 122.996930, 449.647500, 122.996930, 449.647500); 
    ctx.closePath(); 
    ctx.fill(); 
    ctx.stroke(); 

// #layer9 

// #path5738 
    ctx.save(); 
    ctx.lineJoin = 'miter'; 
    ctx.strokeStyle = 'rgb(0, 0, 0)'; 
    ctx.miterLimit = 4; 
    ctx.lineWidth = 0.000000; 
    ctx.fillStyle = 'rgb(0, 0, 0)'; 
    ctx.beginPath(); 
    ctx.transform(0.803434, 0.000000, 0.000000, 1.321761, -190.572030, -237.911570); 
    ctx.moveTo(605.439820, 491.453670); 
    ctx.translate(593.036930, 491.453670); 
    ctx.rotate(0.000000); 
    ctx.scale(0.842272, 1.000000); 
    ctx.arc(0.000000, 0.000000, 14.725523, 0.000000, 3.14159265, 0); 
    ctx.scale(1.187265, 1.000000); 
    ctx.rotate(-0.000000); 
    ctx.translate(-593.036930, -491.453670); 
    ctx.translate(593.036930, 491.453670); 
    ctx.rotate(0.000000); 
    ctx.scale(0.842272, 1.000000); 
    ctx.arc(0.000000, 0.000000, 14.725523, 3.141593, 6.28318531, 0); 
    ctx.scale(1.187265, 1.000000); 
    ctx.rotate(-0.000000); 
    ctx.translate(-593.036930, -491.453670); 
    ctx.closePath(); 
    ctx.fill(); 
    ctx.stroke(); 
    ctx.restore(); 

// #path5738-6 
    ctx.save(); 
    ctx.lineJoin = 'miter'; 
    ctx.strokeStyle = 'rgb(0, 0, 0)'; 
    ctx.miterLimit = 4; 
    ctx.lineWidth = 0.000000; 
    ctx.fillStyle = 'rgb(0, 0, 0)'; 
    ctx.beginPath(); 
    ctx.transform(0.803434, 0.000000, 0.000000, 1.321761, -129.540700, -235.976480); 
    ctx.moveTo(605.439820, 491.453670); 
    ctx.translate(593.036930, 491.453670); 
    ctx.rotate(0.000000); 
    ctx.scale(0.842272, 1.000000); 
    ctx.arc(0.000000, 0.000000, 14.725523, 0.000000, 3.14159265, 0); 
    ctx.scale(1.187265, 1.000000); 
    ctx.rotate(-0.000000); 
    ctx.translate(-593.036930, -491.453670); 
    ctx.translate(593.036930, 491.453670); 
    ctx.rotate(0.000000); 
    ctx.scale(0.842272, 1.000000); 
    ctx.arc(0.000000, 0.000000, 14.725523, 3.141593, 6.28318531, 0); 
    ctx.scale(1.187265, 1.000000); 
    ctx.rotate(-0.000000); 
    ctx.translate(-593.036930, -491.453670); 
    ctx.closePath(); 
    ctx.fill(); 
    ctx.stroke(); 
    ctx.restore(); 

// #path5796 
    ctx.lineJoin = 'miter'; 
    ctx.strokeStyle = 'rgb(0, 0, 0)'; 
    ctx.miterLimit = 4; 
    ctx.lineWidth = 0.000000; 
    ctx.fillStyle = 'rgb(0, 0, 0)'; 
    ctx.beginPath(); 
    ctx.moveTo(324.482710, 489.017810); 
    ctx.bezierCurveTo(316.343430, 488.389010, 307.975650, 488.551210, 300.034780, 486.372620); 
    ctx.bezierCurveTo(297.411000, 485.652790, 294.897450, 484.578900, 292.328780, 483.682040); 
    ctx.bezierCurveTo(285.908390, 481.389630, 289.150330, 472.309830, 295.570720, 474.602230); 
    ctx.lineTo(295.570720, 474.602230); 
    ctx.bezierCurveTo(297.661320, 475.368950, 299.699560, 476.297230, 301.842520, 476.902410); 
    ctx.bezierCurveTo(309.441050, 479.048230, 317.489800, 478.760700, 325.283370, 479.409900); 
    ctx.bezierCurveTo(332.077190, 479.976050, 331.276520, 489.583950, 324.482710, 489.017810); 
    ctx.closePath(); 
    ctx.fill(); 
    ctx.stroke(); 

// #layer2 

// #hair 
    ctx.lineJoin = 'miter'; 
    ctx.strokeStyle = 'rgb(0, 0, 0)'; 
    ctx.lineCap = 'butt'; 
    ctx.miterLimit = 4; 
    ctx.lineWidth = 12.372890; 
    ctx.fillStyle = 'rgb(240, 255, 95)'; 
    ctx.beginPath(); 
    ctx.moveTo(74.790868, 442.760910); 
    ctx.lineTo(83.972981, 291.256140); 
    ctx.lineTo(233.182230, 167.297690); 
    ctx.lineTo(308.934620, 132.864790); 
    ctx.lineTo(260.728550, 199.435070); 
    ctx.lineTo(400.755690, 165.002160); 
    ctx.lineTo(315.821190, 249.936660); 
    ctx.lineTo(391.573580, 217.799290); 
    ctx.lineTo(469.621500, 247.641120); 
    ctx.lineTo(494.872300, 256.823240); 
    ctx.lineTo(384.687000, 291.256140); 
    ctx.lineTo(474.212550, 337.166680); 
    ctx.lineTo(487.985710, 364.713000); 
    ctx.lineTo(416.824370, 341.757730); 
    ctx.lineTo(389.278060, 357.826420); 
    ctx.lineTo(246.266730, 350.021640); 
    ctx.lineTo(194.617380, 395.702610); 
    ctx.lineTo(188.878560, 436.792550); 
    ctx.lineTo(149.395500, 466.634390); 
    ctx.closePath(); 
    ctx.fill(); 
    ctx.stroke(); 

    </script> 
</body> 
</html>

所以，現在我正在尋找一種方法來動畫。有什麼辦法可以將這個輸出轉換成raphaeljs對象或類似的東西，我一直在尋找解決方案，並一直無法找到合理的解決方案。我不反對回到svg文件並採用完全不同的路線。

來源

2013-04-27 Eric Wooley

回答

3

實際上，您可以直接在網頁上嵌入SVG。另外，我不知道Inkscape是否支持它，但是SVG本身支持使用SMIL的動畫。這些可以很容易地合併：

<h1>SVG Animation in HTML</h1> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100" height="50"> 
    <rect x="0" y="0" width="10" height="30"> 
     <animate attributeName="width" attributeType="XML" begin="0s" dur="1s" from="10" to="80" repeatDur="indefinite"></animate> 
     <animate attributeName="fill" attributeType="XML" begin="0s" dur="1s" from="red" to="yellow" repeatDur="indefinite"></animate> 
    </rect> 
</svg>

Try it.

來源

2013-04-27 05:56:02 icktoofay

+0

謝謝，這很可能要走的路。謝謝，或者使用嵌入標籤。不過，我認爲將svg寫入頁面可能是最佳途徑。然後我可以從數據庫加載不同的對象:) – 2013-04-27 07:05:41

相關問題

 相關問題