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