Clear Up
SharpKit Reference

Ext.fx Namespace

Download SDK: SharpKit.ExtJs.zip

Classes

Name Description
Anim

This class manages animation for a specific target. The animation allows animation of various properties on the target, such as size, position, color and others.

Starting Conditions

The starting conditions for the animation are provided by the from configuration. Any/all of the properties in the from configuration can be specified. If a particular property is not defined, the starting value for that property will be read directly from the target.

End Conditions

The ending conditions for the animation are provided by the to configuration. These mark the final values once the animations has finished. The values in the from can mirror those in the to configuration to provide a starting point.

Other Options

  • duration: Specifies the time period of the animation.
  • easing: Specifies the easing of the animation.
  • iterations: Allows the animation to repeat a number of times.
  • alternate: Used in conjunction with iterations, reverses the direction every second iteration.

Example Code

  
var myComponent = Ext.create('Ext.Component', {
            renderTo: document.body,
            width: 200,
            height: 200,
            style: 'border: 1px solid red;'
            });
            Ext.create('Ext.fx.Anim', {
            target: myComponent,
            duration: 1000,
            from: {
            width: 400 //starting width 400
            },
            to: {
            width: 300, //end width 300
            height: 300 // end height 300
            }
            });
            
Animator

This class is used to run keyframe based animations, which follows the CSS3 based animation structure. Keyframe animations differ from typical from/to animations in that they offer the ability to specify values at various points throughout the animation.

Using Keyframes

The keyframes option is the most important part of specifying an animation when using this class. A key frame is a point in a particular animation. We represent this as a percentage of the total animation duration. At each key frame, we can specify the target values at that time. Note that you must specify the values at 0% and 100%, the start and ending values. There is also a keyframe event that fires after each key frame is reached.

Example

In the example below, we modify the values of the element at each fifth throughout the animation.

  
    Ext.create('Ext.fx.Animator', {
            target: Ext.getBody().createChild({
            style: {
            width: '100px',
            height: '100px',
            'background-color': 'red'
            }
            }),
            duration: 10000, // 10 seconds
            keyframes: {
            0: {
            opacity: 1,
            backgroundColor: 'FF0000'
            },
            20: {
            x: 30,
            opacity: 0.5
            },
            40: {
            x: 130,
            backgroundColor: '0000FF'
            },
            60: {
            y: 80,
            opacity: 0.3
            },
            80: {
            width: 200,
            y: 200
            },
            100: {
            opacity: 1,
            backgroundColor: '00FF00'
            }
            }
            });
            
AnimatorConfig
AnimatorEvents
AnimConfig
AnimEvents
CubicBezier

NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

CubicBezierConfig
CubicBezierEvents
Easing

This class contains a series of function definitions used to modify values during an animation. They describe how the intermediate values used during a transition will be calculated. It allows for a transition to change speed over its duration. The following options are available:

  • linear The default easing type
  • backIn
  • backOut
  • bounceIn
  • bounceOut
  • ease
  • easeIn
  • easeOut
  • easeInOut
  • elasticIn
  • elasticOut
  • cubic-bezier(x1, y1, x2, y2)

Note that cubic-bezier will create a custom easing curve following the CSS3 transition-timing-function specification. The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2). All values must be in the range [0, 1] or the definition is invalid.

EasingConfig
EasingEvents
Manager

NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

Animation Manager which keeps track of all current animations and manages them on a frame by frame basis.

ManagerConfig
ManagerEvents
PropertyHandler

NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

PropertyHandlerConfig
PropertyHandlerEvents
QueueConfig
QueueEvents

Interfaces

Name Description
Queue

NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

Animation Queue mixin to handle chaining and queueing by target.

© Copyright 2005-2011 SharpKit. All rights reserved.