Updated Test Case
var win = Titanium.UI.createWindow();
var view = Titanium.UI.createView({
backgroundColor:'#fff',
bottom : '80%',
height : '10%'
});
win.add(view);
var anim = Titanium.UI.createAnimation({bottom:'5%', height:'95%'});
win.addEventListener('postlayout', function pl() {
this.removeEventListener('postlayout', pl);
setTimeout(function(){ view.animate(anim); }, 5000);
});
win.open();
Original Test Case
For Android, Example:
var win = Titanium.UI.createWindow();
var view = Titanium.UI.createView({
bottom:'10%',
height:'10%'
});
win.add(view);
var anim = Titanium.UI.createAnimation( bottom:'40%', height:'40%' );
var ready = false;
win.addEventListener('postlayout', function pl(){
win.removeEventListener('postlayout', pl);
ready = true;
});
function animIn(){
if(ready){
view.animate(anim);
}
}
// alternate animIn() -----------------------
function animIn(){
if(ready){
view.setHeight(100)/ view.height = 100; // tried both
view.animate(anim);
}
}
// animIn() is called later in the project after postlayout.
Actual Result
animation starts but does not complete.
Another problem I am encountering is that if I reset the view's values, as shown in 'alternate animIn()', the animation will fail whether percentages are used or not.
I have replaced all percentages in the project's animations with instances like this, for '40%' .. (Ti.Platform.displayCaps.platformHeight * .4)
Unfortunately this method has proven to be unreliable as the platformHeight/width is returned incorrectly at times, noticed particularly during installation when device is at rest/sleep.
Expected Result
Animation should expand view to assigned height/width percentage and/or move to assigned top/bottom percentage.
the above createAnimation() also has a duration value
Android Version 4.2.2
I have been unable to run the provided code on iOS and Android platforms. I fixed few issues but I still don't see an animation on the screen. Can you please double check the test code and make sure that it can run as it is on Android platform?
this is just an example. I would have to pull pieces of larger parts from actual project but occurs in all instances in all files that I have included a createAnimation, which equates to about 10 different times. Are you copying and pasting this?
will try to do so. re-writing the entire project's animation is sapping time.
We understand but it would be great if you can provide us a complete test case as that helps us to troubleshoot these issues faster and making sure that we are resolving the same issue that you are encountering.
Are you copying and pasting this? If so I assume you are calling the animation somewhere, and obviously opening the window.
I copied the provided code, fixed a couple of syntax errors and opened the window but did not see the animation.
Revised, tested, copied and pasted. iOS works as expected, Android 4.2.2 seems to invert. var win = Titanium.UI.createWindow(); var view = Titanium.UI.createView({ backgroundColor:'#fff', bottom : '80%', height : '10%' }); win.add(view); var anim = Titanium.UI.createAnimation({bottom:'5%', height:'95%'}); win.addEventListener('postlayout', function pl() { this.removeEventListener('postlayout', pl); setTimeout(function(){ view.animate(anim); }, 5000); }); win.open();
Moving this ticket to engineering as I can reproduce this issue with Android Galaxy Nexus device. Android animation is invert of iOS animation. It appears to be a regression with 3.2.0 release as the behavior is similar to iOS platform with 3.1.3 release. There is another issue with 3.1.3 release though (view animated on splash screen) but that is most likely unrelated to this ticket.
This example should simply place a white box atop the screen without animation and fails on Android. var h = Ti.Platform.displayCaps.platformHeight; var win = Titanium.UI.createWindow(); var view = Titanium.UI.createView({ backgroundColor:'#fff', bottom : (h * .5), // 300 works height : (h * .9) // 1000 works }); win.add(view); // var anim = Titanium.UI.createAnimation({bottom:0}); win.addEventListener('postlayout', function pl() { this.removeEventListener('postlayout', pl); setTimeout(function(){ // view.bottom = (h * .8); // view.animate(anim); }, 10000); }); win.open();
my tests are showing that the Ti.Platform.displayCaps.platformHeight returns 1920, yet if I place the view's bottom at 900 it is off the screen, at 500 it is near the top. 1920 is correct.
I tried with latest master in Google Nexus and Galaxy note and seems working. See the attached images.
Before animation
After animation
still same on samsung-SGH-1537
[~sunila] Have you compared the behavior on iOS and Android platforms? You should be able to see the behavior difference more clearly.
No update?
I ran the the updated test case and I get the results as shown in the attachment. Yes, when I run in the IOS, I get the inverse but to me, Android behavior looks correct. Here is the text from the documentation (for default layout, ie composite) height & bottom specified Child positioned bottom units from parent's bottom, using specified height. Here the specified height is 10% initially and the bottom is 80%, so the view with height 10% is shown with top 10% and bottom 80%. After the animation the height is 95% and bottom is 5% which means that the view should be drawn with 95% height with a 5% gap at the bottom.
iOS works, Android on samsung-SGH-1537 (Galaxy S4 Active) does not. Not sure if you were confused or simply switched your test cases in your report. I'll attach my compared results from today. Simple test case shows difference. var h = Ti.Platform.displayCaps.platformHeight; var win = Titanium.UI.createWindow(); var view = Titanium.UI.createView({ backgroundColor : '#fff', bottom : (h * .2), height : (h * .9) }); win.add(view); win.open(); iOS = working !http://pbrd.co/1fDuVaa! http://pbrd.co/1fDuVaa S4 Active = Not working !http://pbrd.co/1fDvEbd! http://pbrd.co/1fDvEbd Is this open to debate for some reason? Ritu Agrawal has confirmed my results. Has caused a two month stall because I am not able to accommodate animation on the newest model from the most popular manufacturer. Seems rather important to me.
Make sure that the new height and width(if changed as part of the animation) is used when calculating the left or top for animation. https://github.com/appcelerator/titanium_mobile/pull/5393
I was trying with pre-honeycomb version and didn't see the problem. I was able to reproduce it with my Nexus and have submitted the fix. Regarding the platformHeight bug, I couldn't reproduce the issue.
Verified as FIXED using : Mac :10.9.2 Appcelerator Studio, build: 3.3.0.201405011408 SDK - 3.3.0.v20140502133323 acs-1.0.14 alloy-1.4.0-dev npm-1.3.2 titanium-3.3.0-dev titanium-code-processor-1.1.1 Xcode :5.1.1 Devices used: Nexus 5 (4.4.2) , iPhone 5s (7.1.1) The new height and width(if changed as part of the animation) is used when calculating the left or top for animation. Hence closing as FIXED.