Class type Ext_util_Animate.t

class type t = object .. end

method animate : 'a 'b. 'a Js.t -> 'b Js.t Js.meth

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.

Animating a Component

When animating a Component, the following properties may be specified in from, to, and keyframe objects:

• x - The Component's page X position in pixels.

• y - The Component's page Y position in pixels

• left - The Component's left value in pixels.

• top - The Component's top value in pixels.

• width - The Component's width value in pixels.

• height - The Component's height value in pixels.

• dynamic - Specify as true to update the Component's layout (if it is a Container) at every frame of the animation. Use sparingly as laying out on every intermediate size change is an expensive operation.

For example, to animate a Window to a new size, ensuring that its internal layout and any shadow is correct:

myWindow = Ext.create('Ext.window.Window', {
    title: 'Test Component animation',
    width: 500,
    height: 300,
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    items: [{
        title: 'Left: 33%',
        margins: '5 0 5 5',
        flex: 1
    }, {
        title: 'Left: 66%',
        margins: '5 5 5 5',
        flex: 2
    }]
});
myWindow.show();
myWindow.header.el.on('click', function() {
    myWindow.animate({
        to: {
            width: (myWindow.getWidth() == 500) ? 700 : 500,
            height: (myWindow.getHeight() == 300) ? 400 : 300
        }
    });
});

For performance reasons, by default, the internal layout is only updated when the Window reaches its final "to" size. If dynamic updating of the Window's child Components is required, then configure the animation with dynamic: true and the two child items will maintain their proportions during the animation.

Parameters:

• config: _ Js.t

  Configuration for Ext.fx.Anim. Note that the to config is required.

Returns:

• _ Js.t

  this

method getActiveAnimation : 'c. 'c Js.t Js.meth

Returns the current animation if this object has any effects actively running or queued, else returns false.

Returns:

• _ Js.t

  Anim if element has active effects, else false

method sequenceFx : 'd. 'd Js.t Js.meth

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

Returns:

• _ Js.t

  this

method stopAnimation : Ext_dom_Element.t Js.t Js.meth

Stops any running effects and clears this object's internal effects queue if it contains any additional effects that haven't started yet.

Returns:

• Ext_dom_Element.t Js.t

  The Element

method syncFx : 'e. 'e Js.t Js.meth

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

Returns:

• _ Js.t

  this