In the Inovista Animator, an SVG path can be used to move either the
whole image or an element in that image. The path can be just about any
shape, for example spirals, hexagons or an ad-hoc drawing (but it MUST be
a path, rectangles, circles etc. are not supported. These shapes can, of
course, be converted to paths in an SVG editor). The image will move along
the border of the shape.
The path used as the base for movement can be selected from an SVG editor
and copied and pasted into the Animator. Another option would be to use a
path in the image itself. Typically, this path would be invisible(opacity
'0') although this is not necessarily the case. Additionally, the path
could be defined as a variable, by setting different paths to the variable
value, different motions can be achieved at runtime. See Working Examples.
Select Path Options
To use a path in the current image, select the 'Select a Path from the
Current Image' radio button. This will present a tree list with all viable
paths in the image highlighted. Click on the required path and it should be
shown after 'Selected Path:'.
Path in Image
Paste Path Data
To paste in the path using its actual data values, select the 'Paste Path
Data' radio button. This will present a text area - paste the path data
there. Path data can be retrieved in a number of ways. For example, when a
path is created in an SVG Editor, the 'd' attribute of the path contains the
definition of how that path is drawn. Copy this 'd' value in the editor and
paste it into the Animator text area.
Paste Path Data
Create Path from Variable
A path can also be set from a variable. This allows different path to be
used at runtime. To define a variable for a path, select the 'Use a Data
Variable for Path Values' radio button. Once selected, two options are
available for variables. A variable can either refer to actual path data
or to the id of a path that already exists in the image. Select either
'Varaible referring to a Path Id' or 'Variable referring to Path Data'.
Define Path Variable
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.
Setup, Run To and Auto Rotate Options
When a path transition is run, the image or element will be moved to the
path start point. 'Setup Duration' defines the amount of time in
milliseconds used in that motion.
The 'Run to %' defines how much of the path border will be followed by the
transition. '100%' means the whole border of the shape will be completed,
'50%' means the first half of the path border will be completed and so on.
Auto Rotate will automatically rotate the element moving along the path to
the angle of the direction of the path at any given point.
Change Path Start or End Point
When the path transition is for the whole image (and not an element within
the image), the transition can begin at a predefined beginning point or end
at a predefined ending point. Only one of these options can be selected. The
movement functionality is exactly the same as how movements are defined in
the 'Combination' transition. This includes the ability to use the '@HOME'
option - so a path transition can begin or end at the initial location of
the path.
To defined a start/end point, select the 'Include' checkbox. To set whether
the point defined is the start or end, click the 'Start/End' toggle button.
For more information,see Movements.
The images below all contain
working examples of some 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.
External Path Data
This example shows a ball image running a path motion in a background.
The ball follows a line with '0' opacity (invisible) and uses an
'expOut' easing to give the impression of a series of bounces that slow
down. The bounce path was drawn in an SVG editor and pasted into the
Animator.
In the Path Transaction section of the Animator,the settings are as
follows:
Internal Path Id
This example shows an oval element in the image following a spiral path
that has been defined within the image itself. The spiral path may be
visible or invisible.
In the Path Transaction section of the Animator,the settings are as
follows:
External Path Data as
Variable
This example works in exactly the same way as in the example immediately
above but uses a variable to change the path data values that define the
motion at runtime. Variables also change the x and y locations of the
transition end point.
In the Path Transaction section of the Animator,the settings are as
follows:
Internal Path Id as
Variable
This example uses a path variable referring to one of two hidden paths
in the image. One of those paths is a spiral pointing inwards and the
other points outwards.
In the Path Transaction section of the Animator,the settings are as
follows:
