svg多线条动画

svg多线条动画

by cacti xu

HTML

<div id="myobj" width="100%" height="100%">
    
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<path id="i0" fill="none" stroke="#050505" stroke-width="3.3513" stroke-miterlimit="10" d="M83.565,418.587
	c0,0,22.344-55.854,65.073-55.854s56.691,57.255,56.691,57.255h89.93c0,0,20.104-51.108,59.765-51.108s53.344,57.529,53.344,57.529
	l46.919-2.795c0,0,19.214-3.116,21.616-37.44c2.402-34.332,2.124-81.808,2.124-81.808s-1.4-22.621-18.714-29.324
	c-17.313-6.702-297.428-19.27-345.463-7.821c-22.622,10.335-89.092,73.173-93,135.454c10.61,17.588,12.567,15.356,18.989,17.588
	C78.26,418.587,83.565,418.587,83.565,418.587z"/>
<path id="i1" fill="none" stroke="#050505" stroke-width="3.3513" stroke-miterlimit="10" d="M106.815,269.733
	c0,0,81.761-222.866,151.58-232.92c0,0,127.91-18.992,184.883,40.774c11.73,27.371,13.962,41.334,13.962,41.334l-2.268,154.942"/>
<path id="i2" fill="none" stroke="#050505" stroke-width="3.3513" stroke-miterlimit="10" d="M457.034,132.906"/>
<path id="i3" fill="none" stroke="#050505" stroke-width="3.3513" stroke-miterlimit="10" d="M179.367,115.57"/>
<path id="i4" fill="none" stroke="#050505" stroke-width="3.3513" stroke-miterlimit="10" d="M294.144,262.593"/>
<path id="i5" fill="none" stroke="#050505" stroke-width="3.3513" stroke-miterlimit="10" d="M149.477,393.177
	c0,0,35.746,4.844,30.718,42.448c-2.232,20.108-26.808,33.514-40.772,28.486c-13.965-5.026-34.633-16.193-29.605-44.123
	C120.178,401.287,128.252,393.177,149.477,393.177z"/>
<path id="i6" fill="none" stroke="#050505" stroke-width="3.3513" stroke-miterlimit="10" d="M355.653,396.516
	c0,0,35.745,4.844,30.718,42.448c-2.231,20.107-26.811,33.513-40.772,28.486c-13.968-5.027-32.885-15.52-27.857-43.45
	C323.082,402.007,332.822,396.037,355.653,396.516z"/>
<path id="i7" fill="none" stroke="#050505" stroke-width="3.3513"...

JavaScript

var current_frame, total_frames, path, length, handle, myobj;

myobj = document.getElementById('myobj').cloneNode(true); //.cloneNode创建节点的拷贝,并返回该副本如果您需要克隆所有后代，请把 deep 参数设置 true，否则设置为 false。

var init = function() {
  current_frame = 0;
  total_frames = 60;
  path = new Array();
  length = new Array();
  for(var i=0; i<10;i++){
    path[i] = document.getElementById('i'+i); //获取每个path路径的id
    l = path[i].getTotalLength(); // 获取每个path路径的长度
    length[i] = l; //将长度放入数组中
    path[i].style.strokeDasharray = l + ' ' + l; 
    path[i].style.strokeDashoffset = l;
  }
  handle = 0;
}
 
 
var draw = function() {
	/////// 控制绘画速度
   var progress = current_frame/total_frames;      
   if (progress > 1) {
     window.cancelAnimationFrame(handle);
   } else {
     current_frame++; //1,2,3,4
     for(var j=0; j<path.length;j++){
         path[j].style.strokeDashoffset = Math.floor(length[j] * (1 - progress)); //当progress==1的时候strokeDashoffset==0绘画结束
     }
     handle = window.requestAnimationFrame(draw);
   }
};

init();
draw();