-
-
Save nuno/c6da478fc1a5ab2d7d9c to your computer and use it in GitHub Desktop.
Titanium: How to re-use the launch image in the app (TiDev.io): Alloy style
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment