JSignage:AnimateMotion

This page is related to jSignage animation events.

.animateMotion()

.animateMotion( attributesObject )

Returns: jSignage Object

Description

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.

Parameters

• 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.

Examples

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 );