Animation vectorielle

HTML code :


<div id="svgWrapper">
<div id="myobj" width="100%" height="100%">
<svg version="1.1" id="myobj" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 height="500px" viewBox="0 0 870.236 762.52" enable-background="new 0 0 870.236 762.52"
	 xml:space="preserve">
<path id="i0" fill="none" stroke="#000000" stroke-miterlimit="10" d="M663.307,297.638v5.668h-2.834c-7.828,0-14.174,6.347-14.174,14.174
	v-1.359v165.768c0,7.828-6.347,14.174-14.174,14.174h-42.521V297.638H663.307z"/>
<path id="i1" fill="none" stroke="#000000" stroke-miterlimit="10" d="M377.007,368.504v-85.037c0-7.828-6.346-14.174-14.173-14.174h-42.52
	v113.385h42.52C370.662,382.678,377.007,376.332,377.007,368.504z"/>
<path id="i2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M476.221,325.984H433.7c-7.828,0-14.174,6.346-14.174,14.174
	l0.002,141.729c0,7.828,6.346,14.174,14.174,14.174h42.521L476.221,325.984L476.221,325.984z"/>
<path id="i3" fill="none" stroke="#000000" stroke-miterlimit="10" d="M504.565,368.505v127.558h56.693V354.331h-42.521
	C510.911,354.331,504.565,360.677,504.565,368.505z"/>
<path id="i4" fill="none" stroke="#000000" stroke-miterlimit="10" d="M391.181,518.739c-7.828,0-14.174-6.346-14.174-14.172v-79.369
	c0-7.828-6.346-14.174-14.173-14.174h-42.52v99.201v0.021c0.005,7.822,6.349,14.164,14.173,14.164l59.527-0.002v-5.668
	L391.181,518.739z"/>
<path id="i5" fill="none" stroke="#000000" stroke-miterlimit="10" d="M218.268,269.291v5.669l2.834,0.001
	c7.82,0,14.162,6.335,14.172,14.153v206.947h42.52c7.828,0,14.173-6.346,14.173-14.174V269.29L218.268,269.291z"/>
</svg>
</div>
</div>

Javascript code :


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

myobj = document.getElementById('myobj').cloneNode(true);

var init = function() {
  current_frame = 0;
  total_frames = 130;
  path = new Array();
  length = new Array();
  for(var i=0; i<6;i++){
    path[i] = document.getElementById('i'+i);
    
    l = path[i].getTotalLength();
    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++;
     for(var j=0; j<path.length;j++){
         path[j].style.strokeDashoffset = Math.floor(length[j] * (1 - progress));
     }
     handle = window.requestAnimationFrame(draw);
   }
};

init();
draw();


CSS code :


Comments are closed.