[AC-2366] Android App Crashes On Animation Involving Two Views With Background Images
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | n/a |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2013-03-20T22:38:15.000+0000 |
Affected Version/s | n/a |
Fix Version/s | n/a |
Components | Titanium SDK & CLI |
Labels | android, animation, backgroundImage, opacity, view |
Reporter | Itay Avtalyon |
Assignee | Mauro Parra-Miranda |
Created | 2012-11-26T14:46:55.000+0000 |
Updated | 2016-03-08T07:41:23.000+0000 |
Description
*Problem description*
I have a window with two views one under the other. Each has a background image. I have a simple animation that has the top view disappear (changing opacity) to reveal the bottom view. The app crashes on this animation. It doesn't crash if only one of them has a background image.
*Workaround*
Assign the bottom background image to the containing view.
*Test case*
var mainWindow = Ti.UI.createWindow({
height : Ti.UI.FILL,
width : Ti.UI.FILL,
fullscreen : true,
exitOnClose : true,
navBarHidden : true,
backgroundColor : '#000',
});
var card = Ti.UI.createView({
height : Ti.UI.FILL,
width : Ti.UI.FILL,
top : 0,
left : 0,
backgroundImage : 'KS_nav_ui.png'
});
mainWindow.add(card);
var splash = Ti.UI.createView({
height : Ti.UI.Fill,
width : Ti.UI.FILL,
backgroundImage : 'KS_nav_views.png',
zIndex : 100,
top : 0,
left : 0
});
mainWindow.add(splash);
var closeSplash = function() {
splash.animate({
opacity : 0,
duration : 750
}, function() {
mainWindow.remove(splash);
splash = null;
});
clearTimeout(timer);
timer = null;
};
var timer = setTimeout(closeSplash, 5000);
mainWindow.open();
Itay, can you please provide sample code?
var mainWindow = Ti.UI.createWindow({ height: Ti.UI.FILL, width: Ti.UI.FILL, fullscreen: true, exitOnClose: true, navBarHidden: true, backgroundColor: '#000', }); var card = Ti.UI.createView({ height: Ti.UI.FILL, width: Ti.UI.FILL, top: 0, left: 0, backgroundImage: '/images/card/background.png' }); mainWindow.add(card); var splash = Ti.UI.createView({ height: Ti.UI.Fill, width: Ti.UI.FILL, backgroundImage: '/images/card/splash.png', zIndex: 100, top: 0, left: 0 }); mainWindow.add(splash); var closeSplash = function () { self.animate({ opacity: 0, duration: 750 }, function () { self.fireEvent('splash:close'); }); clearTimeout(timer); timer = null; }; var timer = setTimeout(closeSplash, 5000); -------------------------------------------------- That's pretty much the code I used. The more I work on this project, I think it could have something to do with the emulator. I tried the same code with the iPhone simulator so I know there are no major errors there. The app on the emulator keeps on crashing for some reason, so it may have something to do with the emulator on my machine (different variation of the code above where one the images is gone doesn't crash the app).
Almost there... What do you have defined as "self"?
Ooops.... Sorry! self refers to the splash view. In the original code both views are Common.js modules, but only the splash view animates. The event handler at the end of the animation executes the following commands: var closeSplash = function () { mainWindow.remove(splash); splash.removeEventListener('splash:close', closeSplash); splash = null; };
I cannot reproduce this on Samsung Galaxy S2 2.3.6 TiSDK 2.1.2 GA, 2.1.3 GA, 2.1.4 GA or 3.0 CI. Please state your TiSDK version, Android version and whether it's the device and/or simulator. Can you try the code I added under test case?
I tried the test case in a new project and tested in the emulator and it worked (Titanuim SDK 3.1 build from source (a while back). The errors I got were in the emulator. Only later when I relaize that the app on the emulator crashes a lot and for no apparent reason, I got a Samsung Galaxy 1 and to test on it and things started to work and not crash. Perhaps something is wrong the the project/emulator itself?