1. 超级强大的SVG SMIL animation动画详解; 深度掌握SVG路径path的贝塞尔曲线指令
2.拿来就能用的 svg动画
codePen里的一个demo拿来就能用;
在这里先画自己想要的svg图形;
然后把代码拿过来,换一下参数
用到的核心还是 strokeDasharray 和 strokeDashoffset 这种动画可能只限于线条?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewprot" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>dddd</title>
<style type="text/css">
svg {
border: 1px solid black;
margin: 100px;
}
</style>
</head>
<body>
<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<g>
<title>background</title>
<rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
</g>
</g>
<g>
<title>Layer 1</title>
<path id="firstPath" d="m90.5,99.5c2,0 5.186005,1.692551 7,3c3.441811,2.480713 5.418861,3.256584 7,8c0.316231,0.948685 1,2 1,4c0,1 0,2 0,3c0,2 0,6 0,11c0,1 0,2 0,4c0,2 0,6 0,8c0,1 0,2 0,5c0,1 0,2 0,3c0,2 1,4 2,5c1,1 2.186005,0.692551 4,2c1.14727,0.826904 1.907784,1.496231 6,2c0.992508,0.122177 2,0 3,0c1,0 3,0 5,0c2,0 5.036285,0.266937 6,0c5.61937,-1.556473 6.097885,-4.824432 8,-6c0.850647,-0.525726 2.486252,-0.823746 3,-3c0.229752,-0.973251 1.75563,-2.014984 2,-4c0.503769,-4.092209 2.486252,-6.823746 3,-9c0.459503,-1.946503 0,-5 0,-7c0,-1 0,-2 0,-4c0,-1 0,-3 0,-5c0,-3 0,-6 0,-11c0,-3 -0.28978,-5.042908 0,-6c1.04483,-3.450844 2.693436,-4.458801 4,-5c0.923874,-0.382683 2,-1 3,-1c2,0 3,0 4,0c1,0 3,0 6,0c1,0 3.186005,-0.307449 5,1c1.147263,0.826904 2,3 2,4c0,2 1,4 1,6c0,2 0,3 0,5c0,2 -0.496231,3.907784 -1,8c-0.122177,0.992508 0,3 0,6c0,2 0,4 0,7c0,3 -0.210144,7.07843 1,10c1.711411,4.131714 5.613831,7.296997 8,10c2.959671,3.352661 3,4 4,4c2,0 3,0 4,0c4,0 6.152237,-1.234634 8,-2c2.613129,-1.082397 4,-3 6,-5c1,-1 1,-2 1,-4c0,-3 0,-5 0,-7c0,-3 0,-5 0,-7c0,-4 0.869354,-7.128723 0,-10c-1.04483,-3.450844 -2,-5 -2,-8c0,-2 0,-4 0,-7c0,-2 -0.320358,-3.025826 0,-5c0.506546,-3.121445 1.493454,-3.878555 2,-7c0.160187,-0.987091 0.097885,-3.824432 2,-5c0.850647,-0.525734 3,0 4,0c2,0 4.041321,-0.152771 8,1c3.036163,0.884132 4.06601,1.877655 6,3c3.118484,1.809723 5.458801,4.693436 6,6c0.38269,0.923882 0.917603,1.386871 2,4c0.765366,1.847755 1,4 1,5c0,4 0,6 0,9c0,2 0,4 0,8c0,5 0,6 0,8c0,1 1.540497,2.053497 2,4c0.513748,2.176254 1.852737,5.173096 3,6c1.813995,1.307449 2.796997,4.2565 4,5c2.689987,1.662506 3.693436,3.458801 5,4c0.923874,0.38269 3,0 7,0c2,0 4.076111,0.38269 5,0c2.613129,-1.082397 5.613831,-2.296997 8,-5c1.479828,-1.676331 4.458801,-3.693436 5,-5c0.38269,-0.923874 0,-2 0,-3c0,-2 0,-4 0,-5c0,-1 0.640717,-2.051651 0,-6c-0.506531,-3.121445 -3.458801,-7.693436 -4,-9c-0.38269,-0.923882 -2,-5 -2,-6c0,-1 -2,-5 -2,-6c0,-2 0,-5 0,-6c0,-2 0,-3 0,-5c0,-1 0,-3 0,-4c0,-1 0.693451,-3.458801 2,-4c1.847748,-0.765366 6,-2 7,-2c1,0 4.345062,-1.081268 9,1c4.564545,2.040848 5.418854,5.418861 7,7c1.581146,1.581139 2,5 2,6c0,2 1,6 1,7c0,2 0,6 0,11c0,2 0,8 0,10c0,5 0,7 0,11c0,3 2.346191,6.70546 4,9c1.307465,1.813995 2,3 3,3c2,0 3.0979,-0.824432 5,-2c0.850647,-0.525726 4,-1 5,-2c1,-1 2.613831,-1.296997 5,-4c1.479828,-1.676331 1.968536,-6.412079 4,-10c0.696777,-1.230652 1.95517,-3.549149 3,-7c0.869354,-2.871277 0,-5 0,-9c0,-2 0,-6 0,-8c0,-4 -1,-6 -2,-7c-1,-1 -3.186005,-4.692551 -5,-6c-1.147278,-0.826904 -1,-3 -1,-4c0,-1 0,-2 0,-3c0,-3 0,-7 0,-10c0,-1 -0.662506,-2.310005 1,-5c0.7435,-1.203003 1.693451,-2.458801 3,-3c0.923889,-0.382683 3.906342,-1.103401 5,-2c2.78833,-2.285881 7,-3 9,-3c1,0 2,0 3,0c2,0 6,0 11,0c2,0 3.07843,1.789848 6,3c2.065857,0.855705 4,4 4,5c0,1 0.95517,2.549156 2,6c0.289795,0.957092 0,3 0,5c0,4 0,7 0,11c0,2 0,7 0,13c0,5 0.981628,6.712006 2,12c0.189117,0.981956 1.497559,4.925797 2,10c0.295624,2.985397 3.190277,8.881516 5,12c2.24469,3.867996 3.149353,5.474274 4,6c1.9021,1.175568 5,2 7,2c2,0 4.012909,0.160187 5,0c3.121429,-0.506546 4,-2 5,-3c3,-3 4.2565,-3.796997 5,-5c1.662506,-2.689987 3.493469,-4.878555 4,-8c0.160187,-0.987091 0,-4 0,-6c0,-2 0,-5 0,-7c0,-2 0,-3 0,-6c0,-2 0,-5 0,-7c0,-4 -2,-6 -2,-10c0,-5 0,-10 0,-14c0,-2 0.144287,-3.934143 1,-6c1.210144,-2.921562 2.012909,-3.839821 3,-4c3.121429,-0.506538 8,-3 9,-3c1,0 4,0 6,0c1,0 2,0 5,3c1,1 1.839813,2.012909 2,3c0.506531,3.121445 3,6 3,7c0,2 0,4 0,7c0,3 0,6 0,9c0,3 0,5 0,7c0,3 0,6 0,9c0,3 1.770233,7.026749 2,8c1.027496,4.352509 3.486267,6.823746 4,9c0.459503,1.946503 1.21167,2.714127 4,5c1.093658,0.896591 3.309998,4.337494 6,6c1.203003,0.7435 3,1 5,1c1,0 2.228363,1.148056 5,0c1.306549,-0.541199 3.710205,-5.042908 4,-6c1.04483,-3.450851 2.692535,-4.186005 4,-6c0.826904,-1.147263 1.917603,-2.386871 3,-5c0.38269,-0.923874 -0.210144,-4.078438 1,-7c0.855713,-2.065857 1,-4 1,-8c0,-2 0,-6 0,-9c0,-3 0,-5 0,-6c0,-2 0,-5 0,-7c0,-5 0,-6 0,-9c0,-2 -2,-6 -2,-7l0,-2l0,-3l0,-1" id="svg_1" stroke-width="1.5" stroke="#000" fill="none"/>
<path id="secondPath" d="m85.5,257.5c0,0 0,-1 0,-2c0,-2 1,-5 1,-6c0,-2 -0.471855,-4.118332 0,-5c1.701309,-3.178925 2.770248,-4.026749 3,-5c0.513741,-2.176254 1,-5 1,-7c0,-1 0.617317,-4.076126 1,-5c1.08239,-2.613129 3,-4 4,-5c1,-1 1.693436,-2.458801 3,-3c1.847755,-0.765366 4,0 9,0c1,0 2.70546,1.346191 5,3c3.627983,2.614899 5.851143,2.485306 8,7c1.771996,3.7229 1.496223,4.907791 2,9c0.122185,0.992508 -0.579567,3.085815 0,5c1.04483,3.450851 1.692551,7.186005 3,9c0.826904,1.147263 0.337494,2.310013 2,5c0.7435,1.203003 3,1 5,1c2,0 5,0 6,0c2,0 3,0 4,0c3,0 4.917603,-1.386871 6,-4c0.38269,-0.923874 0.144287,-4.934143 1,-7c1.210144,-2.92157 1,-4 1,-7c0,-3 0,-5 0,-7c0,-2 0,-3 0,-5c0,-2 0,-4 0,-7c0,-1 -0.662506,-2.310013 1,-5c0.7435,-1.203003 3,-2 4,-2c2,0 5,0 7,0c2,0 4.934143,0.144287 7,1c2.92157,1.210144 5.21167,2.714127 8,5c1.093674,0.896591 2.486252,1.823746 3,4c0.229752,0.973251 0.486252,1.823746 1,4c0.689255,2.919754 0.972519,5.647491 2,10c0.689255,2.919754 0.493454,4.878555 1,8c0.320358,1.974182 0.972519,2.647491 2,7c0.229752,0.973251 0,2 2,3c4,2 5.012909,1.839813 6,2c3.121445,0.506531 4,1 5,1c1,0 2.076126,0.38269 3,0c3.919693,-1.623596 4,-4 5,-5l0,-1l1,-5" id="svg_2" stroke-width="1.5" stroke="#000" fill="none"/>
<path id="thirdPath" d="m230.5,254.5c-1,-1 -1,-2 -1,-10c0,-3 0.891632,-9.250565 3,-16c0.666718,-2.134354 3.496231,-5.907791 4,-10c0.122177,-0.992508 1.346191,-3.70546 3,-6c1.307449,-1.813995 1.097885,-3.824432 3,-5c2.551956,-1.577194 7.171631,-1.159134 11,0c3.450836,1.04483 8.372009,2.385101 12,5c1.147278,0.826904 3.346191,3.70546 5,6c2.614899,3.627991 4.679626,10.025818 5,12c0.506531,3.121445 1.371338,4.74675 4,9c1.175568,1.902115 1.33197,5.229355 3,9c1.458649,3.297333 4.513,4.593994 6,7c1.662506,2.690002 4,5 5,5c3,0 6.309998,-0.337494 9,-2c1.203003,-0.7435 4.14682,-3.863251 6,-6c3.276001,-3.777267 4.497559,-5.925797 5,-11c0.197083,-1.990265 0,-5 0,-8c0,-2 0,-4 0,-7c0,-2 0,-4 0,-8c0,-2 -1.051453,-6.298691 0,-8c1.175568,-1.902115 4,-3 7,-3c2,0 5,0 8,0c1,0 7.346191,0.70546 9,3c1.307465,1.813995 2.23172,5.927673 4,12c1.152771,3.958679 2.605835,9.01947 3,13c0.502441,5.074203 -0.236877,7.34346 2,13c1.325897,3.352905 5.513,3.593994 7,6c1.662506,2.690002 6.080261,3.31073 9,4c6.528748,1.541229 7,3 8,3c4,0 5.186005,-2.692535 7,-4c5.736359,-4.134521 6.498291,-6.937958 7,-13c0.082489,-0.996597 0,-3 0,-5c0,-4 0.68927,-9.080246 0,-12c-1.027496,-4.352509 -3.458801,-7.693436 -4,-9c-1.530731,-3.695511 -3,-7 -4,-10c-1,-3 -1,-4 -1,-6c0,-1 0,-3 1,-3c1,0 2,0 5,0c3,0 5.934143,0.144287 8,1c2.92157,1.210144 5.222717,1.723984 9,5c2.136749,1.853195 4.493469,2.878555 5,6c0.160187,0.987091 2.95517,5.549149 4,9c0.579559,1.914185 0.493469,6.878555 1,10c0.800903,4.93544 -0.530731,8.304489 1,12c1.623596,3.919693 3.710205,6.042908 4,7c1.04483,3.450851 3,4 4,4c1,0 5,0 7,0c1,0 2,0 3,0c2,0 4.674103,0.352905 6,-3c2.236877,-5.65654 0.31073,-7.080246 1,-10c1.027496,-4.352509 2,-8 2,-11c0,-4 0.756439,-8.072174 0,-12c-1.018372,-5.287994 -3.972504,-6.647491 -5,-11c-0.919006,-3.89299 0,-6 0,-7c0,-1 1,-1 5,-1c4,0 6.005035,-0.141785 8,0c7.053284,0.501266 11.323669,3.520157 13,5c2.703003,2.386169 1.49295,4.234009 4,9c1.678558,3.190994 3,7 3,10c0,4 0.733063,8.036285 1,9c1.556488,5.61937 2.533752,7.096603 4,13c0.762268,3.069031 2.385101,5.372009 5,9c1.653809,2.29454 3,3 4,4c1,1 2,1 6,1c1,0 3,0 5,0c1,0 2.917603,-0.386871 4,-3c0.38269,-0.923874 2.493469,-2.878555 3,-6c0.160187,-0.987091 1.824432,-3.097885 3,-5c0.525726,-0.850647 1,-4 1,-6c0,-4 0,-7 0,-11c0,-2 0,-5 0,-6c0,-2 0,-5 0,-7c0,-2 0,-6 0,-7l0,-1l0,-1l-2,-3" id="svg_3" stroke-width="1.5" stroke="#000" fill="none"/>
</g>
</svg>
<svg width='700' height='400'>
<path id="svg_1" d="m71.5,103c32,4 58,44 57.5,44c0.5,0 56.5,-46 56,-46c0.5,0 55.5,44 55,44c0.5,0 61.5,-52 61,-52c0.5,0 46.5,48 46,48c0.5,0 46.5,-46 48.5,-48c2,-2 77,87 76.5,87c0.5,0 31.5,128 31.5,129c0,1 -126,36 -126.5,36c0.5,0 73.5,-70 73,-70c0.5,0 5.5,-73 5.5,-73c0,0 -108,-31 -108.5,-31c0.5,0 -47.5,39 -47.5,39c0,0 -98,-59 -98.5,-59c0.5,0 -57.5,71 -58,71c0.5,0 -68.5,-64 -69,-64c0.5,0 -22.5,-57 -23,-57c0.5,0 5.5,183 5,183c0.5,0 254.5,43 254,43l-238.5,-224zc239,224 310,121 309.5,121" stroke-width="5" stroke="#000" fill="transparent" />
</svg>
<button onclick="test()">click me</button>
<button onclick="test1()">click me</button>
<script type="text/javascript">
function animatePath(pathname, animation) {
var path = document.querySelector(pathname);
var length = path.getTotalLength();
// Clear any previous transition
path.style.transition = path.style.WebkitTransition =
'none';
// Set up the starting positions
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
path.getBoundingClientRect();
// Define our transition
path.style.transition = path.style.WebkitTransition =
animation;
// Go!
path.style.strokeDashoffset = '0';
}
function test () {
animatePath('#firstPath', 'stroke-dashoffset 1s ease-in-out');
animatePath('#secondPath', 'stroke-dashoffset 1s 1s ease-in-out');
animatePath('#thirdPath', 'stroke-dashoffset 2s 2s ease-in-out');
}
function test1 () {
animatePath('#svg_1', 'stroke-dashoffset 2s ease-in-out');
}
</script>
</body>
</html>
