JSignage:SvgAnimation

This page is related to jSignage animation events.

jSignage.svgAnimation()

Add an SVG animation onto a specified target element. If supported by the player, the animation is implemented with SMIL animations rather than with JavaScript timers.

$.svgAnimation( target, name, attributesObject );
$.svgAnimation( target, name, attributesObject, endCallback );

Returns: SVG Element

Parameters

• target

  Type: SVG Element.

  Target element for the animation.

• name

  Type: String.

  Name of the animation tag. The following values are valid: animate, animateTransform, animateColor or animateMotion.

  Note that jSignage shortcut functions exists for animateColor and animateMotion.

• attributesObject

  Type: Plain Object.

  The attributes list for the animation, containing id, attributeName, attributes defining timings and values for animations and other attributes specific to the animation type (like type for animateTransform and path, keyPoints, rotate for animateMotion).

• endCallback

  Type: Callback.

  Optional callback to be executed at the end of the animation.

Example

$(function () {    
    var img = $.media( {href: 'media/Fusion.jpg'} ).addTo('svg');
    
    // animate the opacity of the image up to 0 (invisible)
    $.svgAnimation( img[0], 'animate', {
        attributeName: 'opacity',
        from: '1',
        to: '0',
        dur: 10,
        fill: 'freeze'
    });
});