Morph Images

Animator

Morph Images

Path elements of a similar structure can be morphed (or changed) into another through a seamless transition. The morph target image must be a 'Path' element.

There are 3 ways to select a morph target image:

Select an Existing Path in the Image - the target path will typically be invisible (opacity 0).
Paste the Path Data of an Image - use the data from a path in another image, the path is defined by the 'd' attribute. In an SVG editor, select the 'd' attribute values, copy and paste into the Animator.
Enter a Variable Referring to a Path Id or Path Data - using variables allows the presentation of different morph shapes at runtime.

N.B. It is best to test various images using trial and error to see which paths provide the most effective morph transitions.

See Working Examples

In order for the morph transition to occur, make sure the 'Include' checkbox is checked.

Select Morph Options
To morph to another path in the image, select the base path that will be the starting point of the morph and create a 'Morph Path Transition' in the 'Transitions' section on the left side of the Animator. To morph to 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

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.

Morph Through Images

This example uses a chain of 7 morph transitions and sequentially morphs each image into a hidden path in the image using the 'Select a Path from Current Image' option.

In the Morph Transaction section of the Animator,the settings are as follows:

Select Morph Image

Select Morph To

This example uses the 'Use a Data Variable for Path Values' option to morph the 'Down Arrow' path into the path passed in the variable. The path is passed as an Id.

In the Morph Transaction section of the Animator,the settings are as follows: