[MUSIC PLAYING]
Hey there, gang, great to see you again.
So I want you to check this out.
In this app, I have a view that it can rotate
around using a rotate gesture.
Probably if you've done any sort of gesture work before,
this looks pretty standard to you.
But as you can see here, my object
is always rotating around its center.
Now, in many cases, this make sense
and matches up with what your users are expecting.
But there might be times where you want
something a little different.
For example, there may be times I'd
want to rotate my view around where my user's fingers are,
instead of the view center.
Well, how would I do that?
Well, that's where this episode's quick tip comes in.
And as you may have guessed from the title here,
it's all about using anchor points.
An anchor point of a view is a local coordinate system
that goes from 0 to 1 in the x- and y-axes.
When you manipulate a view using CGAffine Transform, which
is the way you would typically rotate or scale a view,
iOS calculates the transformation
based on the view's anchor point.
By default, every view's anchor point
is set to 0.5, 0.5, or the exact center of the view, which
means that by default, any rotation you get
from the CGAffine Transform is calculated around this center
point.
However, I can change the anchor point for my view
by setting the core animation layer's anchor point property.
So going back to my application, where
I want the view to rotate around my two fingers,
I can look at where the user's two touches are
relative to the view and calculate the midpoint
of those two points.
Then I divide the x and y values of that midpoint
by the width and height of my view to normalize them.
And then I've got an anchor point
that reflects the midway point between my two fingers.
And so now if I set my view's layer's
anchorPoint to be this new value,
I should be able to rotate it by one of its corners.
So let's see this in action.
Huh, well, uh, that's weird.
It does look like my view is now rotating around
its corner instead of its center, which is what I wanted.
But it's also jumping around as soon
as I change its anchor point.
Well, why is it doing that?
Well, the answer basically boils down to the fact
that core animation places views based on their anchor points.
So when I change my view's anchor point,
iOS tries to make sure that anchor point is
in the same place in its superview
as it was before, which means that it shifts my view's
frame around.
And that's exactly what happened in my app.
So how can you fix this?
Well, the easiest way is to translate your view immediately
before or after you change your anchor point.
Basically, figure out the difference
between your old anchor point and your new anchor point,
and shift your view by that much.
Then, when you change your anchor point,
iOS shifts your view in the other direction.
Those two shifts cancel each other out,
and your view will go back to its original place.
Incidentally, I do recommend applying this shift
as a CGAffine transform, instead of
trying to move the view's frame directly.
Otherwise you can end up in weird situations
where your move gets affected by the rotation,
and things just end up all sorts of messy.
So if I try this now in my app, where I immediately
translate my view and then move the anchor point,
we get something like this.
Ah, well, that's exactly what I wanted.
Incidentally, once you're done rotating an object,
you can either leave its anchor point at its new position
or reset it back to the center again,
depending on whether you think other methods might
be manipulating this view.
After all, some other animation, like a scale animation,
might be assuming that your view's anchor point is
in the center, and you don't want to throw it off.
So today's quick tip was brought you
by Jeff Verkoeyen, one of the main authors
of the popular open source library NimbusKit.
Jeff is also working on a number of cool graphics and animation
libraries here inside of Google.
So thank you to Jeff.
And you know what?
Even though you already work here,
I'll send you a t-shirt anyway because I'm nice like that.
But what about you?
Do have a quick tip?
If you do, send it to me.
If I end up using it in the video,
I will send you a T-shirt.
Listen, I've seen engineers at conferences
like knock small children out of the way in order
to get themselves a free T-shirt,
so trust me when I say it'll be a whole lot easier for you
to just mail me a tip, and no children will get hurt.
So go on, I believe in you.
You can do it.
And as for the rest of you, I will see you soon
on "Route 85."
[MUSIC PLAYING]