Titanium: How to re-use the launch image in the app (TiDev.io): Alloy style

index.js

// Animated start. Comments for code here: http://www.tidev.io/2015/01/06/how-to-re-use-the-launch-image-in-the-app
var img = Ti.UI.createImageView({
    // Get the launch image
    image: (function getImage() {
            if (OS_IOS) {
                // Working around orientation-bug
                if (Ti.Platform.osname === 'ipad' || Math.max(Ti.Platform.displayCaps.platformWidth, Ti.Platform.displayCaps.platformHeight) === 736) {
                    return 'Default-' + (Ti.Gesture.isPortrait() ? 'Portrait' : 'Landscape') + '.png';
                } else {
                    return 'Default.png';
                }
            } else if (OS_ANDROID) {
                return Ti.App.Android.R.drawable.background;
            }
        })(),
    // Working around 9-patch drawable bug
    width: Ti.UI.FILL,
    height: Ti.UI.FILL,
});

// Fixing the background-shift on Android
if (OS_ANDROID) {
    $.viewAnim.height = Ti.Platform.displayCaps.platformHeight / Ti.Platform.displayCaps.logicalDensityFactor;
    $.viewAnim.add(img);
} else if (OS_IOS) {
    $.win.add(img);
}

// Animating the image
$.win.addEventListener('postlayout', function onOpen(e) {
    $.win.removeEventListener('postlayout', onOpen);
    
    // Set main window bg color the same as the splash bg color to do the transition 
    // (in my particular case, orange)
    $.win.backgroundColor = '#F59829';

    var imgWidth = img.rect.width,
        imgHeight = img.rect.height;

    // First shrink
    img.animate({
        width: imgWidth * 0.8,
        height: imgHeight * 0.8,
        delay: 1000
    }, function after() {
        // Then expand
        img.animate({
            width: imgWidth * 5,
            height: imgHeight * 5,
            opacity: 0,
            delay: 200
        }, function after() {
            // Finally, set original window color and show the content
            $.win.backgroundColor = '#FFF';
            $.viewContent.visible = true;
            // Hide on Android because in 2.3 version, opacity seems not working
            if (OS_ANDROID) {
                $.win.remove($.viewAnim);
            }
        });
    });
});

function doClick(e) {
    alert($.label.text);
}

// Open the window
$.win.open({animated: false});

index.xml

<Alloy>
    <Window id="win" backgroundColor="#FFF">
        <View id="viewAnim" bottom="0" platform="android" />
        <View id="viewContent" visible="false">
            <Label id="label" onClick="doClick">Hello, World</Label>
        </View>
    </Window>
</Alloy>

Great example! :)

Any advise how to best achieve the twitter version with a navbar on the window after the animation?

best, nico