Modal Dialog

modal_save.js

/*
// TYPES OF ANIMATIONS
    'LINEAR'
    'QUAD_IN'
    'QUAD_OUT'
    'QUAD_IN_OUT'
    'CUBIC_IN'
    'CUBIC_OUT'
    'CUBIC_IN_OUT'
    'QUART_IN'
    'QUART_OUT'
    'QUART_IN_OUT'
    'QUINT_IN'
    'QUINT_OUT'
    'QUINT_IN_OUT'
    'SINE_IN'
    'SINE_OUT'
    'SINE_IN_OUT'
    'CIRC_IN'
    'CIRC_OUT'
    'CIRC_IN_OUT'
    'EXP_IN'
    'EXP_OUT'
    'EXP_IN_OUT'
    'ELASTIC_IN'
    'ELASTIC_OUT'
    'ELASTIC_IN_OUT'
    'BACK_IN'
    'BACK_OUT'
    'BACK_IN_OUT'
    'BOUNCE_IN'
    'BOUNCE_OUT'
    'BOUNCE_IN_OUT'
*/

var Animator = require('com.animecyc.animator'),
    mainWindow = Ti.UI.createWindow({
        fullscreen : true,
        backgroundColor : 'white'
    });

var easeButton = Ti.UI.createButton({
    title: 'Test',
    bottom: 20
});

var originalSize = 400;
var viewToAnimate = Ti.UI.createView({
    height : originalSize,
    width : originalSize,
    backgroundColor : 'black',
    borderRadius: 10,
    opacity : 0
});

easeButton.addEventListener('click', FadeIn);
viewToAnimate.addEventListener('click', FadeOut);

function FadeIn() {
    Animator.animate(viewToAnimate, {
        height: originalSize - 150,
        width : originalSize - 150,
        opacity : 1,
        duration : 1000,
        easing: Animator['ELASTIC_OUT']
    }, function () {
        setTimeout(FadeOut, 1500);
    });
}

function FadeOut() {
    Animator.animate(viewToAnimate, {
        width : originalSize - 200,
        height : originalSize - 200,
        opacity : 0,
        duration : 200,
        easing: Animator['LINEAR']
    }, function() {
        viewToAnimate.width = originalSize;
        viewToAnimate.height = originalSize;
    });
}


mainWindow.add(easeButton);
mainWindow.add(viewToAnimate);
mainWindow.open();