|
|
svg = $(document.getElementById('mysvg').getSVGDocument()); svg.find('[data-stroke="4"]').addClass('animate brush current');
num_strokes = svg.find('[data-num-strokes]').data('num-strokes');
duration = svg.find('[data-stroke="4"][data-duration]').data("duration");
/* Clears everything, sets the stroke-th stroke to drawn/drawing, and returns the time the animation will last (if any). */ function animate_stroke(stroke) { var svg, cls, stroke, els, selector, factor, duration, new_duration; svg = $(document.getElementById('mysvg').getSVGDocument()); /* cleanup all classes and durations, if necessary */ svg.find('[data-stroke]') .removeClass('animate current brush backward') .css("animation-duration", ''); /* Build class list from settings: "current" - for marking last drawn/drawing stroke, so that subsequent strokes will be blank. "animate" - for animating the stroke. "backward" - for making the animation backward. "brush" - for showing the brush (the fatty drawing circle). */ cls = 'current'; if($('#animate').is(":checked")) cls += ' animate'; if($('#backward').is(":checked")) cls += ' backward'; if($('#brush').is(":checked")) cls += ' brush'; /* hack, trigger reflow to force animation restart, not necessary unless animating again the same stroke, and want the animation to be restarted. */ svg.find('svg')[0].offsetWidth; /* add classes to animating elaments */ selector = '[data-stroke="' + stroke + '"]'; els = svg.find(selector).addClass(cls); /* set custom speed, if selected */ duration = svg.find(selector+'[data-duration]').data("duration"); if($('#set_speed').is(":checked")) { duration *= Math.exp(-$('#speed').slider("value") * 2.0/100); els.css("animation-duration", duration+'s'); } return duration; }