JSignage:Transitions

From SpinetiX Support Wiki

Jump to: navigation, search

This page is related to jSignage animation events.

Introduction

Transitions are similar to effects but they link two medias of a Playlists or two slides of a Slideshow together, so both the in and out effect and part of the transition. They are applied to Slideshows or Playlists using the transition or defaultTransition attribute.

See "Creating new transitions" page for how to extend the framework with new transitions.

A different transition can be specified for each slide or media. The transition applies to the slide with which it is associated, i.e. for the period of time that starts with the slide and ends with the start of the next slide. For transitions such as the fade where the out effect is applied before the next slide and thus before the next transition is decided, this implies that the out effect will be applied regardless of what the next transition is.

Common attributes

All transition share a common set of parameters as shown below:

  • dur: Control the duration of the transition effects. Usually the default value is '0.5s'.

Note that some transitions, such as the fade, actually are composed of two effects: a fade to background at the end of the current media and a fade from background at the beginning of the next media. Setting a dur of 1s will result in both fades lasting 1s, so the total duration during which there are effects is 2s.

Example

Typically, transitions are applied to a playlist using the defaultTransition as shown below.

 $(function(){ 
    $.playlist({
        data: [ 'images/1.jpg', 'images/2.jpg', 'images/3.jpg', 'images/4.jpg' ],
        defaultTransition : $.wipe({ dur:0.5, type:'iris'})
    }).addTo( 'svg' );
 });

Random transition

Description

Selects one transition at random.

Parameters

There is no specific parameters, the arguments are passed as is to whatever transition is selected. Arguments common to all transitions are therefore supported. Transition specific argments should not be used. The default value usually calls for a random type or subtype if the transition offers variations, this result in a random choice among the many variations available.

Example

 $.random();

Cross fade

Description

Classical cross fade: a new slide cross fades over the previous one as it starts playing.

Parameters

  • dur: Duration of the transition (default: 1s)

Example

 $.crossFade({ dur: '1s' });

Fade

Description

Fades out the current slide, then fades in the next slide from the background.

Parameters

  • dur: Duration of each fade. Default: 1s.
  • color: Fade color, or null for transparent, i.e. fading to/from the background. Default: null.

Example

 $.fade({ dur: '1s', color: 'black' });

Slide

Description

Introduce the new slide with a slide in effect over the previous, frozen, slide.

Parameters

  • dur: Duration of the effect (default: 0.5s)
  • direction: Direction of sliding motion, one of:
    • random (default) any direction
    • rightToLeft
    • leftToRight
    • bottomToTop
    • topToBottom

Example

 $.slide({ dur: '1s', direction: 'leftToRight' });

Push

Description

Introduce the new slide with a "fly in" effect while pushing the previous slides flies out, like in an old slide projector.

Parameters

  • dur: Duration of the effect (default: 0.5s)
  • direction: Direction of flight motion, one of:
    • random (default) any direction
    • rightToLeft
    • leftToRight
    • bottomToTop
    • topToBottom

Example

 $.push({ dur: '1s', direction: 'leftToRight' });

Wipes

Description

Introduce the new slide with one of the multiple types of wipe effects over the previous, frozen, slide.

Parameters

  • dur: Duration of the effect (default: 0.5s)
  • type: Wipe type according to the taxonomy of SMPTE 258M-1993 (see below)
  • subType: Wipe subtype (see below)

SMPTE Wipe types and subtypes

  • "random" (default) any type of wipe
  • "bar"
    • "random" (default) any direction
    • "leftToRight"
    • "rightToLeft"
    • "topToBottom"
    • "bottomToTop"
  • "box"
    • "random" (default) any direction
    • "topLeft"
    • "topRight"
    • "bottomRight"
    • "bottomLeft"
    • "topCenter"
    • "rightCenter"
    • "bottomCenter"
    • "leftCenter"
  • "barnDoor"
    • "random" (default) any orientation
    • "vertical"
    • "horizontal"
  • "iris"
    • "rectangle"

Example

 $.wipe({ dur: '1s', type: 'barnDoor', subType: 'vertical' });

Page

Description

Introduce the new slide with a page in effect over the previous, frozen, slide which fades out quickly.

Parameters

  • dur: Duration of the effect (default: 0.375s)

Example

 $.page({ dur: '0.5s' });

Flip

Description

Flip the current slide over to the new one.

Parameters

  • dur: Duration of the effect (default: 0.5s)
  • orientation: Orientation of the pivot axis, one of:
    • random (default) any orientation
    • horizontal
    • vertical

Example

 $.flip({ dur: '1s', orientation: 'horizontal' });

Cube face rotation

Description

Pseudo-3D simulation of the rotation of a cube whose facing the screen is the current slide to one of the other 4 peripheral faces with the new slide.

Parameters

  • dur: Duration of the effect (default: 0.5s)
  • direction: Direction of flight motion, one of:
    • random (default) any direction
    • rightToLeft
    • leftToRight
    • bottomToTop
    • topToBottom

Example

 $.cubeFace({ dur: '1s', direction: 'leftToRight' });

Zoom

Description

Fade in and zoom the slide as it appears, from a smaller size to the nominal size of the layer. Zoom again and fade out when it disappears.

Parameters

  • dur: Duration of the effect (default: 1s)
  • factorIn: Zoom factor at beginning (default: '20%')
  • factorOut: Zoom factor at end (default: '20%')
  • keepZooming: Keep zooming while the slide is displayed. If true, the zoomOut factor is ignored. (default: false)

Example

Show text layers which are continuously in motion.

 $.slideshow({
   begin: '0s',
   repeatCount: 'indefinite',
   defaultSlideDur: 5,
   defaultTransition: $.zoom({ keepZooming: true, factorIn: '10%' }),
   data: [ 'This is text:', 'Text is good for you !', 'You need text.' ],
   renderToSVG: function() {
     return $.textArea({ fontSize: 48, fontFamily: 'Arial Black', fill: 'white' }).tspan( this );
   }
 }).addTo('svg');
This page was last modified on 20 January 2017, at 14:05.