In the Inovista Animator, images can be moved via a semi-circle or a wave
motion. The height of the wave(amplitude) and number of waves(frequency) in
the motion can be initialized and reset at runtime as a variable if
required. The motions are all based on sine waves.
The Movement Options
There are 2 aspects to a circle or wave motion. The first is to define where
the image will be moved to. The end location is defined by the movement
section. All the movement options are available and more detail can be found
on the Movement page.
Movement Section
On Image Editing
The element can be dragged to the end point on the displayed image.
Click on the 'Display on Image to Edit' button to place an editable copy on
the image. Note that for curves, only movements are available for edit and
not scale and rotation. See On
Image Editing for more information.
The Curve Options
The 'Curve' section contains three options for defining the curve or wave.
Select 'Wave', 'Positive Curve' or 'Negative Curve' using the 'Type'
dropdown.
Enter the height or amplitude of the curve or wave in pixels in the
'Wave Ht' field. A variable value may also be entered here.
The 'Num Waves' field defines the number of complete waves a wave transform
will undergo (This is ignored for the curve option). A variable may also be
entered here.
Curve/Wave Section
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.
Simple Semi-Circle
This example shows a circle moving through a semi-circle. There are 2
chained transitions. The first simply moves the circle to the left side
of the background and the second moves the circle to 90% of the x range
with a curve height of -45.
In the Curve Transaction section of the Animator,the settings are as
follows:
Basic Wave
This example shows a balloon image moving across the background using a
basic wave motion. The first of 2 chained transitions locates the
balloon to the left of the background and the second uses a wave motion
of height 25px and a single wave to the right hand side of the
background.
In the Curve Transaction section of the Animator,the settings are as
follows:
Semi-Circle Variable
Wave Ht
This example works in exactly the same way as in the example immediately
above but uses a variable to change the wave height.
In the Curve Transaction section of the Animator,the settings are as
follows:
Wave with Variable
Height and Frequency
This example has transitions for the image itself in the background and
works in exactly the same way as in the example immediately above but
uses two variables to change the wave height and number of waves. There
is also a scaling transition for the group containing the balloon which
gives the impression that the balloon is moving nearer.
In the Curve Transaction section of the Animator,the settings are as
follows:
