Clear Up
SharpKit Reference

Animate Interface

This animation class is a mixin.

Ext.util.Animate provides an API for the creation of animated transitions of properties and styles. This class is used as a mixin and currently applied to Ext.Element, Ext.CompositeElement, Ext.draw.Sprite, Ext.draw.CompositeSprite, and Ext.Component. Note that Components have a limited subset of what attributes can be animated such as top, left, x, y, height, width, and opacity (color, paddings, and margins can not be animated).

Animation Basics

All animations require three things - easing, duration, and to (the final end value for each property) you wish to animate. Easing and duration are defaulted values specified below. Easing describes how the intermediate values used during a transition will be calculated. Easing allows for a transition to change speed over its duration. You may use the defaults for easing and duration, but you must always set a to property which is the end value for all animations.

Popular element 'to' configurations are:

  • opacity
  • x
  • y
  • color
  • height
  • width

Popular sprite 'to' configurations are:

  • translation
  • path
  • scale
  • stroke
  • rotation

The default duration for animations is 250 (which is a 1/4 of a second). Duration is denoted in milliseconds. Therefore 1 second is 1000, 1 minute would be 60000, and so on. The default easing curve used for all animations is 'ease'. Popular easing functions are included and can be found in Easing.

For example, a simple animation to fade out an element with a default easing and duration:

  
var p1 = Ext.get('myElementId');
            p1.animate({
            to: {
            opacity: 0
            }
            });
            

To make this animation fade out in a tenth of a second:

  
var p1 = Ext.get('myElementId');
            p1.animate({
            duration: 100,
            to: {
            opacity: 0
            }
            });
            

Animation Queues

By default all animations are added to a queue which allows for animation via a chain-style API. For example, the following code will queue 4 animations which occur sequentially (one right after the other):

  
p1.animate({
            to: {
            x: 500
            }
            }).animate({
            to: {
            y: 150
            }
            }).animate({
            to: {
            backgroundColor: '#f00'  //red
            }
            }).animate({
            to: {
            opacity: 0
            }
            });
            

You can change this behavior by calling the syncFx method and all subsequent animations for the specified target will be run concurrently (at the same time).

  
p1.syncFx();  //this will make all animations run at the same time
            p1.animate({
            to: {
            x: 500
            }
            }).animate({
            to: {
            y: 150
            }
            }).animate({
            to: {
            backgroundColor: '#f00'  //red
            }
            }).animate({
            to: {
            opacity: 0
            }
            });
            

This works the same as:

  
p1.animate({
            to: {
            x: 500,
            y: 150,
            backgroundColor: '#f00'  //red
            opacity: 0
            }
            });
            

The stopAnimation method can be used to stop any currently running animations and clear any queued animations.

Animation Keyframes

You can also set up complex animations with keyframes which follow the CSS3 Animation configuration pattern. Note rotation, translation, and scaling can only be done for sprites. The previous example can be written with the following syntax:

  
p1.animate({
            duration: 1000,  //one second total
            keyframes: {
            25: {     //from 0 to 250ms (25%)
            x: 0
            },
            50: {   //from 250ms to 500ms (50%)
            y: 0
            },
            75: {  //from 500ms to 750ms (75%)
            backgroundColor: '#f00'  //red
            },
            100: {  //from 750ms to 1sec
            opacity: 0
            }
            }
            });
            

Animation Events

Each animation you create has events for beforeanimate, afteranimate, and lastframe. Keyframed animations adds an additional keyframe event which fires for each keyframe in your animation.

All animations support the listeners configuration to attact functions to these events.

  
startAnimate: function() {
            var p1 = Ext.get('myElementId');
            p1.animate({
            duration: 100,
            to: {
            opacity: 0
            },
            listeners: {
            beforeanimate:  function() {
            // Execute my custom method before the animation
            this.myBeforeAnimateFn();
            },
            afteranimate: function() {
            // Execute my custom method after the animation
            this.myAfterAnimateFn();
            },
            scope: this
            });
            },
            myBeforeAnimateFn: function() {
            // My custom logic
            },
            myAfterAnimateFn: function() {
            // My custom logic
            }
            

Due to the fact that animations run asynchronously, you can determine if an animation is currently running on any target by using the getActiveAnimation method. This method will return false if there are no active animations or return the currently running Ext.fx.Anim instance.

In this example, we're going to wait for the current animation to finish, then stop any other queued animations before we fade our element's opacity to 0:

  
var curAnim = p1.getActiveAnimation();
            if (curAnim) {
            curAnim.on('afteranimate', function() {
            p1.stopAnimation();
            p1.animate({
            to: {
            opacity: 0
            }
            });
            });
            }
            

Namespace: Ext.util

Derived Types

Methods

Name Description
animate(object) Performs custom animation on this object. This method is applicable to both the Component class and the Sprite class. It performs animated transitions of certain properties of this object over a specified timeline.
getActiveAnimation() Returns the current animation if this object has any effects actively running or queued, else returns false.
hasActiveFx() Returns the current animation if this object has any effects actively running or queued, else returns false.

This method has been deprecated since 4.0

Replaced by getActiveAnimation

sequenceFx() Ensures that all effects queued after sequenceFx is called on this object are run in sequence. This is the opposite of syncFx.
stopAnimation() Stops any running effects and clears this object's internal effects queue if it contains any additional effects that haven't started yet.
stopFx() Stops any running effects and clears this object's internal effects queue if it contains any additional effects that haven't started yet.

This method has been deprecated since 4.0

Replaced by stopAnimation

syncFx() Ensures that all effects queued after syncFx is called on this object are run concurrently. This is the opposite of sequenceFx.

Properties

Name Description
className Defaults to: "Ext.Base"
configMap Defaults to: {}
initConfigList Defaults to: []
initConfigMap Defaults to: {}
isInstance Defaults to: true
self Get the reference to the current class from which this object was instantiated. Unlike statics, this.self is scope-dependent and it's meant to be used for dynamic inheritance. See statics for a detailed comparison
  Ext.define('My.Cat', {
            statics: {
            speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
            },
            constructor: function() {
            alert(this.self.speciesName); // dependent on 'this'
            },
            clone: function() {
            return new this.self();
            }
            });
            Ext.define('My.SnowLeopard', {
            extend: 'My.Cat',
            statics: {
            speciesName: 'Snow Leopard'         // My.SnowLeopard.speciesName = 'Snow Leopard'
            }
            });
            var cat = new My.Cat();                     // alerts 'Cat'
            var snowLeopard = new My.SnowLeopard();     // alerts 'Snow Leopard'
            var clone = snowLeopard.clone();
            alert(Ext.getClassName(clone));             // alerts 'My.SnowLeopard'
            
© Copyright 2005-2011 SharpKit. All rights reserved.