From SpinetiX Support Wiki

Jump to: navigation, search

This page is related to jSignage animation events.


.animateMotion( attributesObject )

Returns: jSignage Object


Creates a motion animation for a jSignage layer. This function is supported on SpinetiX products, but it will probably not going to work on most browsers.


  • attributesObject
    Type: Plain Object.
    An object containing any of the following attributes:
    • begin, dur, fill, repeatCount, repeatDur
      Attributes to control the timing of the animation.
    • accumulate, additive, by, calcMode, from, keySplines, keyTimes, to, values
      Attributes to define animation values over time. Note that values, from, to and by attributes take pairs of x, y coordinates which define a motion path. The default value for the calcMode attribute is 'paced' which means that the motion follows the specified path at constant velocity.
    • keyPoints
      Type: Array.<Number>.
      Allows mapping the keyTimes array to a list of relative distances along the length of the motion path, in the range 0 to 1. If specified, it must be an array with exactly as many elements as the keyTimes array. See keyPoints attribute for more details.
    • path
      Type: Object.
      An alternative way of defining the motion path is through a $.pathData object which defines motion along an arbitrary path using the same features as path shapes, including Bezier curves and elliptical arcs.
    • rotate
      Type: Number or String.
      Applies a rotation transformation to the layer. It can be a number (degrees), 'auto' or 'auto-reverse'. See rotate attribute for more details.


Left to right motion

// animate the motion of an image from left to right
$.media( { 
    href: 'image.jpeg', left: 0, top: 100, width: 80, height: 100
} ).animateMotion( {
    begin: "0", dur: 10, from: '0,0', to: '1200,0', fill: 'freeze'
} ).addTo('svg');

Circular motion

// animate the motion of an image along a circular path
$.media( {
    href: 'media/Fusion.jpg', left: 560, top: 205, width: 160, height: 90,
} ).animateMotion( {
    dur: 10, 
    path: new $.pathData().moveTo( 0, 0 ).arcTo( 200, 200, 0, 1, 1, -1, 0 )
} ).addTo('svg');

Usage with shapes

In the case of geometric shapes, .animateMotion can be applied only if the geometric shape is added inside a jSignage layer; for instance:

$.g().add( $.circle( params ) ).animationMotion( attributesObject );
This page was last modified on 4 September 2018, at 10:16.