Skip to content

Instantly share code, notes, and snippets.

@mcvendrell
Created January 12, 2015 08:17
Show Gist options
  • Save mcvendrell/8d858c9995036248750d to your computer and use it in GitHub Desktop.
Save mcvendrell/8d858c9995036248750d to your computer and use it in GitHub Desktop.
Titanium: How to re-use the launch image in the app (TiDev.io): Alloy style
// 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});
<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>
@mcvendrell
Copy link
Author

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

@nubu
Copy link

nubu commented Feb 19, 2015

Great example! :)

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

best, nico

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment