JSignage:AnimateMotion
From SpinetiX Support Wiki
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
-
accumulate
,additive
,by
,calcMode
,from
,keySplines
,keyTimes
,to
,values
- Attributes to define animation values over time. Note that
values
,from
,to
andby
attributes take pairs of x, y coordinates which define a motion path. The default value for thecalcMode
attribute is'paced'
which means that the motion follows the specified path at constant velocity.
- Attributes to define animation values over time. Note that
-
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 thekeyTimes
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 aspath 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 );