Kanimaji
Visit the project page on GitHub.
To activate the animation on the 4th stroke it is sufficient to do (you can test in the Javascript console):
svg = $(document.getElementById('mysvg').getSVGDocument());
svg.find('[data-stroke="4"]').addClass('animate brush current');
(we use jQuery for convenience, but it is not necessary), see the code below for information on the classes added.
To get the number of strokes you can just do
num_strokes = svg.find('[data-num-strokes]').data('num-strokes');
And the selector for the elements relative to the x-th strokes (or the 0-th dummy stroke) is just '[data-stroke="x"]'.
The default duration of the 4-th stroke is obtained as:
duration = svg.find('[data-stroke="4"][data-duration]').data("duration");
The code activating the animation of the x-th stroke using the settings is just:
/*
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;
}