UIZE JavaScript Framework

MODULES Uize.Widget.ImageWipe

SEARCHEXAMPLESSOURCETO DODEPSTEST

1. Introduction

The Uize.Widget.ImageWipe class enables a wide variety of sophisticated animated image wipe effects, used for transitioning from one image to another.

DEVELOPERS: Chris van Rensburg

This widget class can be used in conjunction with the Uize.Widget.SlideShow class when creating slideshow experiences. A number of preset wipe effect settings are available in the Uize.Widget.ImageWipe.xPresets extension module.

1.1. Examples

The following example pages are good showcases for the Uize.Widget.ImageWipe module...

Slideshow With Wipes - See an example of a JavaScript slideshow widget with stunning image wipe animation effects that you didn't believe were possible with just JavaScript.
Uize.Widget.ImageWipe - See stunning image wipe animation effects you didn't believe possible with JavaScript. Choose from dozens of themes. Tweak values to make your own.

SEARCH FOR EXAMPLES

Use the link below to search for example pages on the UIZE Web site that reference the Uize.Widget.ImageWipe module...

SEARCH

1.2. Implementation Info

The Uize.Widget.ImageWipe module defines the Uize.Widget.ImageWipe class, which is a subclass of Uize.Widget.

INHERITANCE CHAIN

Uize.Class −> Uize.Widget −> Uize.Widget.ImageWipe

1.2.1. Features Introduced in This Module

The features listed in this section have been introduced in this module.

INSTANCE METHODS

prepareForNextItem | setCurrentItem

STATE PROPERTIES

alignX | alignY | allToFull | background | dissolve | divisionsX | divisionsY | duration | firstPaneSizeX | firstPaneSizeY | paneOrderScheme | paneProgressDelay | paneSeedContext | paneSeedSizeX | paneSeedSizeY | src

1.2.2. Features Overridden in This Module

The features listed in this section have been overridden in this module.

The module that an overridden feature was initially introduced in will be noted in the IMPLEMENTATION INFO notes for the feature.

INSTANCE METHODS

valueOf | wireUi

STATE PROPERTIES

html

STATIC PROPERTIES

Uize.Widget.ImageWipe.moduleName | Uize.Widget.ImageWipe.nonInheritableStatics | Uize.Widget.ImageWipe.undefined

1.2.3. Features Inherited From Other Modules

The features listed in this section have been inherited from other modules.

The module that an inherited feature was initially introduced in will be noted in the IMPLEMENTATION INFO notes for the feature.

INSTANCE METHODS

addChild | addChildren | ajax | buildHtml | callInherited | childHtml | childId | confirm | displayNode | fire | flushNodeCache | get | getContainer | getHtml | getInherited | getNode | getNodeStyle | getNodeValue | getProvider | globalizeNode | inform | injectNodeHtml | insertOrWireUi | insertUi | is | isMet | kill | localize | met | nodeId | onChange | once | removeChild | removeNode | removeUi | set | setInherited | setNodeClipRect | setNodeInnerHtml | setNodeOpacity | setNodeProperties | setNodeStyle | setNodeValue | showNode | toggle | unmet | unwire | unwireNode | unwireNodeEventsByMatch | unwireUi | updateUi | whenever | wire | wireNode

INSTANCE PROPERTIES

showConfirm | showInform

STATE PROPERTIES

built | busy | busyInherited | busyParentTickle | children | container | enabled | enabledInherited | enabledParentTickle | idPrefix | idPrefixConstruction | insertionMode | localized | name | nodeMap | parent | wired

STATIC METHODS

Uize.Widget.ImageWipe.alphastructor | Uize.Widget.ImageWipe.declare | Uize.Widget.ImageWipe.doMy | Uize.Widget.ImageWipe.dualContextMethods | Uize.Widget.ImageWipe.dualContextProperties | Uize.Widget.ImageWipe.fire | Uize.Widget.ImageWipe.get | Uize.Widget.ImageWipe.getBlankImageUrl | Uize.Widget.ImageWipe.instanceMethods | Uize.Widget.ImageWipe.instanceProperties | Uize.Widget.ImageWipe.mixins | Uize.Widget.ImageWipe.omegastructor | Uize.Widget.ImageWipe.set | Uize.Widget.ImageWipe.singleton | Uize.Widget.ImageWipe.spawn | Uize.Widget.ImageWipe.stateProperties | Uize.Widget.ImageWipe.staticMethods | Uize.Widget.ImageWipe.staticProperties | Uize.Widget.ImageWipe.subclass | Uize.Widget.ImageWipe.toggle | Uize.Widget.ImageWipe.treeInheritedStateProperties | Uize.Widget.ImageWipe.unwire | Uize.Widget.ImageWipe.wire

STATIC PROPERTIES

Uize.Widget.ImageWipe.busyParentTickle | Uize.Widget.ImageWipe.enabledParentTickle | Uize.Widget.ImageWipe.isWired | Uize.Widget.ImageWipe.pathToResources

1.2.4. Modules Directly Under This Namespace

Uize.Widget.ImageWipe.ThemeValuePack | Uize.Widget.ImageWipe.Themes

1.2.5. Unit Tests

There is no dedicated unit tests module for the Uize.Widget.ImageWipe module.

2. How It Works

Understanding how the image wipe effect works will enable you to come up with your own unique wipes by helping you to understand how the various state properties affect the wipe.

2.1. In a Nutshell

The image wipe is not terribly complicated, in its essence.

Essentially, revealing a new image involves having a number of image nodes stacked on top of one another above the previous image that is to be covered. The src attribute for each of those image nodes is set to the URL of the new image. Then, for each image node, initial and final coordinates for a crop rect are calculated. During the course of the wipe, the crop rect coordinates are interpolated between the initial coordinates and the final coordinates. The final coordinates are calculated such that, at the end of the wipe, all of the image nodes combined block out the previous image.

Additional nuances provide for a wide variety of interesting effects, such as being able to control the start times of the animations for the different image nodes, being able to fade in their opacity, being able to control the order in which they animate, and being able to control their initial coordinates and final coordinates through settings of the effect.

2.2. In More Detail

Now, let's get into a more detailed description of the mechanics. For the purpose of this discussion, a number of terms and concepts are defined, as follows...

2.2.1. Wipe Port

The "port" in which the wipe effect is viewed is termed the wipe port.

The wipe port contains two pane stacks - one pane stack for displaying the current image, and another pane stack for revealing the next image. Both pane stacks are positioned absolutely and right on top of one another.

2.2.2. Pane Stack

A pane stack is a stack of image nodes that are all positioned absolutely and right on top of one another, where each image node corresponds to what is termed a pane.

One pane stack is used to display one image, even though it is comprised of many image nodes. The number of image nodes in the pane stack used for showing the current image is the same as the number of image nodes in the pane stack used for showing the next image, and is calculated as the product of the divisionsX and divisionsY state properties. So, for example, if divisionsX were set to the value 8 and divisionsY were set to the value 2, then the two pane stacks in the wipe port would each have 16 image nodes. Moreover, a 1x16, 2x8, 4x4, 8x2, and 16x1 wipe would all produce a wipe effect using 16 image nodes per pane stack.

2.2.3. Pane

One image node in a pane stack is termed a pane.

When a wipe is performed, initial crop rect coordinates (termed the pane seed) and final crop rect coordinates (termed the pane final) are calculated for every pane in the pane stack that is being used to reveal the next image. When a specific pane is being animated, its crop rect coordinates are interpolated between the pane seed coordinates and the pane final coordinates. Additionally, its opacity will be faded from completely transparent to completely opaque over the course of the animation if the dissolve state property is set to true.

2.2.4. Wipe Port Matrix

The wipe port matrix is a matrix of wipe port matrix cell coordinates, produced by dividing the wipe port into a number of rows and columns, as determined by the divisionsY and divisionsX state properties, respectively.

The coordinates of the wipe port matrix are used in determining the coordinates of the pane seed and pane final for each pane of the pane stack.

2.2.5. Wipe Port Matrix Cell

Each cell in the wipe port matrix is termed a wipe port matrix cell.

The height of a wipe port matrix cell is influenced by the number of vertical divisions (as specified by the divisionsY state property), as well as the value of the firstPaneSizeY property. Similarly, the width of a wipe port matrix cell is influenced by the number of horizontal divisions (as specified by the divisionsX state property), as well as the value of the firstPaneSizeX property.

The coordinates of each wipe port matrix cell influences the coordinates of the pane seed and the pane final for each pane of the pane stack, factoring in the effects of the paneSeedContext and allToFull state properties.

2.2.6. Pane Seed

The pane seed is the initial coordinates for a pane.

The pane seed coordinates are calculated by combining the coordinates of the pane seed context and the values of the alignX, alignY, paneSeedSizeX, and paneSeedSizeY state properties. Specifically, the width of the pane seed is calculated as a percentage of the width of the pane seed context (as specified by the paneSeedSizeX state property), and the height of the pane seed is calculated as a percentage of the height of the pane seed context (as specified by the paneSeedSizeY state property).

Moreover, the pane seed is positioned within the pane seed context using the alignX and alignY state properties, where these properties are floating point numbers in the range of 0 to 1 and where the value 0 represents left and top alignment, the value 1 represents right and bottom alignment, and the value .5 represents center alignment.

2.2.7. Pane Seed Context

The pane seed context is the coordinates that provide the context for calculating the pane seed coordinates.

Each pane is associated with a corresponding wipe port matrix cell. The paneSeedContext state property lets one specify the pane seed context for a pane as a blend between the coordinates of a pane's corresponding wipe port matrix cell and the coordinates of the wipe port. When paneSeedContext is set to 0, then the pane seed context will be exactly the coordinates of pane's corresponding wipe port matrix cell. When paneSeedContext is set to 100, then the pane seed context will be exactly the coordinates of the wipe port. And when paneSeedContext is set to 50, then the pane seed context will be calculated as a 50% blend between the coordinates of the pane's corresponding wipe port matrix cell and the coordinates of the wipe port.

2.2.8. Pane Final

The pane final is the final coordinates for a pane.

The pane final coordinates are calculated by combining the coordinates of a pane's corresponding wipe port matrix cell with the coordinates of the wipe port and the value of the allToFull state property. Specifically, the width of the pane final is calculated as the blend of the width of a pane's corresponding wipe port matrix cell and the width of the wipe port, as specified by the allToFull state property. Similarly, the height of the pane final is calculated as the blend of the height of a pane's corresponding wipe port matrix cell and the height of the wipe port, as specified by the allToFull state property.

When allToFull is set to 0, then the pane final coordinates will be exactly the coordinates of pane's corresponding wipe port matrix cell. When allToFull is set to 100, then the pane final coordinates will be exactly the coordinates of the wipe port. And when allToFull is set to 50, then the pane final coordinates will be calculated as a 50% blend between the coordinates of the pane's corresponding wipe port matrix cell and the coordinates of the wipe port.

2.2.9. Value Range Declaration

The values for certain state properties can be specified with a value range declaration that allows a range of values to be specified, so that each pane in a pane stack can have a different value along a continous range.

This facility allows for more sophisticated effects, since it allows for controlled variation in the animations of all the panes that comprise the wipe effect. Some of the more compelling wipe effect presets available in the Uize.Widget.ImageWipe.xPresets extension take advantage of this mechanism for some of their settings.

The syntax for a value range declaration is as follows...

{
  start:startValueNUM,  // the start value
  end:endValueNUM,      // the end value
  keyedTo:keyedToSTR,   // 'row' | 'column' | 'pane' | 'random'
  wraps:wrapsINT,       // optional, default is 1
  wrapMode:wrapModeSTR  // optional, 'triangle' | 'sawtooth' (default)
}

2.2.9.1. start

A number, specifying the start value for the range.

2.2.9.2. end

A number, specifying the end value for the range.

2.2.9.3. keyedTo

A string, specifying what the interpolation between the start value and end value should be keyed to.

the value 'row' means that the interpolation will be keyed to the row number of the current pane for which the value is being calculated, where the interpolated value for panes in the first row will be the specified start value, and the interpolated value for panes in the last row will be the specified end value. This is useful when specifying a value range for state properties that apply to the Y-axis, such as alignY and paneSeedSizeY, although there's nothing to say that you couldn't key the interpolation of an X-axis state property to row number.
the value 'column' means that the interpolation will be keyed to the column number of the current pane for which the value is being calculated, where the interpolated value for panes in the first column will be the specified start value, and the interpolated value for panes in the last column will be the specified end value. This is useful when specifying a value range for state properties that apply to the X-axis, such as alignX and paneSeedSizeX, although there's nothing to say that you couldn't key the interpolation of a Y-axis state property to column number.
the value 'pane' means that the interpolation will be keyed to the pane number of the current pane for which the value is being calculated, where the interpolated value for the first pane will be the specified start value, and the interpolated value for the last pane will be the specified end value. When the value 1 is specified for the divisionsY state property (i.e. only one row), then the values 'column' and 'pane' for keyedTo will have the same effect. Similarly, when the value 1 is specified for the divisionsX state property (i.e. only one column), then the values 'row' and 'pane' for keyedTo will have the same effect.
the value 'random' means that the interpolation will be keyed to a random number, so that the value being calculated for each pane will be some random blend between the start value and the end value. NOTE: When using this value, the wraps and wrapMode properties become pretty much meaningless.

2.2.9.4. wraps

A positive integer, specifying the number of times that the value range should repeat across the series of the panes.

By default, the value range is not repeated across the series of the panes (or, put another way, there is only one repeat). When a value greater than 1 is specified for this optional property, then the value range will be repeated in either a sawtooth wave pattern or a triangular wave pattern across the series of panes, as determined by the value of the optional wrapMode property.

NOTES

The effect of this property's value is defeated by specifying the value 'random' for the keyedTo property.

2.2.9.5. wrapMode

A string, specifying the wrap mode that should be used when a value greater than 1 is specified for the wraps property.

the default value of 'sawtooth' means that the value range will be repeated in a sawtooth wave pattern. This means that each time when the end value is reached, the interpolated value will wrap back around to the start value.
the value 'triangle' means that the value range will be repeated in a triangular wave pattern. This means that each time when the end value is reached, the direction of interpolated values will change and head back in the direction of the start value. And, each time when the start value is reached, the direction of interpolated values will change and head back in the direction of the end value. The interpolated value will "bounce" back and forth like this between the start value and the end value for as many wraps as are specified in the wraps property.

NOTES

The effect of this property's value is defeated by specifying the value 'random' for the keyedTo property.
The value of this property is not meaningful if the wraps property is not specified, or if its value is 1.

State properties of this class that support a value range declaration include: allToFull, alignX, alignY, paneSeedSizeX, paneSeedSizeY, and paneSeedContext.

3. Instance Properties

3.1. fade

An instance of the Uize.Fade class that drives the animation for the image wipe effect.

This property allows access to the fade instance that drives the wipe animation. This allows us to modify properties of the animation, such as the curve and any of the other state properties supported by the Uize.Fade class.

3.2. showConfirm

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

3.3. showInform

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4. State Properties

4.1. alignX

A number in the range of 0 to 1, specifying the horizontal alignment of each pane seed.

A value of 0 specifies that a pane seed should be aligned to the left of its pane seed context, a value of 1 specifies that a pane seed should be right aligned, and a value of .5 specifies that a pane seed should be center aligned.

NOTES

the value for this property may also be a value range declaration
if the value of the paneSeedSizeX state property is 100, then the alignX property will have no effect
see the companion alignY state property
the initial value is {start:1,end:0,keyedTo:'column'}

IMPLEMENTATION INFO

this feature was introduced in this module

4.2. alignY

A number in the range of 0 to 1, specifying the vertical alignment of each pane seed.

A value of 0 specifies that a pane seed should be aligned to the top of its pane seed context, a value of 1 specifies that a pane seed should be bottom aligned, and a value of .5 specifies that a pane seed should be center aligned.

NOTES

the value for this property may also be a value range declaration
if the value of the paneSeedSizeY state property is 100, then the alignY property will have no effect
see the companion alignX state property
the initial value is .5

IMPLEMENTATION INFO

this feature was introduced in this module

4.3. allToFull

A number in the range of 0 to 100, representing the balance between the pane seed context coordinates and the wipe port coordinates that should be used when calculating the pane final coordinates for each pane.

A value of 0 means that the pane final coordinates for a pane will be the pane seed context coordinates, a value of 100 means that the pane final coordinates will be the wipe port coordinates, and a value of 50 will create pane final coordinates that are a blend of 50% the pane seed context coordinates and 50% the wipe port coordinates.

NOTES

the value for this property may also be a value range declaration
the initial value is 0

IMPLEMENTATION INFO

this feature was introduced in this module

4.4. background

A string, specifying an optional background style that should be used for each pane.

NOTES

the initial value is undefined

IMPLEMENTATION INFO

this feature was introduced in this module

4.5. built

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.6. busy

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.7. busyInherited

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.8. busyParentTickle

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.9. children

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.10. container

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.11. dissolve

A boolean, specifying whether or not each pane should fade in opacity - from being completely transparent to being completely opaque - during the course of its animation.

When the value false is specified for this property, only the crop rect coordinates of a pane will be updated during its animation, but when the value true is specified it will be faded in as well. The latter setting allows for more sophisticated effects, although there is likely to be a cost in performance and the wipe may not appear as smooth - depending on the browser and the speed of the system it is running on.

NOTES

the initial value is false

IMPLEMENTATION INFO

this feature was introduced in this module

4.12. divisionsX

A positive integer, specifying the number of horizontal divisions in the wipe port matrix.

NOTES

see the companion divisionsY state property
the initial value is 16

IMPLEMENTATION INFO

this feature was introduced in this module

4.13. divisionsY

A positive integer, specifying the number of vertical divisions in the wipe port matrix.

NOTES

see the companion divisionsX state property
the initial value is 16

IMPLEMENTATION INFO

this feature was introduced in this module

4.14. duration

A positive integer, specifying the duration (in milliseconds) for the wipe effect.

NOTES

the initial value is 3000

IMPLEMENTATION INFO

this feature was introduced in this module

4.15. enabled

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.16. enabledInherited

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.17. enabledParentTickle

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.18. firstPaneSizeX

A number in the range of 0 to 100, specifying the width of the first wipe port matrix column as a percentage of the normal column width.

Normal column width is defined as the width of the wipe port divided by the number of columns (as specified by the divisionsX state property). If the first wipe port matrix column width is smaller or greater than the normal column width, then the difference will be distributed amongst the remaining columns to compenstate - according to a sigma series distribution. This allows us to bias the widths towards the first column or towards the last column.

For example, specifying a value of 10 for the firstPaneSizeX state property means that the missing 90% of the normal column width for the first wipe port matrix column must be distributed across the remaining columns. In order for this distribution to look natural, the width would grow gradually from left to right. Consider the following representations...

EVEN COLUMN WIDTH

|  6   |  6   |  6   |  6   |  6   |  6   |  6   |  6   |  6   |  6   |  6   |

This representation depicts a wipe port with a width of 66 and with 11 horizontal divisions (i.e. divisionsX is set to 6), so the normal width for each wipe port matrix column would be 6 (i.e. 66 / 11).

To achieve the above distribution, firstPaneSizeX would be set to 100 (i.e. 6 / 6), since the width of the first wipe port matrix column is 100% of the normal column width.

SIGMA DISTRIBUTION

|1|2 | 3 | 4  |  5  |  6   |   7   |   8    |    9    |    10    |     11    |

To achieve the above distribution, firstPaneSizeX would be set to 16.666 (i.e. 1 / 6), since the width of the first wipe port matrix column is 16.666% of the normal column width.

ANOTHER SIGMA DISTRIBUTION

|     11    |    10    |    9    |   8    |   7   |  6   |  5  | 4  | 3 |2 |1|

To achieve the above distribution, firstPaneSizeX would be set to 183.333 (i.e. 11 / 6), since the width of the first wipe port matrix column is 183.333% of the normal column width.

NOTES

see the companion firstPaneSizeY state property
the initial value is 100

IMPLEMENTATION INFO

this feature was introduced in this module

4.19. firstPaneSizeY

A number in the range of 0 to 100, specifying the height of the first wipe port matrix row as a percentage of the normal row height.

Normal row height is defined as the height of the wipe port divided by the number of rows (as specified by the divisionsY state property). If the first wipe port matrix row height is smaller or greater than the normal row height, then the difference will be distributed amongst the remaining rows to compenstate - according to a sigma series distribution. This allows us to bias the heights towards the first row or towards the last row.

For a more in-depth explanation, and for some illustrations, consult the reference for the firstPaneSizeX state property, since the firstPaneSizeY property behaves in exactly the same way as the firstPaneSizeX property, excepting that it applies to the Y-axis rather than the X-axis.

NOTES

see the companion firstPaneSizeX state property
the initial value is 100

IMPLEMENTATION INFO

this feature was introduced in this module

4.20. html

IMPLEMENTATION INFO

this is an override of an inherited feature (implementation is in this module, first introduced in Uize.Widget)

4.21. idPrefix

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.22. idPrefixConstruction

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.23. insertionMode

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.24. localized

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.25. name

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.26. nodeMap

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.27. paneOrderScheme

A string, specifying an ordering scheme for the panes that comprise the wipe effect.

When a non-zero value is specified for the paneProgressDelay state property, then the value of the paneOrderScheme state property will determine the order in which the animation of the panes is started, making a wide array of interesting effects possible.

The value for this property can be any of the values supported for the reorderingModeSTR parameter of the Uize.Array.Order.reorder static method, including 'normal', 'reverse', 'jumbled', 'inside out', and 'outside in'.

NOTES

when the paneProgressDelay state property is set to 0, then the paneOrderScheme property will have no noticeable effect
the initial value is 'inside out'

IMPLEMENTATION INFO

this feature was introduced in this module

4.28. paneProgressDelay

A number in the range of 0 to 100, representing the percentage of the animation of a pane that should be complete before the animation of the next pane is started.

When the value 0 is specified, the animation for all panes will be started at the same time. When the value 100 is specified, the animation for the next pane will only be started when the animation of the current pane is entirely complete. And when the value 50 is specified, then the animation of the next pane will be started when the animation of the current pane is 50% complete.

Regardless of the value of this property, the entire wipe effect will always take the same amount of time (as specified by the duration state property). This means that as you increase the value of this property, the animation time per pane will be decreased. At a value of 0, all panes will take the entire duration of the wipe to animate. And, at a value of 100, the animation time for each pane will be the entire duration of the wipe divided by the total number of panes.

When this property is set to the value 0, then the paneOrderScheme state property will have no noticeable effect. Conversely, when this property is set to a non-zero value, then the value of the paneOrderScheme property will determine the order in which the panes are animated.

NOTES

the initial value is 10

IMPLEMENTATION INFO

this feature was introduced in this module

4.29. paneSeedContext

A number in the range of 0 to 100, representing the balance between the wipe port matrix cell coordinates and the wipe port coordinates that should be used when calculating the pane seed context coordinates for each pane.

A value of 0 means that the pane seed context for calculating a pane's coordinates will be the wipe port matrix cell, a value of 100 means that the context will be the wipe port, and a value of 50 will produce a context whose coordinates are a blend of 50% the wipe port matrix cell coordinates and 50% the wipe port coordinates.

NOTES

the value for this property may also be a value range declaration
the initial value is 0

IMPLEMENTATION INFO

this feature was introduced in this module

4.30. paneSeedSizeX

A number in the range of 0 to 100, specifying the width for the pane seed as a percentage of the width of the pane seed context.

A value of 0 means that the pane seed's width will be 0, a value of 100 means that its width will be the full width of the pane seed context, and a value of 50 means that its width will be 50% of the width of the pane seed context.

NOTES

the value for this property may also be a value range declaration
see the companion paneSeedSizeY state property
the initial value is 0

IMPLEMENTATION INFO

this feature was introduced in this module

4.31. paneSeedSizeY

A number in the range of 0 to 100, specifying the height for the pane seed as a percentage of the height of the pane seed context.

A value of 0 means that the pane seed's height will be 0, a value of 100 means that its height will be the full height of the pane seed context, and a value of 50 means that its height will be 50% of the height of the pane seed context.

NOTES

the value for this property may also be a value range declaration
see the companion paneSeedSizeX state property
the initial value is 100

IMPLEMENTATION INFO

this feature was introduced in this module

4.32. parent

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

4.33. src

A string, representing the URL of the current image.

After setting this property to a new value, the new image will first be loaded in each pane of the pane stack used for revealing the next image. Once it has been loaded, the wipe effect will be initiated to reveal the new image.

NOTES

this property can also be accessed through the alias value
the initial value is undefined

IMPLEMENTATION INFO

this feature was introduced in this module

4.34. value

An alias to the src state property, establishing the src property as the public value interface for this class.

4.35. wired

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5. Instance Methods

5.1. addChild

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.2. addChildren

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.3. ajax

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.4. buildHtml

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.5. callInherited

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.6. childHtml

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.7. childId

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.8. confirm

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.9. displayNode

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.10. fire

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

5.11. flushNodeCache

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.12. get

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

5.13. getContainer

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.14. getHtml

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.15. getInherited

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.16. getNode

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.17. getNodeStyle

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.18. getNodeValue

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.19. getProvider

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.20. globalizeNode

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.21. inform

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.22. injectNodeHtml

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.23. insertOrWireUi

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.24. insertUi

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.25. is

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

5.26. isMet

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

5.27. kill

Inherited from Uize.Widget, but introduced in Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Class)

5.28. localize

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.29. met

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

5.30. nodeId

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.31. onChange

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

5.32. once

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

5.33. prepareForNextItem

IMPLEMENTATION INFO

this feature was introduced in this module

5.34. removeChild

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.35. removeNode

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.36. removeUi

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.37. set

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

5.38. setCurrentItem

IMPLEMENTATION INFO

this feature was introduced in this module

5.39. setInherited

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.40. setNodeClipRect

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.41. setNodeInnerHtml

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.42. setNodeOpacity

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.43. setNodeProperties

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.44. setNodeStyle

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.45. setNodeValue

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.46. showNode

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.47. toggle

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

5.48. unmet

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

5.49. unwire

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

5.50. unwireNode

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.51. unwireNodeEventsByMatch

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.52. unwireUi

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.53. updateUi

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.54. valueOf

this is an override of an inherited feature (implementation is in this module, first introduced in Uize.Class)

IMPLEMENTATION INFO

5.55. whenever

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

5.56. wire

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)

5.57. wireNode

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)

5.58. wireUi

IMPLEMENTATION INFO

this is an override of an inherited feature (implementation is in this module, first introduced in Uize.Widget)

6. Static Methods

6.1. Uize.Widget.ImageWipe.alphastructor

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.2. Uize.Widget.ImageWipe.declare

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.3. Uize.Widget.ImageWipe.doMy

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.4. Uize.Widget.ImageWipe.dualContextMethods

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.5. Uize.Widget.ImageWipe.dualContextProperties

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.6. Uize.Widget.ImageWipe.fire

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.7. Uize.Widget.ImageWipe.get

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.8. Uize.Widget.ImageWipe.getBlankImageUrl

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)
this static feature is inherited by subclasses

6.9. Uize.Widget.ImageWipe.instanceMethods

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.10. Uize.Widget.ImageWipe.instanceProperties

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.11. Uize.Widget.ImageWipe.mixins

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.12. Uize.Widget.ImageWipe.omegastructor

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.13. Uize.Widget.ImageWipe.set

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.14. Uize.Widget.ImageWipe.singleton

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.15. Uize.Widget.ImageWipe.spawn

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)
this static feature is inherited by subclasses

6.16. Uize.Widget.ImageWipe.stateProperties

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.17. Uize.Widget.ImageWipe.staticMethods

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.18. Uize.Widget.ImageWipe.staticProperties

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.19. Uize.Widget.ImageWipe.subclass

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.20. Uize.Widget.ImageWipe.toggle

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.21. Uize.Widget.ImageWipe.treeInheritedStateProperties

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)
this static feature is inherited by subclasses

6.22. Uize.Widget.ImageWipe.unwire

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

6.23. Uize.Widget.ImageWipe.wire

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

7. Static Properties

7.1. Uize.Widget.ImageWipe.busyParentTickle

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)
this static feature is inherited by subclasses

7.2. Uize.Widget.ImageWipe.enabledParentTickle

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)
this static feature is inherited by subclasses

7.3. Uize.Widget.ImageWipe.isWired

Inherited from Uize.Widget.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Widget, first introduced in Uize.Widget)
this static feature is inherited by subclasses

7.4. Uize.Widget.ImageWipe.moduleName

IMPLEMENTATION INFO

this is an override of an inherited feature (implementation is in this module, first introduced in Uize.Class)
this static feature is inherited by subclasses

7.5. Uize.Widget.ImageWipe.nonInheritableStatics

IMPLEMENTATION INFO

this is an override of an inherited feature (implementation is in this module, first introduced in Uize.Class)
this static feature is not inherited by subclasses

7.6. Uize.Widget.ImageWipe.pathToResources

Inherited from Uize.Class.

IMPLEMENTATION INFO

this is an inherited feature (implementation is in Uize.Class, first introduced in Uize.Class)
this static feature is inherited by subclasses

7.7. Uize.Widget.ImageWipe.undefined

IMPLEMENTATION INFO

this is an override of an inherited feature (implementation is in this module, first introduced in Uize.Widget)
this static feature is inherited by subclasses