1

I'm animating objects falling onto a board from above, and I want to animate the board 'falling back' as the objects fall upon it. Objects can fall at any point on the board, and when the board 'falls back' I am scaling the board to a smaller scale.

When using CGAffineTransformScale objects scale based on their anchor point, the centre of the object; I want to scale the board and then line up the transformed board with the object that has fallen on it, so that the object that has fallen appears to stay in the same place relative to the board (or, more correctly, the board stays in the same place relative to the position of the board).

I spent hours, and hours changing the anchor point to the position that the object fell, but this revealed a fundamental misunderstanding on my part of how layer.anchorPoint actually works.

I imagine the solution is deriving a vector from the centre of the board to the given falling object and then somehow adjusting position of the board in the transformation so it's the same place. This is where I need help!

As you'd expect in these situations, an animated gif is required. enter image description here

glenstorey
  • 5,134
  • 5
  • 39
  • 71

1 Answers1

2

CALayer's anchorPoint property is the correct property to use for this, with the one minor annoyance that it works in the unit coordinate space, that is, it goes from 0 to 1, not in pixels:

You specify the value for this property using the unit coordinate space. The default value of this property is (0.5, 0.5), which represents the center of the layer’s bounds rectangle. All geometric manipulations to the view occur about the specified point. For example, applying a rotation transform to a layer with the default anchor point causes the layer to rotate around its center. Changing the anchor point to a different location would cause the layer to rotate around that new point.

Because of this, setting an anchor point in pixels would obviously result in some very strange behaviour. You would need to calculate your new anchor point in the unit coordinate space for it to work properly, so, instead of doing something like this:

board.layer.anchorPoint = CGPointMake(ball.x, ball.y);

you would do this:

board.layer.anchorPoint = CGPointMake(ball.x / board.layer.bounds.size.width,
                                      ball.y / board.layer.bounds.size.height);

UPDATE: When you change the anchorPoint property, the view will move, because the anchorPoint, which is set relative to the layer in the unit coordinate space, is anchored to the layer's position property, which is set in the superview's coordinate space. In this way, when you change the value of the anchorPoint property, the view will move such that the point at the new anchor point is at the same place as the old one. You will need to compensate for this, as described in this answer.

Community
  • 1
  • 1
Greg
  • 9,068
  • 6
  • 49
  • 91
  • That's what I thought, and what I was doing- except I had some completely bizzare behaviour where the board would move 100 or so pixels in a seemingly random direction (see here: https://www.dropbox.com/s/5gi3uvcdm02hp5r/awesomemovieofawesomeness.mov this video uses the anchorPoint .61,0). I have turned off auto layout as well. If anchor point is correct then why is it jumping around like that? – glenstorey Jul 13 '13 at 06:31
  • The only difference was I was using board.frame.size.width, which I understand is derived from the layer anyway. – glenstorey Jul 13 '13 at 06:32
  • @glenstorey when you change the anchor point, **the view will move** such that the point of the view at the anchor point is in the same location in the superview as it was before, and that's what's happening in your video. You'll have to compensate for that too. – Greg Jul 13 '13 at 06:59
  • Cool, thankyou. Can you point me in the direction of thinking about what I need to do to compensate for this? – glenstorey Jul 13 '13 at 06:59
  • I just looked around and found this answer, with code given: http://stackoverflow.com/a/5666430/834998 – Greg Jul 13 '13 at 07:00
  • 1
    You sir, are a better Googler than I. Thankyou. – glenstorey Jul 13 '13 at 07:07