Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-10804] iOS: Animation: setting location via percentages is not working correctly on iOS

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2012-10-30T18:24:21.000+0000
Affected Version/sRelease 3.0.0
Fix Version/sRelease 3.0.0, Release 3.1.0, 2012 Sprint 22 API, 2012 Sprint 22
ComponentsiOS
Labelsanimation, api, module_animation, qe-testadded
ReporterCarl Orthlieb
AssigneeVishal Duggal
Created2012-09-06T14:42:44.000+0000
Updated2013-07-25T11:27:12.000+0000

Description

1. Run the attached project (test.zip) on Android. Observe the position of the Alloy logo, the top of the logo aligns with the red line. 2. Run the attached project on iOS. Observe the position of the Alloy logo, the center of the logo aligns with the red line. EXPECTED BEHAVIOR: the logo should animate in from the top of the screen to where the top of the logo is half way down the screen (50% where the blue line is) and then should bounce back to where the top of the logo is one third of the way down the screen (33% where the red line is). ACTUAL BEHAVIOR: Android performs correctly. It looks to me like iOS is animating and positioning the logo based on the centerpoint instead of the top.

Attachments

FileDateSize
alloy.png2012-10-22T18:59:31.000+000023605
Screen Shot 2012-09-06 at 2.29.20 PM.png2012-09-06T14:42:44.000+000066127
Screen Shot 2012-09-06 at 2.30.38 PM.png2012-09-06T14:42:44.000+0000102179
test.zip2012-09-06T14:42:44.000+00003380185

Comments

  1. Vishal Duggal 2012-10-22

    Test Code without alloy Animation with ANIMATE1 button works. Does not work with ANIMATE2 button.
       var win = Ti.UI.createWindow({
           title : 'Welcome',
           backgroundColor: "#fff"
       });
       
       var line33 = Ti.UI.createView({
       	top:'33%',
       	height:1,
       	backgroundColor:'red'
       })
       
       var line50 = Ti.UI.createView({
       	top:'50%',
       	height:1,
       	backgroundColor:'blue'
       })
       
       var logo = Ti.UI.createView({
       	opacity: 0,
       	bottom: "100%",
           width: "216dp",
           height: "200dp",
           backgroundImage: "/images/alloy.png"
       })
       
       var b1 = Ti.UI.createButton({
       	title:'ANIMATE 1',
       	left:0,
       	bottom:0
       })
       
       b1.addEventListener('click',function(){
       	var a = Ti.UI.createAnimation();
       	a.top = '50%'
         	a.opacity=1;
       	a.duration=500;
       	var animationHandler = function() {
         		a.removeEventListener('complete',animationHandler);
         		a.top = '33%';
         		a.duration=250;
         		logo.animate(a);
       	};
       	a.addEventListener('complete',animationHandler);
       	logo.animate(a);
       })
       
       var b3 = Ti.UI.createButton({
       	title:'INIT',
       	bottom:0
       })
       
       b3.addEventListener('click',function(){
       	win.remove(logo);
       	logo = null;
       	logo = Ti.UI.createView({
       	opacity: 0,
       	bottom: "100%",
           width: "216dp",
           height: "200dp",
           backgroundImage: "/images/alloy.png"
       	})
       	win.add(logo);
       });
       var b2 = Ti.UI.createButton({
       	title:'ANIMATE 2',
       	right:0,
       	bottom:0
       })
       
       b2.addEventListener('click',function(){
       	logo.animate({opacity:1,top:'50%',duration:500},function(){
       		logo.animate({top:'33%',duration:250})
       	});
       });
       
       win.add(line33);
       win.add(line50);
       win.add(logo);
       
       win.add(b1);
       win.add(b2);
       win.add(b3);
       
       win.open();
       
  2. Vishal Duggal 2012-10-22

    The resource file used in test
  3. Vishal Duggal 2012-10-22

    Pull pending https://github.com/appcelerator/titanium_mobile/pull/3312
  4. Vishal Duggal 2012-10-25

    Backport PR for 3_0_X https://github.com/appcelerator/titanium_mobile/pull/3323
  5. Natalie Huynh 2012-12-04

    Tested with 3.0.0.v20121130200208 with iPhone 4 5.1.1

JSON Source