CdlUtils.StrokeAnimator

attribute: svg

The SVG DOM node in use

attribute: defs

The SVG defs DOM node used for masks

attribute: path

The SVG path DOM node of this stroke

attribute: mask

The SVG mask DOM node used for this stroke

attribute: maskPath

The SVG path DOM node used as a mask for animating the stroke

method: show()

Show this stroke

method: hide()

Hide this stroke

method: animate(animationOptions)

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 start and end property, 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

method: setStyles(attrs)

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

method: stopStrokeAnimation()

Stops any currently running stroke animation

method: stop()

Stops any animations and tweens of any type

method: remove()

Remove all DOM nodes associated with this stroke

method: clone()

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