Create new transitions with jSignage

 

This page is related to jSignage transitions.

Description

To create a transition, one must specify the transition timings and some callbacks which will instantiate additional SVG code to implement the transitions effects. A transition may be composed of up to three effects, each one being implemented by its own callback:

1. The in-effect which adds code to the slide which is about to be displayed. This effect runs immediately as the slide starts.
2. The out-effect which adds code to the slide which is about to be displayed. This effect will run eventually when the slide finishes.
3. The exit effect which adds code to the slide which has just finished. This effect runs immediately as the next slide starts and is meant to be synchronized with its in effect.

JSignage utilities methods can be used to design the transitions.

jSignage Transition Object

Transitions are defined by a plain object with the following properties:

• durIn

  Duration of in-effect. The default value is 0.

• durOut

  Duration of out-effect. The default value is 0.

• durExit

  Duration of the exit effect. The duration of the previous slide is prolonged by this value. All media on the slide will be in the frozen state during this additional time. The default value is 0.

• wrapIn

  Callback function to build additional SVG code for an in effect on the slide. When present, the slide is wrapped into a <g> element and the wrapIn function is called when the slide is created. The default is null.

• wrapOut

  Callback function to build additional SVG code for an out-effect on the slide. When present, the slide is wrapped into a <g> element and the wrapOut function is called when the slide is created. The default is null.

• wrapExit

  Callback function to build additional SVG code for an exit effect on the previous slide, i.e. an effect that applies to the previous slide once it is in the frozen state and the next slide starts playing. When present, the previous slide is wrapped into a g element and the wrapExit function is called when the next slide is created.

Impact on timeline

Use of wrapOut or wrapExit depends on the type of transition. wrapExit function has the advantage of being applied when the next slide is created, thus allowing the user to choose a transition effect together with the slide, while wrapOut is ignored when the transition is interactive or the duration of the current media is not known in advance but offers the possibility to apply an effect while the slide terminates instead of after it has been frozen.

The diagrams below illustrate the timing resulting from the combination of the type of effect (wrapOut or wrapExit) and the gap and transition timing parameters on the playlist or slideshow object. Gap timing is shown here for reference, but since in most case it is 0, the gap phase is normally skipped. For each type, timing with freezeDuringEffects==false and freezeDuringEffects==true is shown.

wrapOut transition with effects applied while the medias are running

Transition does not modify timing.

wrapOut transition with effects applied while the medias are frozen

Playlist duration extended by durIn + durOut

wrapExit transition with effects applied while the next media is running

Transition does not modify timing.

wrapExit transition with effects applied while the next media is frozen

Playlist duration extended by durIn.

Callbacks

callback( trigger, inner, width, height, left, top, bbw, bbh )

The wrapIn() and wrapOut() parameters are identical. The this object when inside the callback is the <g> element created to wrap the slide. The callback sets attributes and appends children to this element.

• trigger

  The event string to use as a begin trigger for animations relative to the end of the current slide (for wrapOut) or the beginning of the next slide (for wrapIn and wrapExit).

• inner

  DOM element which is next in the effect stack - either the <g> of the next effect or the element of the layer

• width, height

  width and height of the layer in pixels

• left, top

  left and top position of the layer inside its parent layer in pixels

• bbw, bbh

  width and height of the parent layer in pixels

The callback must not modify the attributes of this or inner but should instead add SVG animation elements under this which target either. When entering the callback, inner is a direct child of this. It can be relocated as a deeper child, but this is not recommended.

Note:

When both wrapIn and wrapOut are specified, a <g> element is created first for the in effect, then wrapIn() is called, then another <g> element is created to wrap the layer and the in effect and wrapOut() is called.

Examples

Cross-fade transition

One of the most basic transitions is a cross-fade between two slides.
Here is the actual code of the constructor for the cross-fade transition:

$.crossFade = function( args ) {
    var dur = $.durInSeconds( args && args.dur, 1 );
    return {
        durIn: dur,
        durExit: dur,
        wrapIn: function( trigger ) {
            $.svgAnimation( this, 'animate', {
                attributeName: 'opacity',
                from: '0',
                to: '1',
                begin: trigger,
                dur: dur
            });
        }
    };
};

It makes use of the $.durInSeconds() helper function to normalize the duration parameter in seconds and creates the transition descriptor object, with only an in effect. The durExit parameter is required to prolong the duration of the previous slide, although wrapExit is not specified because this effect does not need any additional SVG code to be added to the previous slide. To implement the in effect in SVG, it uses the $.svgAnimation() helper function to create a custom animation on the opacity of the <g> wrapper element.

Fade transition

This transition combines a fade out to background at the end of a slide with a fade in from background at the beginning.
Here is the actual code of the constructor for the fade transition:

$.myFade = function( args ) {
    var dur = jSignage.durInSeconds( args && args.dur, 1 );
    return {
        durIn: dur,
        durOut: dur,
        wrapIn : function( trigger, inner ) {
            jSignage.svgAnimation( this, 'animate', {
                attributeName: 'opacity',
                from: '0', to: '1',
                begin: trigger,
                dur: dur
            });
        },
        wrapOut: function( trigger, inner ) {
            jSignage.svgAnimation( this, 'animate', {
                attributeName: 'opacity',
                from: '1', to: '0',
                begin: trigger,
                dur: dur
            });
        }
    };
};