1. Introduction

The Uize.Widget.Swap.xPresets module extends the Uize.Widget.Swap class by adding a wide assortment of very imaginative swap animation effect presets.

DEVELOPERS: Chris van Rensburg

1.1. Using the Presets

The Uize.Widget.Swap.xPresets module exposes its swap effect presets through the Uize.Widget.Swap.presets static property.

Each property of the Uize.Widget.Swap.presets object is a swap effect preset, where the name of the property is the effect preset name, and where the value is an object containing values for various state properties of the Uize.Widget.Swap class.

Consider the value of the Uize.Widget.Swap.presets.fadeOutFadeIn preset...

{
  crossFade:true,
  crossFadeSize:0,
  crossFadeAlign:.5,
  dissolve:true,
  viewContentAlignX:'none',
  viewContentAlignY:'none',
  viewSeedSizeX:1,
  viewSeedSizeY:1,
  viewSeedAlignX:.5,
  viewSeedAlignY:.5
}

To use this preset, simply use it to set the state properties of an instance of a Uize.Widget.Swap subclass using the set instance method, as follows...

myImageSwap.set (Uize.Widget.Swap.presets.fadeOutFadeIn);

In the above example, myImageSwap is an instance of the Uize.Widget.Swap.Image class, which is a subclass of the Uize.Widget.Swap class.

1.2. Examples

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

Image Cycle - Create a simple JavaScript slideshow experience with the cycling image swap widget. Each image is revealed with a different swap / transition effect.

SEARCH FOR EXAMPLES

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

1.3. Implementation Info

The Uize.Widget.Swap.xPresets module defines the Uize.Widget.Swap.xPresets extension module under the Uize.Widget.Swap namespace.

1.3.1. Features Introduced in This Module

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

STATIC PROPERTIES

Uize.Widget.Swap.xPresets.moduleName | Uize.Widget.Swap.xPresets.pathToResources

1.3.2. Features Overridden in This Module

No features have been overridden in this module.

1.3.3. Features Inherited From Other Modules

This module has no inherited features.

1.3.4. Modules Directly Under This Namespace

There are no modules directly under this namespace.

1.3.5. Unit Tests

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

2. Static Properties

2.1. Uize.Widget.Swap.presets

An object, containing a wide variety of interesting swap effect presets.

The full list of swap preset effects is listed below...

2.1.1. Uize.Widget.Swap.presets.crossFade

A classic crossfade effect, where the new item fades in on top of the current item.

2.1.2. Uize.Widget.Swap.presets.fadeOutFadeIn

The current item fades out fully before the new item fades in. Fade out time for the current item and fade in time for the new item are equal and are both half the overal duration for the swap effect.

2.1.3. Uize.Widget.Swap.presets.fadeOutPauseThenFadeIn

The current item fades out very quickly, there is a slight pause, and then the new item fades in (slower than the fade out of the current item, but still 4/10 the overal duration for the swap effect).

2.1.4. Uize.Widget.Swap.presets.fadeWipeFromLeft

The new item is revealed with a horizontal wipe reveal that starts from the left edge and that also fades in as it progresses.

2.1.5. Uize.Widget.Swap.presets.fadeWipeFromRight

The new item is revealed with a horizontal wipe reveal that starts from the right edge and that also fades in as it progresses.

2.1.6. Uize.Widget.Swap.presets.fadeWipeHorizontalFromCenter

The new item is revealed with a horizontal wipe reveal that starts from the center and that expands outwards towards the left and right edges and that also fades in as it progresses.

2.1.7. Uize.Widget.Swap.presets.fadeWipeFromTop

The new item is revealed with a horizontal wipe reveal that starts from the top edge and that also fades in as it progresses.

2.1.8. Uize.Widget.Swap.presets.fadeWipeFromBottom

The new item is revealed with a horizontal wipe reveal that starts from the bottom edge and that also fades in as it progresses.

2.1.9. Uize.Widget.Swap.presets.fadeWipeVerticalFromCenter

The new item is revealed with a vertical wipe reveal that starts from the center and that expands outwards towards the top and bottom edges and that also fades in as it progresses.

2.1.10. Uize.Widget.Swap.presets.fadeSlideInFromLeft

The new item slides in from the left edge and also fades in as it slides into place to eventually fully cover the current item.

2.1.11. Uize.Widget.Swap.presets.fadeSlideInFromRight

The new item slides in from the right edge and also fades in as it slides into place to eventually fully cover the current item.

2.1.12. Uize.Widget.Swap.presets.fadeSlideInFromTop

The new item slides in from the top edge and also fades in as it slides into place to eventually fully cover the current item.

2.1.13. Uize.Widget.Swap.presets.fadeSlideInFromBottom

The new item slides in from the bottom edge and also fades in as it slides into place to eventually fully cover the current item.

2.1.14. Uize.Widget.Swap.presets.fadeSlideInFromTopLeft

The new item slides in from the top left corner and also fades in as it slides into place to eventually fully cover the current item.

2.1.15. Uize.Widget.Swap.presets.fadeSlideInFromTopRight

The new item slides in from the top right corner and also fades in as it slides into place to eventually fully cover the current item.

2.1.16. Uize.Widget.Swap.presets.fadeSlideInFromBottomLeft

The new item slides in from the bottom left corner and also fades in as it slides into place to eventually fully cover the current item.

2.1.17. Uize.Widget.Swap.presets.fadeSlideInFromBottomRight

The new item slides in from the bottom right corner and also fades in as it slides into place to eventually fully cover the current item.

2.1.18. Uize.Widget.Swap.presets.fadeSlideOutSlideInLeft

The current item slides out towards the left edge, fading out as it goes, and then the new item slides in from the left edge, fading in as it goes. Slide out time for the current item and slide in time for the new item are equal and are both half the overal duration for the swap effect.

2.1.19. Uize.Widget.Swap.presets.fadeSlideOutSlideInRight

The current item slides out towards the right edge, fading out as it goes, and then the new item slides in from the right edge, fading in as it goes. Slide out time for the current item and slide in time for the new item are equal and are both half the overal duration for the swap effect.

2.1.20. Uize.Widget.Swap.presets.fadeSlideOutSlideInTop

The current item slides out towards the top edge, fading out as it goes, and then the new item slides in from the top edge, fading in as it goes. Slide out time for the current item and slide in time for the new item are equal and are both half the overal duration for the swap effect.

2.1.21. Uize.Widget.Swap.presets.fadeSlideOutSlideInBottom

The current item slides out towards the bottom edge, fading out as it goes, and then the new item slides in from the bottom edge, fading in as it goes. Slide out time for the current item and slide in time for the new item are equal and are both half the overal duration for the swap effect.

2.1.22. Uize.Widget.Swap.presets.fadeSlideOutSlideInTopLeft

The current item slides out towards the top left corner, fading out as it goes, and then the new item slides in from the top left corner, fading in as it goes. Slide out time for the current item and slide in time for the new item are equal and are both half the overal duration for the swap effect.

2.1.23. Uize.Widget.Swap.presets.fadeSlideOutSlideInTopRight

The current item slides out towards the top right corner, fading out as it goes, and then the new item slides in from the top right corner, fading in as it goes. Slide out time for the current item and slide in time for the new item are equal and are both half the overal duration for the swap effect.

2.1.24. Uize.Widget.Swap.presets.fadeSlideOutSlideInBottomLeft

The current item slides out towards the bottom left corner, fading out as it goes, and then the new item slides in from the bottom left corner, fading in as it goes. Slide out time for the current item and slide in time for the new item are equal and are both half the overal duration for the swap effect.

2.1.25. Uize.Widget.Swap.presets.fadeSlideOutSlideInBottomRight

The current item slides out towards the bottom right corner, fading out as it goes, and then the new item slides in from the bottom right corner, fading in as it goes. Slide out time for the current item and slide in time for the new item are equal and are both half the overal duration for the swap effect.

2.1.26. Uize.Widget.Swap.presets.wipeOutWipeInLeft

The current item wipes out towards the left edge, and then the new item wipes in from the left edge. Wipe out time for the current item and wipe in time for the new item are equal and are both half the overal duration for the swap effect.

2.1.27. Uize.Widget.Swap.presets.wipeOutWipeInRight

The current item wipes out towards the right edge, and then the new item wipes in from the right edge. Wipe out time for the current item and wipe in time for the new item are equal and are both half the overal duration for the swap effect.

2.1.28. Uize.Widget.Swap.presets.wipeOutWipeInTop

The current item wipes out towards the top edge, and then the new item wipes in from the top edge. Wipe out time for the current item and wipe in time for the new item are equal and are both half the overal duration for the swap effect.

2.1.29. Uize.Widget.Swap.presets.wipeOutWipeInBottom

The current item wipes out towards the bottom edge, and then the new item wipes in from the bottom edge. Wipe out time for the current item and wipe in time for the new item are equal and are both half the overal duration for the swap effect.

2.1.30. Uize.Widget.Swap.presets.wipeOutWipeInTopLeft

The current item wipes out towards the top left corner, and then the new item wipes in from the top left corner. Wipe out time for the current item and wipe in time for the new item are equal and are both half the overal duration for the swap effect.

2.1.31. Uize.Widget.Swap.presets.wipeOutWipeInTopRight

The current item wipes out towards the top right corner, and then the new item wipes in from the top right corner. Wipe out time for the current item and wipe in time for the new item are equal and are both half the overal duration for the swap effect.

2.1.32. Uize.Widget.Swap.presets.wipeOutWipeInBottomLeft

The current item wipes out towards the bottom left corner, and then the new item wipes in from the bottom left corner. Wipe out time for the current item and wipe in time for the new item are equal and are both half the overal duration for the swap effect.

2.1.33. Uize.Widget.Swap.presets.wipeOutWipeInBottomRight

The current item wipes out towards the bottom right corner, and then the new item wipes in from the bottom right corner. Wipe out time for the current item and wipe in time for the new item are equal and are both half the overal duration for the swap effect.

2.1.34. Uize.Widget.Swap.presets.wipeOutWipeInHorizontalCenter

The current item wipes out horizontally from the left and right edges towards a sliver in the center, and then the new item wipes in horizontally from the same sliver in the center and expands outwards towards the left and right edges.

2.1.35. Uize.Widget.Swap.presets.wipeOutWipeInVerticalCenter

The current item wipes out vertically from the top and bottom edges towards a sliver in the center, and then the new item wipes in vertically from the same sliver in the center and expands outwards towards the top and bottom edges.

2.1.36. Uize.Widget.Swap.presets.horizontalCrossSlideFromLeft

The new item slides in horizontally from the center towards the right edge at the same as it grows from a sliver to occupy the entire port, while the current item slides out towards the left edge as it shrinks down to a sliver, crossing paths as they go to produce a kind of sliding doors illusion.

2.1.37. Uize.Widget.Swap.presets.horizontalCrossSlideFromRight

The new item slides in horizontally from the center towards the left edge at the same as it grows from a sliver to occupy the entire port, while the current item slides out towards the right edge as it shrinks down to a sliver, crossing paths as they go to produce a kind of sliding doors illusion.

2.1.38. Uize.Widget.Swap.presets.verticalCrossSlideFromTop

The new item slides in vertically from the center towards the bottom edge at the same as it grows from a sliver to occupy the entire port, while the current item slides out towards the top edge as it shrinks down to a sliver, crossing paths as they go to produce a kind of sliding doors illusion.

2.1.39. Uize.Widget.Swap.presets.verticalCrossSlideFromBottom

The new item slides in vertically from the center towards the top edge at the same as it grows from a sliver to occupy the entire port, while the current item slides out towards the bottom edge as it shrinks down to a sliver, crossing paths as they go to produce a kind of sliding doors illusion.

2.1.40. Uize.Widget.Swap.presets.closeToCenterOpenFromCenter

The current item wipes out to a point in the center, and then the new item wipes in from the same point in the center. Wipe out time for the current item and wipe in time for the new item are equal and are both half the overal duration for the swap effect.

2.1.41. Uize.Widget.Swap.presets.poofPauseThenOpenFromCenter

The current item wipes out very quickly to a point in the center, fading out as it progresses, then there is a slight pause, and then the new item wipes in from the same point in the center (slower than the wipe out of the current item, but still less than half the overal duration for the swap effect), fading in as it progresses.

2.1.42. Uize.Widget.Swap.presets.centerOpenCloseCrossFade

The current item wipes out to a point in the center, fading out as it progresses, at the same time as the new item wipes in from the same point in the center, fading in as it progresses. The wipe out and wipe in cross over each other, producing a pleasing effect.

2.2. Uize.Widget.Swap.xPresets.moduleName

IMPLEMENTATION INFO

this feature was introduced in this module

2.3. Uize.Widget.Swap.xPresets.pathToResources