Tutorial: window.animate

window.animate

Performs the specified window transitions.

Transition Types

Opacity

opacity: {
    opacity: 0.5, //This value is clamped from 0.0 to 1.0
    duration: 1000, //The total time in milliseconds this transition should take.
    relative: true //Treat 'opacity' as absolute or as a delta. Defaults to false.
}

Position

position: {
    left: 10, //Defaults to the window's current left position in virtual screen coordinates.
    top: 25, //Defaults to the window's current top position in virtual screen coordinates.
    duration: 500, //The total time in milliseconds this transition should take.
    relative: true //Treat 'left' and 'top' as absolute or as deltas. Defaults to false.
}

Size

size: {
    width: 600, //Optional if height is present. Defaults to the window's current width.
    height: 400, //Optional if width is present. Defaults to the window's current height.
    duration: 2500, //The total time in milliseconds this transition should take.
    relative: true //Treat 'width' and 'height' as absolute or as deltas. Defaults to false.
}

Options Object

{
    interrupt: true, // This option interrupts the current animation. When false it pushes this animation onto the end of the animation queue.
    tween: 'ease-in-out' // Transition effect. Defaults to 'ease-in-out'.
}

List of tweens

'linear'
'ease-in'
'ease-out'
'ease-in-out'
'ease-in-quad'
'ease-out-quad'
'ease-in-out-quad'
'ease-in-cubic'
'ease-out-cubic'
'ease-in-out-cubic'
'ease-out-bounce'
'ease-in-back'
'ease-out-back'
'ease-in-out-back'
'ease-in-elastic'
'ease-out-elastic'
'ease-in-out-elastic'

Example

var finWindow = fin.desktop.Window.getCurrent();

finWindow.animate({
    opacity: {
        opacity: 0.15,
        duration:1000
    },
    position: {
        left: 10,
        top: 10,
        duration: 3000
    }
}, {
    interrupt: false
}, function (evt) { 
    // Callback will only fire after both "opacity" and "position" have finished animating.
});