JSignage:SvgAnimation

From SpinetiX Support Wiki

Jump to: navigation, search

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.
  • 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'
    });
});
This page was last modified on 6 December 2018, at 22:26.