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>

I did the Alloy version of the Fokke animated splash icon and a little fix for when you have “something” in the window (not just empty, like the example, nor white).

The only thing I still didn't fix is the not smooth transition from color to white, but it's not the purpose (you can add more animations to do it).

Two issues:

1. On Android 2.3 (I know no one cares, but there are still 10% of users with it) will hide the image (now it remains, seems opacity is not working for the image and u can´t interact with controls behind)
2. For Android 4+, will not mix the anim image and the content of the window (in case you have another things floating).

On iOS the current Fokke example works well even if you have content on the window

Great example! :)

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

best, nico