Inovista
❮      ❯
Animator



Rotating Images

In the Inovista Animator, images can be rotated within their containing background and parts of that image can be rotated within the image and of course, both of these actions can be implemented to run simultaneously. Image transitions can also be chained, this means a sequence of transitions can be played one after another. A chained transition will be played the moment that the previous transition has completed. Note that using the 'delay' option can stall the start of the transition by the amount of time entered in the 'delay'.

Rotation is most often undertaken using the 'center' point but using the 'Rotate on Point' dropdown, other parts of the image can be used as the base point of the rotation.


rpt


See Working Examples.
Degrees Rotation
Images can be rotated in either a anti-clockwise(negative) or clockwise(positive) direction. A complete rotation will be 360 degrees. Multiple rotations will be multiples of 360, for example 720 will mean 2 rotations, 1080 will mean 3 and so on. A value of -360 will be a single anti-clockwise direction.

rot1


On Image Editing
The element/node can be rotated on the displayed image. Click on the 'Display on Image to Edit' button to place an editable copy on the image. See On Image Editing for more information.

displayeditbutton


Using Variables
As with almost all options within the Inovista Animator, the ability to use variable values is available. Using variables allows the value to be changed at runtime using the Animator API. Note that most of the examples below are using variables to change how the animation works when various options or buttons are selected.
To define a variable, enter a text value into the relevant textfield, i.e. the 'Rotate' field.

mvvar

Once a variable has been created, that variable name should appear in the 'Variable Values' section at the bottom of the editor section of the Inovista Animator (left side). To run the image in the Animator, enter a value into the textfield next to the variable name. Note that this value will be the default when the image is exported. This value can be edited at runtime.

mvvarval

The images below all contain working examples of the points just mentioned. Please note that each image must have a different SVG ID to ensure that there is no confusion about which effects apply to any given image.
Rotate on Center


This example shows scaling on both the x and y axes. The animation duration is 1000 milliseconds(1 second) and a bounce out easing effect is added. This sample is using a variable value for both the x and y scale.

In the Scale section of the Animator, scale values are setup as shown below:

Rotate on Top Point

This example shows scaling to a size in pixels on both the x and y axes. The animation duration is 1000 milliseconds(1 second) and a bounce out easing effect is added. This sample is using a variable value for both the x and y scale.

In the scale section of the Animator, scale to a pixel size settings are setup as shown below: