Clear Up
SharpKit Reference

Animator Class

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'
            }
            }
            });
            

Namespace: Ext.fx

Base Types

Base Interfaces

Methods

Name Description
addEvents(object) Adds the specified events to the list of events which this Observable may fire.
addListener(object, Delegate, object, object) Appends an event handler to this object. For example:
myGridPanel.on("mouseover", this.onMouseOver, this);
            
The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example:
myGridPanel.on({
            cellClick: this.onCellClick,
            mouseover: this.onMouseOver,
            mouseout: this.onMouseOut,
            scope: this // Important. Ensure "this" is correct during handler execution
            });
            
One can also specify options for each event handler separately:
myGridPanel.on({
            cellClick: {fn: this.onCellClick, scope: this, single: true},
            mouseover: {fn: panel.onMouseOver, scope: panel}
            });
            
Names of methods in a specified scope may also be used. Note that scope MUST be specified to use this option:
myGridPanel.on({
            cellClick: {fn: 'onCellClick', scope: this, single: true},
            mouseover: {fn: 'onMouseOver', scope: panel}
            });
            
addManagedListener(object, object, Delegate, object, object) Adds listeners to any Observable object (or Ext.Element) which are automatically removed when this Component is destroyed.
clearListeners() Removes all listeners for this object including the managed listeners
clearManagedListeners() Removes all managed listeners for this object.
continueFireEvent(JsString, object, object) Continue to fire event.
createRelayer(object, object) Creates an event handling function which refires the event from this object as the passed event name.
enableBubble(object) Enables events fired by this Observable to bubble up an owner hierarchy by calling this.getBubbleTarget() if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example:
  Ext.override(Ext.form.field.Base, {
            //  Add functionality to Field's initComponent to enable the change event to bubble
            initComponent : Ext.Function.createSequence(Ext.form.field.Base.prototype.initComponent, function() {
            this.enableBubble('change');
            }),
            //  We know that we want Field's events to bubble directly to the FormPanel.
            getBubbleTarget : function() {
            if (!this.formPanel) {
            this.formPanel = this.findParentByType('form');
            }
            return this.formPanel;
            }
            });
            var myForm = new Ext.formPanel({
            title: 'User Details',
            items: [{
            ...
            }],
            listeners: {
            change: function() {
            // Title goes red if form has been modified.
            myForm.header.setStyle('color', 'red');
            }
            }
            });
            
end() Fire afteranimate event and end the animation. Usually called automatically when the animation reaches its final frame, but can also be called manually to pre-emptively stop and destroy the running animation.
fireEvent(JsString, Object[]) Fires the specified event with the passed parameters (minus the event name, plus the options object passed to addListener). An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget) by calling enableBubble.
getBubbleParent() Gets the bubbling parent for an Observable
hasListener(JsString) Checks to see if this object has any listeners for a specified event, or whether the event bubbles. The answer indicates whether the event needs firing or not.
mon(object, object, Delegate, object, object) Shorthand for addManagedListener. Adds listeners to any Observable object (or Ext.Element) which are automatically removed when this Component is destroyed.
mun(object, object, Delegate, object) Shorthand for removeManagedListener. Removes listeners that were added by the mon method.
on(object, Delegate, object, object) Shorthand for addListener. Appends an event handler to this object. For example:
myGridPanel.on("mouseover", this.onMouseOver, this);
            
The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example:
myGridPanel.on({
            cellClick: this.onCellClick,
            mouseover: this.onMouseOver,
            mouseout: this.onMouseOut,
            scope: this // Important. Ensure "this" is correct during handler execution
            });
            
One can also specify options for each event handler separately:
myGridPanel.on({
            cellClick: {fn: this.onCellClick, scope: this, single: true},
            mouseover: {fn: panel.onMouseOver, scope: panel}
            });
            
Names of methods in a specified scope may also be used. Note that scope MUST be specified to use this option:
myGridPanel.on({
            cellClick: {fn: 'onCellClick', scope: this, single: true},
            mouseover: {fn: 'onMouseOver', scope: panel}
            });
            
prepareClass(Delegate) Prepares a given class for observable instances. This method is called when a class derives from this class or uses this class as a mixin.
relayEvents(object, JsArray<T>, object) Relays selected events from the specified Observable as if the events were fired by this. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent:
this.relayEvents(this.getStore(), ['load']);
            
The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the this keyword.
removeListener(JsString, Delegate, object) Removes an event handler.
removeManagedListener(object, object, Delegate, object) Removes listeners that were added by the mon method.
removeManagedListenerItem(bool, object) Remove a single managed listener item
resumeEvents() Resumes firing events (see suspendEvents). If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
suspendEvents(bool) Suspends the firing of all events. (see resumeEvents)
un(JsString, Delegate, object) Shorthand for removeListener. Removes an event handler.

Properties

Name Description
currentIteration Current iteration the animation is running. Defaults to: 0
eventsSuspended Initial suspended call count. Incremented when suspendEvents is called, decremented when resumeEvents is called. Defaults to: 0
hasListeners This object holds a key for any event that has a listener. The listener may be set directly on the instance, or on its class or a super class (via observe) or on the MVC EventBus. The values of this object are truthy (a non-zero number) and falsy (0 or undefined). They do not represent an exact count of listeners. The value for an event is truthy if the event must be fired and is falsy if there is no need to fire the event. The intended use of this property is to avoid the expense of fireEvent calls when there are no listeners. This can be particularly helpful when one would otherwise have to call fireEvent hundreds or thousands of times. It is used like this:
if (this.hasListeners.foo) {
           this.fireEvent('foo', this, arg1);
           }
            
isAnimator true in this class to identify an object as an instantiated Animator, or subclass thereof. Defaults to: true
isObservable true in this class to identify an object as an instantiated Observable, or subclass thereof. Defaults to: true
keyframeStep Current keyframe step of the animation. Defaults to: 0
paused Flag to determine if the animation is paused. Only set this to true if you need to keep the Anim instance around to be unpaused later; otherwise call end. Defaults to: false
running Flag to determine if the animation has started Defaults to: false

Fields

Name Description
delay Time to delay before starting the animation. Defaults to 0. Defaults to: 0
duration Time in milliseconds for the animation to last. Defaults to 250. Defaults to: 250
dynamic Currently only for Component Animation: Only set a component's outer element size bypassing layouts. Set to true to do full layouts for every frame of the animation. Defaults to false. Defaults to: false
easing This describes how the intermediate values used during a transition will be calculated. It allows for a transition to change speed over its duration.
  • 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. Defaults to: "ease"
    iterations Number of times to execute the animation. Defaults to 1. Defaults to: 1
    keyframes Animation keyframes follow the CSS3 Animation configuration pattern. 'from' is always considered '0%' and 'to' is considered '100%'.Every keyframe declaration must have a keyframe rule for 0% and 100%, possibly defined using "from" or "to". A keyframe declaration without these keyframe selectors is invalid and will not be available for animation. The keyframe declaration for a keyframe rule consists of properties and values. Properties that are unable to be animated are ignored in these rules, with the exception of 'easing' which can be changed at each keyframe. For example:
    keyframes : {
                '0%': {
                left: 100
                },
                '40%': {
                left: 150
                },
                '60%': {
                left: 75
                },
                '100%': {
                left: 100
                }
                }
                
    listeners A config object containing one or more event handlers to be added to this object during initialization. This should be a valid listeners config object as specified in the addListener example for attaching multiple handlers at once. DOM events from Ext JS Components While some Ext JS Component classes export selected DOM events (e.g. "click", "mouseover" etc), this is usually only done when extra value can be added. For example the DataView's itemclick event passing the node clicked on. To access DOM events directly from a child element of a Component, we need to specify the element option to identify the Component property to add a DOM listener to:
    new Ext.panel.Panel({
                width: 400,
                height: 200,
                dockedItems: [{
                xtype: 'toolbar'
                }],
                listeners: {
                click: {
                element: 'el', //bind to the underlying el property on the panel
                fn: function(){ console.log('click el'); }
                },
                dblclick: {
                element: 'body', //bind to the underlying body property on the panel
                fn: function(){ console.log('dblclick body'); }
                }
                }
                });
                
    target The Ext.fx.target to apply the animation to. If not specified during initialization, this can be passed to the applyAnimator method to apply the same animation to many targets.
    © Copyright 2005-2011 SharpKit. All rights reserved.