This class helps with animating individual CDL SVG strokes
The SVG DOM node in use
The SVG defs DOM node used for masks
The SVG path DOM node of this stroke
The SVG mask DOM node used for this stroke
The SVG path DOM node used as a mask for animating the stroke
Show this stroke
Hide this stroke
animationOptions is an object containing the following keys:
strokeAnimationVelocity:int, defalt 1, controls how fast each stroke is drawn. closer to 0 means slower, greater than 1 means faster.
animateStyles:object containing a
endproperty, both of which containing an object with styles to tween as each stroke is animated. This can be used to highlight strokes being animated, or give an ink-drying effect, for example.
Returns a promise which resolves when the animation is complete
attrs is an oject containg styles to set on this stroke instantly
method: tweenStyles(attrs, options)
attrs is an oject containg styles to transition on this strokes
options is an oject containg one key, "duration", default 1000ms
Returns a promise which resolves when the tween finishes
Stops any currently running stroke animation
Stops any animations and tweens of any type
Remove all DOM nodes associated with this stroke
Create a copy of this CdlUtils.StrokeAnimator. You can use this method if you want to layer a stroke on top of another create a highlight or other effect.
Returns the cloned CdlUtils.StrokeAnimator instance