CdlUtils.Animator

This class helps with animating CDL SVG

CdlUtils.Animator.animateCharacter(targetElm, charOrUnicode, options)

A convenience wrapper around creating new CdlUtils.Animator(targetElm, options), then running renderCharacter(charOrUnicode, options), then running animate(options).

targetElm is DOM node or id of the element where SVG should be rendered.

charOrUnicode can be either a single character such as "你", the unicode hex for a character such as "4F60", or a CdlChar object.

options is an object containing the keys from the options in new CdlUtils.Animator, renderCharacter, and animate. See the options for these methods below.

Returns the CdlUtils.Animator instance that was created.

new CdlUtils.Animator(targetElm, options)

targetElm is DOM node or id of the element where SVG should be rendered.

options is an object containing the following keys:

  • apiKey:Your developer API key. Required unless a custom dataLoader is used.
  • onError:An optional callback function in the event of an error. Typically this would occur if there is a network problem or if you attempt to load an invalid character. The callback is passed an Error object.
  • x:int, default 0. x-offset to begin rendering SVG from
  • y:int, default 0. y-offset to begin rendering SVG from
  • width:int, default 400,
  • height:int, default 400
  • fixMargin:boolean, default true. Whether to pad the returned SVG so it fits inside the bounds specified.
  • showOutline:boolean, default false. Whether to show a gray outline of the character.

attribute: cdlChar

The CdlUtils.CdlChar instance that is currently loaded

attribute: svg

The SVG DOM node in use

attribute: defs

The SVG defs DOM node used for masks

attribute: strokes

Array of CdlUtils.StrokeAnimator instances for the currently rendered character

method: renderCharacter(charOrUnicode, options)

charOrUnicode can be either a single character such as "你", the unicode hex for a character such as "4F60", or a CdlChar object.

options has only 1 attribute, "variant" which can be passed to load a different variant of the character if necessary

returns a promise resolving when the character is loaded and rendered

method: animate(animationOptions)

animationOptions is an object containing the following keys:

  • loopAnimation:boolean, defalt false, whether to continue redrawing the character after the animating finishes
  • delayBetweenLoops:int, defalt 2000, time in ms to wait between finshing drawing a character and starting over (only relevant if loopAnimation is true)
  • delayBetweenStrokes:int, defalt 1000, time in ms to wait between finshing drawing a stroke and starting drawing the next stroke
  • 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.
  • strokeStyles:object containing any CSS styles that should be applied to the strokes when they are initially drawn. This can be used to set stroke fill color or other attributes.
  • strokeOutlineStyles:object containing any CSS styles that should be applied to the stroke outlines when they are initially drawn. This can be used to set fill color or other attributes. Only relevant if showOutline: true is specified.
  • onBeginStrokeAnimation:function which is called when a stroke starts animating. The function is passed in 1 parameter containing an object containing the stroke number.
  • onFinishStrokeAnimation:function which is called when a stroke is finished animating. The function is passed in 1 parameter containing an object containing the stroke number.
  • onFinishAnimation:function which is called when the animation has completely finished. This function is only called if the animation is not set to loop. There are no parameters passed to this function.

method: stopAnimation()

Cancel any currently running animation

method: show()

Show the character. After rendering the character is hidden by default.

method: hide()

Hide the character.

method: showOutline()

Show the character outline.

method: hideOutline()

Hide the character outline.

method: remove()

Delete all DOM elements created by this CdlUtils.Animator

method: setStyles(attrs)

attrs is an oject containg styles to set on all strokes instantly

method: setOutlineStyles(attrs)

attrs is an oject containg styles to set on all stroke outlines instantly

method: tweenStyles(attrs, options)

attrs is an oject containg styles to transition on all strokes

options is an oject containg one key, "duration", default 1000ms

Returns a promise which resolves when the tween finishes

method: tweenOutlineStyles(attrs, options)

attrs is an oject containg styles to transition on all stroke outlines

options is an oject containg one key, "duration", default 1000ms

Returns a promise which resolves when the tween finishes