anchorPoint Not Working on Android

You must Login before you can answer or comment on any questions.

I'm using anchorPoint when creating a label:

var label = Titanium.UI.createLabel(
  {
    text:'Click to animate',
    color:'black',
    bottom:75,
    width:'auto',
    height:'auto',
    textAlign:'center',
    anchorPoint:{x:1.0,y:1.0}
  });
It doesn't seem to be respected on Android when I animate the label:
var t1 = Ti.UI.create2DMatrix();
        t1 = t1.scale(1.5);
 
        var a1 = Titanium.UI.createAnimation();
        a1.transform = t1;
        a1.duration = 500;
        a1.autoreverse = true;
        a1.repeat = 1;
 
      // Start the animation when the event is called
      label.animate(a1);
Is this a known issue for Android? I can move the anchorPoint around and it always seems to animate from {0.0, 0.0}. On the iPhone it works as expected i.e. the animation anchorPoint changes based on the point set during creationg

— asked 2 years ago by Brian Yamabe
3 Comments
  • I have this problem too with imageViews, labels, views.

    — commented 2 years ago by Caspar Addyman

  • Yes, I have the same issue. Seems to be any view?

    — commented 2 years ago by Nick du Preez

  • I found an issue that was filed against this: https://appcelerator.lighthouseapp.com/projects/32238/tickets/2452-android-image-rotates-around-top-left-not-anchor-point

    — commented 2 years ago by Brian Yamabe

3 Answers

SDK 2.x seems to have anchorPoint fixed within animations. You should now be able to use something like:

label.animate({
    anchorPoint : {x : 0.5, y : 0.5},
    transform : Ti.UI.create2DMatrix().scale(1.5),
    duration : 500
});
Note that animate() is still not 100% ok, therefore if you add another properties to the animate dict, such as opacity, it might result into unpredictable behaviour. Animations on android are still far from being fully supported.

— answered 1 year ago by Ondrej Urik
answer permalink
1 Comment
  • Hey, Its working with your code. I have tested in emulator Ondrej :)

    label.animate({
        anchorPoint : {x : 0.5, y : 0.5},
        transform : Ti.UI.create2DMatrix().scale(1.5),
        duration : 500
    });

    — commented 4 months ago by Raju Mahato

Nope! Still not working! :-(

It scales but still does everything about {x:0, y:0} The opacity fades in and out mostly fine.

I want the anchor point at {x:0.5,y:0.5} but as you can see in the code snippet, I have even tried {x:1, y:1} and it STILL does the scale about {x:0, y:0}

Titanium Studio, build: 2.0.2.201205311912 Google APIs 2.3.3 V8 Runtime Windows Vista

growTransform = Ti.UI.create2DMatrix({
    scale: 2
});
 
growView = Ti.UI.createAnimation({
    transform: growTransform,
    opacity: 1,
    duration: 2000
});
 
 
...
 
timesRunningOutView = Ti.UI.createView({
        opacity: 0,
        anchorPoint: {x:1, y:1},
        height: 100,
        width: 110,
        centre:{x: screenWidth/2},
        backgroundColor: 'blue',
        borderWidth: 5,
        borderRadius: 4,
        borderColor: 'red',
        backgroundImage: '/Other Image Files/Alarm Clock.jpg'
    });
 
    timesRunningOutWindow.add(timesRunningOutView);
    timesRunningOutWindow.open();
    timesRunningOutView.animate(growView);

— answered 11 months ago by Robin Williams
answer permalink
2 Comments
  • This is a known bug if an opacity is added to the animation. Unfortunately there is no decent workaround so you'll have to wait until it's fixed.

    — commented 11 months ago by Ondrej Urik

  • Thanks but I've tried it without opacity at all and it still doesn't work! :-(

    I've tried using a regular 'View' and also and 'ImageView' just in case there was any difference and still nothing!

    — commented 11 months ago by Robin Williams

Your Answer

Think you can help? Login to answer this question!