Class: UWA.Fx

UWA/Fx. UWA.Fx

new UWA.Fx(element, options)

Simple cross-platform API for DOM elements animation/effects.

Available Events
Event Description
onStart Triggered when the animation starts
onAnimate Triggered on each animation frame
onComplete Triggered when the animation ends
Example
// Create the element to animate
var myElement = UWA.createElement('div');

// Initialize FX with myElement and some options
var fx = new UWA.Fx(myElement, {
   duration: 250,
   transition: 'bounceIn',
   events: {
       onStart: function () {
           // Callback trigered when the animation starts
       },
       onAnimate: function () {
           // Callback trigered on each animation frame
       },
       onComplete: function () {
           // Callback trigered when the animation ends
       }
   }
});

// Run Fx from a range to another
fx.start({
   backgroundColor: ['#FF0000', '#0000FF'],
   padding: [10, 20],
   height: [10, 200],
   width: [10, 200],
   opacity: [0, 1]
});

// Run Fx from current values to new one
fx.start({
   backgroundColor: '#FF0000',
   padding: 10,
   height: 10,
   width: 10,
   opacity: 0
});

// OR
fx.fade();

// OR
fx.tween('color', '#0000FF', '#FF0000');
Parameters
Name Type Description
element Element

A valid DOM element
options Object

Options hash or a option/value pair.

Properties
Name Type Argument Default Description
transition String <optional>
 'linear'

The equation name to use for the effect
duration Number <optional>
 500

The duration of the effect in ms
unit String <optional>
 'px'

The unit, e.g. 'px', 'em', or '%'
wait Boolean <optional>
 false

Wait that the current animation complete before start new one

Mixes In

  • UWA.Class.Options
  • UWA.Class.Timed
  • UWA.Class.Events

Index

Members

Methods

Members

defaultOptions

The default options values.

element

The current element affected by animation.

from

The animation initial values.

to

The animation final values.

current

The animation current values.

<static> Transitions :Object

A collection of tweening transitions for use with the UWA.Fx classes.

Type
  • Object
Properties:
Name Type Description
linear Function

Displays a linear transition
quadIn Function

Displays a quadratic transition in
quadOut Function

Displays a quadratic transition out
quadInOut Function

Displays a quadratic transition in and out
cubicIn Function

Displays a cubicular transition in
cubicOut Function

Displays a cubicular transition out
cubicInOut Function

Displays a cubicular transition in and out
quartIn Function

Displays a quartetic transition in
quartOut Function

Displays a quartetic transition out
quartInOut Function

Displays a quartetic transition in and out
quintIn Function

Displays a quintic transition in
quintOut Function

Displays a quintic transition out
quintInOut Function

Displays a quintic transition in and out
sineIn Function

Displays a sineousidal transition in
sineOut Function

Displays a sineousidal transition out
sineInOut Function

Displays a sineousidal transition in and out
expoIn Function

Displays a exponential transition in
expoOut Function

Displays a exponential transition out
expoInOut Function

Displays a exponential transition in and out
circIn Function

Displays a circular transition in
circOut Function

Displays a circular transition out
circInOut Function

Displays a circular transition in and out
backIn Function

Makes the transition go back in
backOut Function

Makes the transition go back out
backInOut Function

Makes the transition go back, then all forth
elasticIn Function

Makes the transition as elastic curve in
elasticOut Function

Makes the transition as elastic curve out
elasticInOut Function

Makes the transition as elastic curve in and out
bounceIn Function

Makes the transition bouncy in
bounceOut Function

Makes the transition bouncy out
bounceInOut Function

Makes the transition bouncy in and out
See:
To Do:
  • http://greweb.me/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/
  • http://www.greensock.com/customease/

Methods

tween(property, from, to) → {this}

Start the animation of one CSS property.

Parameters
Name Type Description
property String

The css property to set the value to
from String

The css property value to set at start
to String

The css property value to set at the end
Returns
Type
this

fade(how) → {this}

Element shortcut method for tween with opacity. Useful for fading an Element in and out or to a certain opacity level.

Parameters
Name Type Description
how String

The opacity level as a number or string representation. Possible values include:

  • in Fade the element to 100% opacity.
  • out Fade the element to 0% opacity.
  • show Immediately set the element's opacity to 100%.
  • hide Immediately set the element's opacity to 0%.
  • toggle If visible, fade the element out, otherwise, fade it in.
  • (float) A float value between 0 and 1. Will fade the element to this opacity.
Returns
Type
this

start(properties) → {this}

Start the animation of multiple CSS properties at once.

Parameters
Name Type Description
properties Object

An object of key/value pairs of CSS attributes to change or a string representing a CSS selector which can be found within the CSS of the page.

If only one value is given for any CSS property, the transition will be from the current value of that property to the value given.
Returns
Type
this

pause() → {this}

Pause the current animation.

Returns
Type
this

stop() → {this}

Stop the current animation and clear next steps.

Returns
Type
this

setSteps(properties)

Populate to and from based on the properties parameter.

Parameters
Name Type Description
properties Object

An object of key/value pairs of CSS attributes to change or a string representing a CSS selector which can be found within the CSS of the page.

If only one value is given for any CSS property, the transition will be from the current value of that property to the value given.

compute(from, to) → {Number}

Compute the step value using from, to parameters, transition options, currentTime and duration.

Parameters
Name Type Description
from Number

The start value
to Number

The end value
Returns

Computed value result.

Type
Number

animate()

Run the animation steps loop.

onAnimate(element, from, to)

Called on each step of the animation in order to perform the animation step on the element using <compute> on the to and from parameters properties value pair to get the current value of the properties to animate.

Parameters
Name Type Description
element Element

The element attached
from Number

The start value
to Number

The end value