213.srt

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:00:00.506 --> 00:00:10.596 A:middle
[ Silence ]

00:00:11.096 --> 00:00:11.976 A:middle
>> Chris Dreessen:
Good afternoon.

00:00:12.516 --> 00:00:16.286 A:middle
[ Applause ]

00:00:16.786 --> 00:00:18.166 A:middle
Welcome to session 213.

00:00:18.166 --> 00:00:20.196 A:middle
This is best practices
for Cocoa Animation.

00:00:20.356 --> 00:00:21.486 A:middle
I'm Chris Dreessen.

00:00:21.486 --> 00:00:24.996 A:middle
I'm an AppKit Engineer
so I work on this stuff.

00:00:24.996 --> 00:00:26.956 A:middle
We have a lot of great things
we'd like to show you here.

00:00:26.956 --> 00:00:30.126 A:middle
So I'm going to give you
a basic overview of this.

00:00:30.676 --> 00:00:33.086 A:middle
So I said a lot of great things,
I meant a lot of great things.

00:00:33.746 --> 00:00:36.706 A:middle
I'm going to start with a
brief overview of how Animation

00:00:36.706 --> 00:00:38.056 A:middle
in Cocoa works, how to use it.

00:00:38.056 --> 00:00:39.616 A:middle
We're going to continue
to describe how

00:00:39.616 --> 00:00:42.356 A:middle
to make your own view
subclasses animatable

00:00:42.356 --> 00:00:45.006 A:middle
for your own properties
and describe how to augment

00:00:45.006 --> 00:00:47.076 A:middle
that with context
sensitive animations.

00:00:47.806 --> 00:00:49.546 A:middle
I'm going to share
with you a technique I

00:00:49.546 --> 00:00:51.806 A:middle
like to call chaining animations
where we use the completion

00:00:51.806 --> 00:00:54.776 A:middle
of one animation to start
off another animation.

00:00:55.466 --> 00:00:57.826 A:middle
Some of you are familiar

00:00:57.826 --> 00:00:59.956 A:middle
with the implicit
animation functionality

00:00:59.956 --> 00:01:02.286 A:middle
of NSAnimation Contest
we added in 10.8

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:00:59.956 --> 00:01:02.286 A:middle
of NSAnimation Contest
we added in 10.8

00:01:02.286 --> 00:01:04.146 A:middle
and I'm going to cover that.

00:01:04.146 --> 00:01:05.996 A:middle
And then I'm going to cover
a bit of Core Animation,

00:01:05.996 --> 00:01:07.906 A:middle
not how you can use
Core Animation

00:01:08.296 --> 00:01:10.616 A:middle
but rather how NSView
uses Core Animation

00:01:10.616 --> 00:01:12.286 A:middle
to do animations
for layer back use.

00:01:12.636 --> 00:01:13.756 A:middle
At that point I'm going

00:01:13.756 --> 00:01:17.346 A:middle
to invite my colleague Peter
Amman onstage and he's going

00:01:17.346 --> 00:01:19.516 A:middle
to talk about this great new
class called NSStackView.

00:01:19.516 --> 00:01:22.326 A:middle
He's going to describe how
you can use auto layout

00:01:22.326 --> 00:01:23.416 A:middle
to animate view positions,

00:01:23.416 --> 00:01:25.976 A:middle
how you can animate those
constraints directly

00:01:26.176 --> 00:01:27.676 A:middle
and additionally best practices

00:01:27.676 --> 00:01:29.596 A:middle
for animating window
size changes.

00:01:31.246 --> 00:01:33.586 A:middle
So throughout the course of
this presentation I'm going

00:01:33.586 --> 00:01:36.186 A:middle
to be talking a lot about
the NSAnimatableProperty

00:01:36.186 --> 00:01:39.786 A:middle
ContainerProtocol and that lives
in the NSAnimimation.h header.

00:01:40.176 --> 00:01:42.796 A:middle
And it's a simple protocol, it's
just five methods but I'm going

00:01:42.796 --> 00:01:43.916 A:middle
to be coming back here a lot

00:01:43.916 --> 00:01:45.496 A:middle
and we'll touch each
of these one by one.

00:01:46.766 --> 00:01:49.986 A:middle
So basic animations, most of
you are familiar with this

00:01:50.626 --> 00:01:52.916 A:middle
but this is how you animate
basic things for NSView.

00:01:53.996 --> 00:01:55.736 A:middle
So back to NSAnimatableProperty
Container,

00:01:55.736 --> 00:01:57.196 A:middle
I said we'd be coming
back here a lot.

00:01:57.196 --> 00:01:57.636 A:middle
I didn't lie.

00:01:57.636 --> 00:02:00.336 A:middle
The method I want to introduce

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:01:57.636 --> 00:02:00.336 A:middle
The method I want to introduce

00:02:00.336 --> 00:02:02.436 A:middle
to you here is the animator
method which returns

00:02:02.436 --> 00:02:04.296 A:middle
to you the thing we
call the animator proxy.

00:02:04.776 --> 00:02:07.586 A:middle
And this is an object that
implements all the same methods

00:02:07.626 --> 00:02:08.666 A:middle
that your object does.

00:02:09.186 --> 00:02:11.836 A:middle
The difference is when you
message it it will animate them

00:02:11.866 --> 00:02:13.586 A:middle
instead of just popping
to the final location.

00:02:14.646 --> 00:02:16.886 A:middle
So suppose you want to
fade the Alpha of a view.

00:02:16.886 --> 00:02:17.806 A:middle
You want this to disappear?

00:02:18.586 --> 00:02:20.736 A:middle
Well that's not too bad,
that's just one line of code.

00:02:20.736 --> 00:02:22.956 A:middle
We set the Alpha value to zero
through the animator proxy,

00:02:23.026 --> 00:02:26.636 A:middle
view.animator.alphavalue=0
and that's all it takes.

00:02:27.256 --> 00:02:29.116 A:middle
And here's something
more complicated.

00:02:29.116 --> 00:02:33.146 A:middle
This is, we're sliding, that's
got to be way more code, right?

00:02:34.796 --> 00:02:37.536 A:middle
Same thing,
view.animator.frameorigin,

00:02:37.836 --> 00:02:38.886 A:middle
just one line of code again.

00:02:39.766 --> 00:02:42.636 A:middle
Okay here's one more,
we resized it.

00:02:42.636 --> 00:02:43.626 A:middle
That's two dimensions.

00:02:43.626 --> 00:02:45.416 A:middle
That's got to be
four times the work

00:02:45.696 --> 00:02:46.906 A:middle
and it is four times the work.

00:02:46.906 --> 00:02:49.876 A:middle
It's also one line of code.

00:02:50.936 --> 00:02:52.316 A:middle
[laughter] Alright so you're
all familiar with that.

00:02:52.316 --> 00:02:56.246 A:middle
I want to talk about how to make
your own views animatable now.

00:02:56.816 --> 00:02:59.546 A:middle
So suppose you want to do
an animation like this.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:03:00.316 --> 00:03:03.476 A:middle
We have a framed view which is
a single red line on the outside

00:03:03.476 --> 00:03:05.566 A:middle
and we change the line
thickness, we grow it.

00:03:06.116 --> 00:03:07.426 A:middle
So your view might
look like this.

00:03:07.426 --> 00:03:09.486 A:middle
You're going to declare a
line thickness property,

00:03:09.646 --> 00:03:10.456 A:middle
it's a float.

00:03:10.876 --> 00:03:12.476 A:middle
And you're going to
go in and drawRect

00:03:12.476 --> 00:03:13.696 A:middle
and this is a simple drawRect.

00:03:14.056 --> 00:03:17.286 A:middle
We just set the red color and
then we frame our own bounds

00:03:17.506 --> 00:03:19.996 A:middle
with a rectangle of the
appropriate line thickness.

00:03:20.716 --> 00:03:22.456 A:middle
And additionally in our accessor

00:03:22.456 --> 00:03:25.656 A:middle
for setLineThickness we
call setNeedsDisplay yes,

00:03:25.656 --> 00:03:27.436 A:middle
after we've updated our I-bar.

00:03:27.796 --> 00:03:30.226 A:middle
So I told you, you know, you
can just use the animator proxy,

00:03:30.226 --> 00:03:31.286 A:middle
that works fantastically.

00:03:31.676 --> 00:03:34.526 A:middle
And if we try this we
see this animation.

00:03:35.096 --> 00:03:38.436 A:middle
And technically that
was an animation.

00:03:38.436 --> 00:03:39.906 A:middle
Things changed on screen.

00:03:39.906 --> 00:03:41.916 A:middle
But I don't think any of
us are really satisfied

00:03:41.916 --> 00:03:42.696 A:middle
with that animation.

00:03:43.316 --> 00:03:44.096 A:middle
So what was missing?

00:03:45.076 --> 00:03:48.116 A:middle
Well back to the NS Animatable
Property Container Protocol.

00:03:48.386 --> 00:03:50.816 A:middle
There is this method called
defaultAnimationForKey.

00:03:51.316 --> 00:03:52.256 A:middle
It's a class method.

00:03:53.476 --> 00:03:54.856 A:middle
And that is our missing
piece here.

00:03:55.506 --> 00:03:57.766 A:middle
And to make this animatable
we're going to go ahead

00:03:57.766 --> 00:03:59.956 A:middle
and implement the
defaultAnimationForKey method.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:04:00.746 --> 00:04:02.466 A:middle
So our implementation we start

00:04:02.466 --> 00:04:04.766 A:middle
by checking what key we're
actually talking about here.

00:04:05.136 --> 00:04:06.836 A:middle
In this case it's our
line thickness property

00:04:06.836 --> 00:04:07.436 A:middle
which is great.

00:04:07.876 --> 00:04:11.706 A:middle
And we return the default
CABasicAnimationObject

00:04:12.016 --> 00:04:14.366 A:middle
and CABasicAnimation is one

00:04:14.366 --> 00:04:16.426 A:middle
of the animation types
we use most frequently.

00:04:16.426 --> 00:04:19.766 A:middle
It just has very simple
from and to values along

00:04:19.766 --> 00:04:20.495 A:middle
with some properties

00:04:20.495 --> 00:04:22.666 A:middle
that control how those
values are interpolated.

00:04:23.116 --> 00:04:26.286 A:middle
And of course if it's not the
line thickness property we want

00:04:26.286 --> 00:04:27.186 A:middle
to fall through as a super

00:04:27.186 --> 00:04:29.716 A:middle
so the other view properties
can continue being animatable.

00:04:30.406 --> 00:04:33.606 A:middle
And just by adding that if we
do view.animator.linethickness

00:04:33.606 --> 00:04:36.456 A:middle
again we get this animation
which is just what we wanted.

00:04:38.316 --> 00:04:40.526 A:middle
So that's still pretty simple

00:04:40.526 --> 00:04:43.426 A:middle
so let's complicate
things a little bit.

00:04:43.426 --> 00:04:45.556 A:middle
Sometimes you need to
know more information

00:04:45.556 --> 00:04:46.926 A:middle
that you can provide
in a class method.

00:04:46.926 --> 00:04:49.036 A:middle
You need to know what
specifically is being animated.

00:04:49.636 --> 00:04:52.416 A:middle
And you can do that too with MS
Animatable Property Container.

00:04:53.056 --> 00:04:55.176 A:middle
There is a method
called setAnimations

00:04:55.176 --> 00:04:56.176 A:middle
which takes a dictionary,

00:04:56.676 --> 00:04:58.626 A:middle
the keys in the dictionary
are the properties

00:04:58.626 --> 00:05:00.486 A:middle
that are being changed
and the values

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:04:58.626 --> 00:05:00.486 A:middle
that are being changed
and the values

00:05:00.486 --> 00:05:03.056 A:middle
in the dictionary are
CAAnimationObjects describing

00:05:03.056 --> 00:05:04.306 A:middle
how you want us to change them.

00:05:05.806 --> 00:05:09.746 A:middle
So this is our method here
and suppose we wanted to snap

00:05:09.946 --> 00:05:12.116 A:middle
to multiples of 10
for our line thickness

00:05:12.116 --> 00:05:13.386 A:middle
as we did our animation.

00:05:13.776 --> 00:05:15.326 A:middle
We can't really do this here.

00:05:15.326 --> 00:05:16.386 A:middle
There's no way of specifying.

00:05:16.386 --> 00:05:18.526 A:middle
We don't know what the from
and to values are inside

00:05:18.526 --> 00:05:20.556 A:middle
of the class
defaultAnimationForKeyMethod.

00:05:22.016 --> 00:05:24.166 A:middle
So the way we fix
that is we're going

00:05:24.166 --> 00:05:25.906 A:middle
to use this thing called
CAKeyframeAnimation

00:05:25.906 --> 00:05:28.706 A:middle
and the key frame animation is
another animation type we use

00:05:28.706 --> 00:05:29.146 A:middle
a lot.

00:05:29.426 --> 00:05:32.576 A:middle
And in it you can, well
basically you specify values

00:05:32.576 --> 00:05:34.616 A:middle
to the key frames and you
can interpolate between those

00:05:34.616 --> 00:05:37.126 A:middle
or just have it use
those discreet values

00:05:37.126 --> 00:05:38.006 A:middle
at different time stamps.

00:05:38.356 --> 00:05:41.786 A:middle
And in this case we're going to
populate it with steps from 0

00:05:41.786 --> 00:05:43.886 A:middle
to 40 moving by 10 each time.

00:05:44.726 --> 00:05:49.776 A:middle
So once we create our animation
we turn it into a dictionary

00:05:49.886 --> 00:05:52.006 A:middle
and we set it on the
view.animationsproperty

00:05:52.366 --> 00:05:55.046 A:middle
and that's our new objective
C dictionary syntax there.

00:05:55.046 --> 00:05:56.676 A:middle
We specify the key
as line fitness.

00:05:56.726 --> 00:05:58.096 A:middle
The value is our
key frame animation.

00:05:58.486 --> 00:06:00.586 A:middle
And then we just talk to the
animator like we always did.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:05:58.486 --> 00:06:00.586 A:middle
And then we just talk to the
animator like we always did.

00:06:00.716 --> 00:06:04.396 A:middle
View.animator.linefitness=40
and we wind up with an animation

00:06:04.396 --> 00:06:07.716 A:middle
that looks like this instead,
which is exactly what we wanted.

00:06:07.716 --> 00:06:09.816 A:middle
So that's kind of cool.

00:06:10.256 --> 00:06:11.786 A:middle
But there's a few
other things you can do

00:06:11.786 --> 00:06:13.336 A:middle
with key frame animations
that are neat.

00:06:14.076 --> 00:06:17.246 A:middle
And I mentioned you could, you
know you have your key points

00:06:17.246 --> 00:06:18.766 A:middle
in there that have
specific values.

00:06:18.766 --> 00:06:20.306 A:middle
You don't need to interpolate
between those values.

00:06:20.306 --> 00:06:22.336 A:middle
And in fact with some types
of values you can interpolate.

00:06:22.816 --> 00:06:25.926 A:middle
So in this example I'm setting
these values to an array

00:06:25.926 --> 00:06:31.296 A:middle
of images of various Apple
products and the same as before,

00:06:31.296 --> 00:06:34.346 A:middle
I set the animations dictionary
there using our new animation

00:06:34.436 --> 00:06:36.446 A:middle
for the image property, in
this case this could be the an

00:06:36.486 --> 00:06:38.316 A:middle
NSImageView which
implements an image property.

00:06:38.636 --> 00:06:41.186 A:middle
And I just tell the animator
hey, change the image

00:06:41.186 --> 00:06:43.096 A:middle
to this final Apple TV image.

00:06:43.096 --> 00:06:44.436 A:middle
And something I want
to point out,

00:06:44.706 --> 00:06:47.786 A:middle
my key frame animation
specified five different types

00:06:47.786 --> 00:06:49.976 A:middle
of Apple products but it
didn't specify Apple TV.

00:06:50.586 --> 00:06:51.506 A:middle
And the reason for this is

00:06:51.506 --> 00:06:54.946 A:middle
that the value you tell your
animator proxy is the value

00:06:54.946 --> 00:06:57.106 A:middle
that's going to wind up
in the object ultimately.

00:06:57.566 --> 00:07:00.746 A:middle
The stuff in the animation
is just used along the way.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:06:57.566 --> 00:07:00.746 A:middle
The stuff in the animation
is just used along the way.

00:07:00.966 --> 00:07:04.156 A:middle
So if we see what this
looks like, recycling nicely

00:07:04.156 --> 00:07:05.876 A:middle
through the Apple
products in our image well,

00:07:05.876 --> 00:07:07.246 A:middle
and we end at Apple TV.

00:07:07.766 --> 00:07:09.046 A:middle
And you can do this
with other things.

00:07:09.046 --> 00:07:10.026 A:middle
You don't need to do
it with just images.

00:07:10.026 --> 00:07:11.636 A:middle
You can do it with string
values, for example.

00:07:11.636 --> 00:07:12.856 A:middle
In this case we have
a text field.

00:07:13.606 --> 00:07:15.386 A:middle
Our values are various
city names.

00:07:16.956 --> 00:07:19.146 A:middle
And again, if we set the
animations dictionary

00:07:19.146 --> 00:07:22.376 A:middle
on our text field using string
value this time as the key

00:07:22.686 --> 00:07:25.366 A:middle
and our key frame
animation again as the value,

00:07:25.436 --> 00:07:27.286 A:middle
and finally we tell
the animator,

00:07:27.286 --> 00:07:29.296 A:middle
hey your string value is San
Francisco because we want

00:07:29.296 --> 00:07:31.156 A:middle
to wind up in San
Francisco and all

00:07:31.156 --> 00:07:33.366 A:middle
of you here have already
completed the step, good job.

00:07:34.476 --> 00:07:35.506 A:middle
So we see what that looks like.

00:07:35.506 --> 00:07:37.816 A:middle
It animates our text field
just like we expected.

00:07:38.636 --> 00:07:40.466 A:middle
But you can do a
few more things.

00:07:40.466 --> 00:07:42.146 A:middle
You don't need to
restrict yourself

00:07:42.146 --> 00:07:43.146 A:middle
to key frame animations.

00:07:43.906 --> 00:07:47.066 A:middle
So if you're familiar
with NSCell and NSControl,

00:07:47.066 --> 00:07:49.096 A:middle
especially NSTextField,
you're familiar

00:07:49.096 --> 00:07:50.706 A:middle
with these things
we call formatters.

00:07:51.666 --> 00:07:55.436 A:middle
And formatters are objects which
take an arbitrary object type

00:07:55.476 --> 00:07:57.316 A:middle
and return a human
readable string value.

00:07:58.176 --> 00:07:59.346 A:middle
And in this case I'm going

00:07:59.346 --> 00:08:00.766 A:middle
to implement my own
formatter class,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:07:59.346 --> 00:08:00.766 A:middle
to implement my own
formatter class,

00:08:00.766 --> 00:08:03.596 A:middle
in this case the cleverly named
my formatter but we're going

00:08:03.596 --> 00:08:05.896 A:middle
to delegate most of our
actual formatting work

00:08:06.176 --> 00:08:06.826 A:middle
to NSDateFormatter.

00:08:08.326 --> 00:08:10.356 A:middle
So our string for object
value method looks like this,

00:08:10.356 --> 00:08:13.556 A:middle
we take in an NS number and we
just ask for its double value.

00:08:13.556 --> 00:08:16.276 A:middle
And one of the ways we
represent dates on our system is

00:08:16.276 --> 00:08:18.906 A:middle
as the number of seconds
since January 1, 2001,

00:08:18.936 --> 00:08:21.546 A:middle
that's the reference dater,
in this case the time interval

00:08:21.546 --> 00:08:22.626 A:middle
since the reference date.

00:08:23.076 --> 00:08:25.256 A:middle
And we can construct a new date

00:08:25.326 --> 00:08:26.996 A:middle
from that double value
representing the number

00:08:26.996 --> 00:08:27.426 A:middle
of seconds.

00:08:27.426 --> 00:08:29.926 A:middle
And then we just plug
this into our NSFormatter

00:08:29.926 --> 00:08:32.976 A:middle
and it gives us a nice human
readable string for the date.

00:08:33.655 --> 00:08:35.285 A:middle
And we couple that
with this code.

00:08:35.506 --> 00:08:38.186 A:middle
We go ahead, and I want this to
be a long, slow animation for us

00:08:38.216 --> 00:08:40.056 A:middle
to savor so it could
take 20 seconds.

00:08:40.496 --> 00:08:42.556 A:middle
And here I'm replacing
the animations dictionary

00:08:42.556 --> 00:08:43.596 A:middle
on the text field again,

00:08:43.986 --> 00:08:45.616 A:middle
this time for the
double value property.

00:08:45.616 --> 00:08:47.396 A:middle
Double value is a property most

00:08:47.396 --> 00:08:49.166 A:middle
of our controls themselves
implement,

00:08:49.396 --> 00:08:51.666 A:middle
and again it's a double so
it's easily interpolatable

00:08:51.666 --> 00:08:53.076 A:middle
using CABasicAnimation.

00:08:53.966 --> 00:08:57.116 A:middle
I set the text field's double
value to the initial value of 0

00:08:57.116 --> 00:08:58.786 A:middle
and then I ramp it
up to 1,000,000.

00:08:59.566 --> 00:09:02.146 A:middle
And when you do this
you get this animation.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:08:59.566 --> 00:09:02.146 A:middle
And when you do this
you get this animation.

00:09:03.046 --> 00:09:06.186 A:middle
We are actually formatting
the interpolated values

00:09:06.186 --> 00:09:10.116 A:middle
for every second between January
1, 2001 and wherever this ends.

00:09:10.896 --> 00:09:13.316 A:middle
So you can also use
this for other things,

00:09:13.316 --> 00:09:15.426 A:middle
for example you can implement
your own double property

00:09:15.426 --> 00:09:18.026 A:middle
that we can interpolate because
it's a double and say ramp it

00:09:18.026 --> 00:09:20.426 A:middle
between 0 and 1 and then
use that as the input

00:09:20.426 --> 00:09:24.036 A:middle
to your own calculation to do a
more complicated interpolation.

00:09:24.296 --> 00:09:26.006 A:middle
And yes, I love you
so much I dug

00:09:26.006 --> 00:09:28.136 A:middle
up the old Chicago font
for that animation.

00:09:29.036 --> 00:09:34.606 A:middle
[applause] So we're going to get

00:09:34.606 --> 00:09:37.826 A:middle
into something I call chaining
animations now which is simple

00:09:37.826 --> 00:09:39.926 A:middle
but can look complicated.

00:09:39.926 --> 00:09:43.726 A:middle
Don't be daunted by this
next slide, that one.

00:09:43.726 --> 00:09:45.066 A:middle
You can be daunted by
this slide, that's okay.

00:09:45.986 --> 00:09:49.016 A:middle
So in this case we just
have a few animation groups.

00:09:49.426 --> 00:09:50.796 A:middle
So we have our first
animation group

00:09:50.796 --> 00:09:52.756 A:middle
and we're setting
properties for our first view.

00:09:52.756 --> 00:09:55.166 A:middle
And then the completion handler

00:09:55.166 --> 00:09:57.786 A:middle
of that animation group
contains another animation group

00:09:57.926 --> 00:09:59.666 A:middle
and we set properties
for our second view,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:10:00.316 --> 00:10:02.406 A:middle
likewise the completion handler

00:10:02.406 --> 00:10:04.346 A:middle
for that group contains
another animation group

00:10:04.636 --> 00:10:06.766 A:middle
and we're just setting
properties for view three here

00:10:06.846 --> 00:10:10.166 A:middle
so you can see here's the 3rd
animation group encapsulated

00:10:10.166 --> 00:10:12.996 A:middle
within the second
animation group, encapsulated

00:10:13.166 --> 00:10:15.456 A:middle
within the 1st animation group.

00:10:16.436 --> 00:10:18.986 A:middle
So I'm going to go ahead
and show you a demo

00:10:18.986 --> 00:10:23.966 A:middle
of how you can use
this in your own code.

00:10:25.156 --> 00:10:27.316 A:middle
So let me show you what
this program is here.

00:10:28.876 --> 00:10:32.496 A:middle
This is just a simple
list of fonts on the left

00:10:32.706 --> 00:10:35.886 A:middle
and a rotated shadowed preview
of that font on the right

00:10:35.886 --> 00:10:37.676 A:middle
and we can actually select
multiple ones of these

00:10:37.996 --> 00:10:39.816 A:middle
and we get this sort
of page fanning effect.

00:10:39.816 --> 00:10:43.186 A:middle
And if you've used mail and you
select multiple messages you

00:10:43.186 --> 00:10:44.606 A:middle
notice they do a
very similar effect.

00:10:45.036 --> 00:10:46.326 A:middle
One of the differences though is

00:10:46.326 --> 00:10:49.816 A:middle
that mail actually slides these
messages in from left to right

00:10:49.816 --> 00:10:52.626 A:middle
and then right to left
as they come in and out.

00:10:52.626 --> 00:10:55.156 A:middle
And additionally it implements
this really cool effect

00:10:56.006 --> 00:10:58.376 A:middle
where they slide
in one at a time.

00:10:58.376 --> 00:11:00.826 A:middle
So I'm going to show you how
we can take this program here

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:10:58.376 --> 00:11:00.826 A:middle
So I'm going to show you how
we can take this program here

00:11:00.826 --> 00:11:02.166 A:middle
and implement all of that.

00:11:03.276 --> 00:11:06.416 A:middle
So the important methods to be
aware of are these three here,

00:11:06.966 --> 00:11:08.136 A:middle
update visible views,

00:11:09.526 --> 00:11:13.896 A:middle
our controller object here
has two NSIndexSet I-bars

00:11:13.896 --> 00:11:16.306 A:middle
and an index set is
basically just an array

00:11:16.306 --> 00:11:19.126 A:middle
of specific indexes but you
can perform set operations

00:11:19.126 --> 00:11:21.116 A:middle
like union, interception,
subtraction on them.

00:11:21.656 --> 00:11:25.536 A:middle
And one of these index sets
stores the rows or fonts

00:11:26.056 --> 00:11:29.276 A:middle
that we want to be visible
and another stores the ones

00:11:29.276 --> 00:11:30.406 A:middle
that actually are visible.

00:11:31.086 --> 00:11:35.056 A:middle
So to calculate the ones we
want to remove we take the ones

00:11:35.056 --> 00:11:37.446 A:middle
that are actually visible and
we subtract the ones we want

00:11:37.446 --> 00:11:40.296 A:middle
to be visible and the remainder
there is what we need to take

00:11:40.296 --> 00:11:41.116 A:middle
out of the view hierarchy.

00:11:41.786 --> 00:11:44.206 A:middle
Similarly when we want to bring
stuff in we take what we want

00:11:44.206 --> 00:11:46.626 A:middle
to be visible and we subtract
what's actually visible

00:11:46.626 --> 00:11:47.946 A:middle
and that tells us
what we need to add.

00:11:48.726 --> 00:11:50.646 A:middle
So then we just enumerate
over these index sets.

00:11:50.646 --> 00:11:52.656 A:middle
And we hide the rows
that shouldn't be there

00:11:52.756 --> 00:11:54.216 A:middle
and we add the rows
that are there.

00:11:54.216 --> 00:11:56.516 A:middle
And if we go ahead and
look at the implementations

00:11:56.516 --> 00:11:57.946 A:middle
of these methods,
here's the hide method,

00:11:58.016 --> 00:11:59.986 A:middle
we just have an early out in
case it's already visible.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:12:00.346 --> 00:12:01.906 A:middle
We update our I-bar.

00:12:01.906 --> 00:12:04.616 A:middle
We grab a cache view for the
appropriate font and we take it

00:12:04.616 --> 00:12:07.566 A:middle
out of our view hierarchy.

00:12:07.736 --> 00:12:11.806 A:middle
The show method is a little more
tricky but it's not that bad,

00:12:11.806 --> 00:12:14.926 A:middle
same thing, early out, update
our I-bar, grab the view

00:12:15.276 --> 00:12:17.566 A:middle
and here we position it within
our right side container

00:12:17.566 --> 00:12:18.706 A:middle
and we just center it.

00:12:19.636 --> 00:12:20.666 A:middle
So what we want to do

00:12:20.666 --> 00:12:23.556 A:middle
for animation though is
complicate this up a bit.

00:12:23.906 --> 00:12:25.466 A:middle
We want it to slide
in left to right.

00:12:25.946 --> 00:12:28.096 A:middle
So just setting the final
bounds isn't enough.

00:12:28.096 --> 00:12:31.056 A:middle
We actually need
two new variables.

00:12:31.056 --> 00:12:36.046 A:middle
We need one to specify the
origin of view of the view

00:12:36.046 --> 00:12:39.166 A:middle
when it's on screen and
that's actually the same

00:12:39.306 --> 00:12:40.846 A:middle
as the value we've
already computed

00:12:41.206 --> 00:12:42.926 A:middle
so we can take what we
set the view frame origin

00:12:42.926 --> 00:12:44.366 A:middle
and we just assign
it to this sort

00:12:44.366 --> 00:12:45.686 A:middle
of temporary in origin value.

00:12:45.726 --> 00:12:49.326 A:middle
And then we need another one
which says what the origin

00:12:49.326 --> 00:12:51.576 A:middle
of the view should be when
it's off screen or our

00:12:51.576 --> 00:12:52.676 A:middle
out origin in this case.

00:12:53.146 --> 00:12:55.446 A:middle
And when it's off screen we
want the right edge of our view

00:12:56.106 --> 00:12:58.686 A:middle
to match the left edge of the
container view so we're going

00:12:58.686 --> 00:13:00.436 A:middle
to take the MidX of the
container view instead

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:12:58.686 --> 00:13:00.436 A:middle
to take the MidX of the
container view instead

00:13:00.706 --> 00:13:03.226 A:middle
and instead of subtracting
1/2 of our width we're going

00:13:03.226 --> 00:13:04.106 A:middle
to subtract our whole width

00:13:04.106 --> 00:13:06.916 A:middle
and that aligns our
edges like we'd expect.

00:13:07.006 --> 00:13:08.086 A:middle
We don't need this bit anymore.

00:13:09.686 --> 00:13:11.936 A:middle
So one of the things we can do
now though is we're going to,

00:13:11.936 --> 00:13:13.356 A:middle
this will look familiar
if you're paying attention

00:13:13.356 --> 00:13:15.956 A:middle
to the slides, we're going
to make a CABasicAnimation

00:13:22.226 --> 00:13:24.976 A:middle
and we're going to set
its from and to values.

00:13:35.136 --> 00:13:39.816 A:middle
We're going to start at the
out origin and we're going

00:13:39.816 --> 00:13:41.486 A:middle
to animate to the in origin.

00:13:46.486 --> 00:13:48.236 A:middle
And it's important
to remember our steps

00:13:48.266 --> 00:13:50.846 A:middle
of setting the animations
dictionary on the view

00:13:51.106 --> 00:14:00.946 A:middle
so view.animations=frameorigin,
with our animation there.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:13:51.106 --> 00:14:00.946 A:middle
so view.animations=frameorigin,
with our animation there.

00:14:00.996 --> 00:14:03.526 A:middle
And then we tell
the animator again,

00:14:03.646 --> 00:14:04.856 A:middle
hey we want to animate in.

00:14:12.976 --> 00:14:19.006 A:middle
And we actually want to add
our subview before we do that.

00:14:20.246 --> 00:14:22.496 A:middle
So similarly for
removing this we're going

00:14:22.496 --> 00:14:23.896 A:middle
to do a very similar
thing, we're also going

00:14:23.896 --> 00:14:25.786 A:middle
to specify an animation
for how to remove it.

00:14:26.066 --> 00:14:28.276 A:middle
So we actually copy and
paste a whole lot of this.

00:14:29.076 --> 00:14:31.466 A:middle
So we copy and paste our
container bounds, our view frame

00:14:31.466 --> 00:14:32.546 A:middle
and our from and to values.

00:14:33.156 --> 00:14:34.886 A:middle
But in this case we need
our from and to values

00:14:34.886 --> 00:14:37.936 A:middle
to be switched so
that's an easy fix.

00:14:39.846 --> 00:14:43.466 A:middle
And additionally our use of the
animator is also very similar

00:14:43.466 --> 00:14:45.016 A:middle
so we can take that
again as well.

00:14:45.846 --> 00:14:48.676 A:middle
Importantly we're replacing
animating to the in origin

00:14:48.716 --> 00:14:49.886 A:middle
with animating to the out origin

00:14:49.886 --> 00:14:51.576 A:middle
but we have one remaining
problem here.

00:14:51.576 --> 00:14:53.546 A:middle
You'll notice before we
remove from the super view

00:14:53.876 --> 00:14:56.316 A:middle
if we did this immediately we
would tell our view to animate

00:14:56.316 --> 00:14:58.336 A:middle
and before it ever had a chance
to draw we would remove it.

00:14:58.956 --> 00:15:00.266 A:middle
So we're going to go ahead

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:14:58.956 --> 00:15:00.266 A:middle
So we're going to go ahead

00:15:00.266 --> 00:15:04.326 A:middle
and open animation group
using NSAnimationContext run

00:15:04.376 --> 00:15:05.046 A:middle
animation group.

00:15:05.086 --> 00:15:08.906 A:middle
We're going to take our changes
that kick off the animation

00:15:08.906 --> 00:15:10.186 A:middle
and move them into
the changes block.

00:15:10.186 --> 00:15:12.736 A:middle
We're going to take
the completion handler

00:15:14.066 --> 00:15:17.686 A:middle
and we're going to take our
removeFromSuperview from this.

00:15:18.066 --> 00:15:18.976 A:middle
And this prevents our view

00:15:18.976 --> 00:15:21.926 A:middle
from being prematurely removed
before animations had a chance

00:15:21.926 --> 00:15:22.286 A:middle
to run.

00:15:22.356 --> 00:15:25.336 A:middle
So if we go ahead and run
this and we cross our fingers

00:15:25.336 --> 00:15:30.956 A:middle
that it compiles, yay,
we get this instead.

00:15:31.036 --> 00:15:34.846 A:middle
And you can see these things
nicely exchanging locations come

00:15:34.846 --> 00:15:37.266 A:middle
in from the left and
exiting to the left.

00:15:37.266 --> 00:15:39.356 A:middle
And that works, we
bring multiple things,

00:15:39.626 --> 00:15:41.676 A:middle
or bring them out,
so that's great.

00:15:41.956 --> 00:15:44.006 A:middle
But one of the differences
here is these all fly

00:15:44.006 --> 00:15:44.916 A:middle
in at the same time.

00:15:44.916 --> 00:15:48.096 A:middle
We want them to come in one at
a time so how can we do that?

00:15:48.176 --> 00:15:51.946 A:middle
Well if we go back to our update
visible rows method I'm going

00:15:51.946 --> 00:15:54.776 A:middle
to go ahead and declare some
block scope storage here

00:15:55.076 --> 00:15:57.476 A:middle
and just keep an integer that
keeps track of the number

00:15:57.476 --> 00:15:59.036 A:middle
of animations we've
added in this pass.

00:15:59.036 --> 00:16:01.976 A:middle
So I'm going to begin an
animation group again.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:15:59.036 --> 00:16:01.976 A:middle
So I'm going to begin an
animation group again.

00:16:08.986 --> 00:16:13.316 A:middle
And I'm going to copy and paste
our code that enumerates our

00:16:13.416 --> 00:16:16.726 A:middle
in and out index sets.

00:16:16.856 --> 00:16:19.076 A:middle
And one of the differences
though is I only want

00:16:19.076 --> 00:16:20.566 A:middle
to remove or add a single view.

00:16:21.406 --> 00:16:22.346 A:middle
So I'm going to go ahead

00:16:22.346 --> 00:16:24.956 A:middle
and enter increment my counter
inside of my enumeration

00:16:25.246 --> 00:16:28.206 A:middle
and the enumeration method
has this handy stop argument

00:16:28.206 --> 00:16:31.956 A:middle
that I can set to yes to exit
early and I'm going to set

00:16:31.956 --> 00:16:34.996 A:middle
that to yes if our count has
been something other than 0,

00:16:34.996 --> 00:16:36.306 A:middle
which it will always
be in this case.

00:16:36.606 --> 00:16:39.116 A:middle
I'm going to make the same
change for adding a view

00:16:39.996 --> 00:16:41.736 A:middle
but instead of always
enumerating the views

00:16:41.736 --> 00:16:46.666 A:middle
to add I'm only going to do it
if we haven't removed anything

00:16:46.666 --> 00:16:49.246 A:middle
so we're only going to get
one removal or one addition

00:16:49.416 --> 00:16:53.756 A:middle
for pass through this.

00:16:54.376 --> 00:16:58.476 A:middle
Now if we didn't add
anything this time, excuse me,

00:16:58.856 --> 00:17:01.266 A:middle
if we did add something
or remove something

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:16:58.856 --> 00:17:01.266 A:middle
if we did add something
or remove something

00:17:01.766 --> 00:17:04.945 A:middle
after our animation has
completed, we want to go ahead

00:17:04.945 --> 00:17:06.346 A:middle
and just run this another time

00:17:06.406 --> 00:17:08.935 A:middle
so we call self-update
visible views

00:17:09.546 --> 00:17:16.256 A:middle
and of course we add a semicolon
here to appease the gods.

00:17:16.506 --> 00:17:18.925 A:middle
So we still have
our nice animation.

00:17:19.566 --> 00:17:22.036 A:middle
But you'll notice as I bring
these things in they come in one

00:17:22.036 --> 00:17:24.675 A:middle
at a time just like they do
in mail and they exit one

00:17:24.675 --> 00:17:25.955 A:middle
at a time just like
they do in mail

00:17:26.256 --> 00:17:27.766 A:middle
and that's exactly
what we're looking for.

00:17:27.766 --> 00:17:28.886 A:middle
It wasn't as complicated

00:17:28.886 --> 00:17:32.066 A:middle
as having 10 animation groups
stuck inside each other.

00:17:32.346 --> 00:17:34.526 A:middle
It was just the act of
invoking our single method

00:17:34.526 --> 00:17:37.516 A:middle
from the completion handler
that we had already kicked off.

00:17:39.396 --> 00:17:41.566 A:middle
So that's how you can
use animation chaining

00:17:41.686 --> 00:17:44.256 A:middle
to implement some fairly
entertaining animations.

00:17:44.866 --> 00:17:51.686 A:middle
That concludes our demo
for chaining animations.

00:17:51.736 --> 00:17:53.846 A:middle
So on to the next thing,
implicit animation.

00:17:53.846 --> 00:17:55.906 A:middle
This is something we
added in Mac OS 10.8.

00:17:57.026 --> 00:18:01.226 A:middle
And some of you have probably
already used it and enjoyed it

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:17:57.026 --> 00:18:01.226 A:middle
And some of you have probably
already used it and enjoyed it

00:18:01.226 --> 00:18:02.816 A:middle
and or have been
terrified have it.

00:18:03.476 --> 00:18:07.116 A:middle
So before we added this you
would use view.animator.frame

00:18:07.266 --> 00:18:09.246 A:middle
and you would just set
it to a new rectangle

00:18:09.716 --> 00:18:12.566 A:middle
and with implicit animation
you could use this instead.

00:18:12.686 --> 00:18:14.746 A:middle
You tell the current animation
context that it's okay

00:18:14.746 --> 00:18:15.966 A:middle
to allow implicit animation

00:18:15.966 --> 00:18:18.246 A:middle
and then you set the frame
on the view directly.

00:18:19.106 --> 00:18:21.936 A:middle
So you're actually
animating as a side effect

00:18:21.936 --> 00:18:24.996 A:middle
of setting the properties
on your view.

00:18:25.216 --> 00:18:28.476 A:middle
So consider this method here
called swapSubviewFrames.

00:18:29.686 --> 00:18:31.486 A:middle
In this we just take
our first two subviews,

00:18:31.566 --> 00:18:35.956 A:middle
we grab their frame rectangles
and we set subview 0's frame

00:18:35.996 --> 00:18:38.086 A:middle
to subviews 1 frame
and vice versa.

00:18:38.786 --> 00:18:43.656 A:middle
And if we just execute
this we get this,

00:18:43.706 --> 00:18:46.326 A:middle
they just swap positions,
which is correct

00:18:46.326 --> 00:18:47.716 A:middle
but it's not necessarily
what we want.

00:18:48.556 --> 00:18:50.486 A:middle
You can do this with allowances
in animation really easily,

00:18:50.486 --> 00:18:52.736 A:middle
we just setanimation context.

00:18:52.736 --> 00:18:53.466 A:middle
currentcontext.

00:18:53.466 --> 00:18:55.436 A:middle
allows implicitaniimaton=guest

00:18:55.616 --> 00:18:57.556 A:middle
and we execute our
same method as before.

00:18:57.556 --> 00:18:59.456 A:middle
And in this case
it looks like this.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:19:00.176 --> 00:19:01.506 A:middle
So when would you use this?

00:19:01.856 --> 00:19:03.256 A:middle
You would use this in places

00:19:03.256 --> 00:19:05.416 A:middle
where the animator proxy
doesn't have visibility

00:19:05.416 --> 00:19:06.536 A:middle
into what's being animated.

00:19:06.786 --> 00:19:09.046 A:middle
You'll notice swap subview
frames was an action.

00:19:09.156 --> 00:19:10.336 A:middle
It didn't take an argument.

00:19:10.336 --> 00:19:12.576 A:middle
The animator can't actually
interpolate anything in there

00:19:12.576 --> 00:19:15.516 A:middle
so you can use the
animation context

00:19:15.656 --> 00:19:19.736 A:middle
AllowsImplicitAnimationProperty
to animate those frames

00:19:19.736 --> 00:19:21.246 A:middle
as a side effect of
your action method.

00:19:22.826 --> 00:19:24.376 A:middle
There are some caveats.

00:19:24.466 --> 00:19:25.986 A:middle
First it doesn't
work for everything.

00:19:26.316 --> 00:19:29.406 A:middle
It will work reliably for frame,
frame size and frame origin,

00:19:30.086 --> 00:19:31.426 A:middle
pass that you're
beginning to pray.

00:19:32.096 --> 00:19:34.156 A:middle
But it does tend to
work for more things

00:19:34.156 --> 00:19:35.566 A:middle
when you're layer backed and
we're talk a little bit more

00:19:35.566 --> 00:19:37.196 A:middle
about layer backing in a bit.

00:19:37.196 --> 00:19:41.056 A:middle
In fact we'll talk a bit more
about layer backing right now.

00:19:42.666 --> 00:19:46.446 A:middle
So I'm going to give a brief
overview of core animation,

00:19:46.446 --> 00:19:48.166 A:middle
a very brief overview
of core animation here.

00:19:49.076 --> 00:19:51.346 A:middle
And you're probably already
familiar with CALayer.

00:19:51.466 --> 00:19:52.996 A:middle
And this is an object
that contains lots

00:19:52.996 --> 00:19:55.686 A:middle
of properties very similar
to MSView, it has like bounds

00:19:55.686 --> 00:19:57.006 A:middle
and position and opacity.

00:19:57.416 --> 00:19:58.236 A:middle
And these are all properties

00:19:58.236 --> 00:19:59.796 A:middle
that Core Animation
knows how to animate.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:20:00.666 --> 00:20:03.266 A:middle
And if you want to use
explicit animation you want

00:20:03.266 --> 00:20:04.846 A:middle
to tell core animation
to animate this,

00:20:04.846 --> 00:20:07.136 A:middle
you don't modify the
property, you tell the layer

00:20:07.136 --> 00:20:09.576 A:middle
to add an animation that
will look kind of like this.

00:20:09.576 --> 00:20:11.836 A:middle
Here we construct
another CABasicAnimation.

00:20:12.216 --> 00:20:13.206 A:middle
We set its from value.

00:20:13.206 --> 00:20:14.076 A:middle
We set its to value.

00:20:14.076 --> 00:20:16.336 A:middle
And we add it to the
animations on that layer.

00:20:16.336 --> 00:20:18.226 A:middle
Well what does that do?

00:20:18.886 --> 00:20:21.486 A:middle
Well first it doesn't
do anything destructive.

00:20:21.486 --> 00:20:23.876 A:middle
It's not actually setting
the property on the layer.

00:20:23.876 --> 00:20:26.596 A:middle
It just temporarily
overrides that property

00:20:26.596 --> 00:20:28.706 A:middle
for rendering purposes.

00:20:29.056 --> 00:20:30.386 A:middle
So what are the consequences
of this?

00:20:30.386 --> 00:20:32.126 A:middle
If you take a look at
this snippet here we have

00:20:32.126 --> 00:20:35.236 A:middle
that basic animation again and
we're interpolating from .75

00:20:35.426 --> 00:20:41.316 A:middle
to .25 and it really
is only applying

00:20:41.316 --> 00:20:42.376 A:middle
that for rendering purposes.

00:20:42.376 --> 00:20:45.086 A:middle
If you actually ask the layer
what it is while it's doing its

00:20:45.086 --> 00:20:47.136 A:middle
interpolation between
.75 and .25,

00:20:47.636 --> 00:20:48.466 A:middle
it's going to tell you this.

00:20:48.466 --> 00:20:50.886 A:middle
It's going to tell you it's
opacity is a default value of 1

00:20:51.166 --> 00:20:52.686 A:middle
because nothing has
actually changed

00:20:52.686 --> 00:20:54.006 A:middle
that property inside the layer.

00:20:55.436 --> 00:20:59.056 A:middle
So again we have to
have implicit animation

00:20:59.056 --> 00:21:01.636 A:middle
for core animation as well,
why have one of everything

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:20:59.056 --> 00:21:01.636 A:middle
for core animation as well,
why have one of everything

00:21:01.636 --> 00:21:04.126 A:middle
when we can have more than one?

00:21:04.126 --> 00:21:06.286 A:middle
So in this case animations
are avid

00:21:06.286 --> 00:21:07.546 A:middle
in response to property changes.

00:21:07.546 --> 00:21:09.676 A:middle
If you call this code
you're setting your property

00:21:09.676 --> 00:21:12.506 A:middle
on your layer, you actually
get all of this for free,

00:21:12.506 --> 00:21:14.486 A:middle
which is kind of handy.

00:21:14.486 --> 00:21:16.146 A:middle
It makes the basic
animation for you.

00:21:16.146 --> 00:21:18.586 A:middle
It figures out that the two
values, what you're setting it

00:21:18.586 --> 00:21:20.816 A:middle
from and what the from value
is and what's already on screen

00:21:21.026 --> 00:21:22.996 A:middle
and then it adds it as an
animation to your layer.

00:21:23.646 --> 00:21:28.126 A:middle
If you're curious about that
there's more information on this

00:21:28.126 --> 00:21:31.136 A:middle
in the CAAction Protocol which
lives inside of CALayer.h,

00:21:31.136 --> 00:21:32.436 A:middle
you can do some pretty
clever things

00:21:32.436 --> 00:21:34.516 A:middle
but that's beyond the scope of
what we're talking about here.

00:21:35.676 --> 00:21:37.826 A:middle
Tying this back into
views though,

00:21:37.826 --> 00:21:39.356 A:middle
how does this effect
layer backed views?

00:21:39.696 --> 00:21:43.186 A:middle
Well first of all views can
optionally delegate a lot

00:21:43.186 --> 00:21:45.956 A:middle
of the drawing of animating
responsibility to CALayer.

00:21:46.596 --> 00:21:49.196 A:middle
And you would generally get this

00:21:49.196 --> 00:21:51.446 A:middle
by studying the wantsLayer
property of your view to yes.

00:21:51.446 --> 00:21:53.696 A:middle
And what that does is
it causes your view

00:21:53.696 --> 00:21:56.836 A:middle
to manage its own CALayer
and it also causes all

00:21:56.836 --> 00:21:59.146 A:middle
of its descendants to
manage their own CALayers.

00:21:59.736 --> 00:22:03.966 A:middle
And there's a few reasons you
might do this besides animation,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:21:59.736 --> 00:22:03.966 A:middle
And there's a few reasons you
might do this besides animation,

00:22:04.246 --> 00:22:07.006 A:middle
performance and memory are the
big ones, and they trade off,

00:22:07.006 --> 00:22:10.866 A:middle
sometimes non very predictable
ways but we trust you

00:22:10.866 --> 00:22:12.556 A:middle
to balance it for your
own applications needs.

00:22:13.426 --> 00:22:14.416 A:middle
The take away from
this though is

00:22:14.416 --> 00:22:15.826 A:middle
when you're using
a layer back view,

00:22:15.826 --> 00:22:17.266 A:middle
it's going to behave
a little differently

00:22:17.266 --> 00:22:19.616 A:middle
than a non-layer
back view, surprise.

00:22:20.226 --> 00:22:21.946 A:middle
If you want to know more

00:22:21.946 --> 00:22:24.196 A:middle
about these differences
I encourage you to stick

00:22:24.196 --> 00:22:27.066 A:middle
around for our next session,
215, Optimizing Drawing

00:22:27.066 --> 00:22:27.946 A:middle
and Scrolling on OS X.

00:22:28.686 --> 00:22:32.056 A:middle
I realize this slide says this
was 11 hours ago and we did

00:22:32.056 --> 00:22:34.876 A:middle
in fact run the session 11
hours ago but we're going

00:22:34.876 --> 00:22:38.036 A:middle
to run it again in 40
minutes or so just for you.

00:22:40.301 --> 00:22:42.301 A:middle
[laughter and applause]

00:22:42.586 --> 00:22:45.096 A:middle
So how does AppKit run the
animation for non-layer

00:22:45.286 --> 00:22:46.356 A:middle
or even layer backed view

00:22:46.356 --> 00:22:48.166 A:middle
over not delegating
our responsibility

00:22:48.166 --> 00:22:48.816 A:middle
over core animation?

00:22:49.856 --> 00:22:52.736 A:middle
Well first of all we keep
this animation around.

00:22:52.736 --> 00:22:55.296 A:middle
It doesn't immediately change
the property in your view.

00:22:56.226 --> 00:22:59.996 A:middle
And we periodically wakeup the
main thread to do our animation.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:23:00.046 --> 00:23:03.886 A:middle
Every time we wakeup we're
going to evaluate that animation

00:23:03.886 --> 00:23:06.216 A:middle
for the current time and figure
out what the current value is

00:23:07.116 --> 00:23:08.256 A:middle
and we're going to apply it

00:23:08.256 --> 00:23:10.116 A:middle
to the object that's being
animated, in this case the view.

00:23:10.766 --> 00:23:13.956 A:middle
So we're actually replacing
the property inside the view,

00:23:13.956 --> 00:23:14.936 A:middle
that means you'll see all

00:23:14.936 --> 00:23:16.756 A:middle
of your key value
accessors get called,

00:23:16.756 --> 00:23:18.036 A:middle
all the change notifications
get called,

00:23:18.036 --> 00:23:19.786 A:middle
all the NS notifications
get posted.

00:23:20.626 --> 00:23:23.266 A:middle
And the drawing of this
property actually just happens

00:23:23.266 --> 00:23:25.616 A:middle
as a side effect of the
regular NS view drawing cycle.

00:23:25.616 --> 00:23:26.776 A:middle
And when we change a property

00:23:26.776 --> 00:23:29.156 A:middle
that effects the visual
appearance of NS view,

00:23:29.386 --> 00:23:31.546 A:middle
the view gets marked as
needing display and we draw

00:23:31.546 --> 00:23:33.396 A:middle
that on the next from loop pass.

00:23:34.616 --> 00:23:37.516 A:middle
So here's an example, if you
do an animation you're going

00:23:37.516 --> 00:23:39.456 A:middle
to see this happening,
the main thread wakes up

00:23:39.456 --> 00:23:42.096 A:middle
and every time it wakes up it
changes the size of a view.

00:23:43.166 --> 00:23:46.976 A:middle
Core animation works
a little differently

00:23:47.506 --> 00:23:50.636 A:middle
so it also stores the animation
in addition to property

00:23:50.636 --> 00:23:52.176 A:middle
on the layer so that's similar.

00:23:53.066 --> 00:23:56.016 A:middle
And this is somewhat
nebulously phrased, it is waking

00:23:56.016 --> 00:23:58.846 A:middle
up periodically on a background
thread or maybe another process

00:23:59.756 --> 00:24:01.976 A:middle
but it does different
things from this point on.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:23:59.756 --> 00:24:01.976 A:middle
but it does different
things from this point on.

00:24:02.556 --> 00:24:04.936 A:middle
It evaluates the animation
but only evaluates it as part

00:24:04.936 --> 00:24:07.546 A:middle
of rendering so the results
you see on screen aren't going

00:24:07.546 --> 00:24:09.106 A:middle
to be back propagated
into your layer.

00:24:09.676 --> 00:24:12.386 A:middle
The property of the layer is
left unchanged and unmodified.

00:24:13.446 --> 00:24:16.156 A:middle
So suppose you're
running the same animation

00:24:16.156 --> 00:24:18.816 A:middle
with a layered back view and we
delegate this to core animation.

00:24:19.256 --> 00:24:22.476 A:middle
You're going to notice hey
the size on screen is changing

00:24:22.576 --> 00:24:25.346 A:middle
but we're never doing
anything on the main thread.

00:24:25.346 --> 00:24:26.846 A:middle
None of those key
value accessors

00:24:26.846 --> 00:24:28.396 A:middle
or notifications
are being posted

00:24:28.526 --> 00:24:30.686 A:middle
so that's an important
difference.

00:24:31.946 --> 00:24:34.146 A:middle
In general we try to let
core animation drive things

00:24:34.146 --> 00:24:34.806 A:middle
because doing stuff

00:24:34.806 --> 00:24:37.046 A:middle
in the background is
usually more performant

00:24:37.046 --> 00:24:39.246 A:middle
and lets us be more generous

00:24:39.246 --> 00:24:42.436 A:middle
with what the main
thread can do.

00:24:43.076 --> 00:24:45.676 A:middle
The frame, frame origin
and frame properties

00:24:45.726 --> 00:24:47.716 A:middle
of NSView are important
exceptions to this

00:24:47.716 --> 00:24:49.936 A:middle
where we don't necessarily
let Core Animation drive them.

00:24:50.716 --> 00:24:53.646 A:middle
And our decision is
governed largely by the value

00:24:53.646 --> 00:24:56.456 A:middle
of the layerContentsRedrawPolicy
of your NSView,

00:24:57.256 --> 00:25:00.766 A:middle
and again that will be covered
in greater detail in session 215

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:24:57.256 --> 00:25:00.766 A:middle
and again that will be covered
in greater detail in session 215

00:25:00.766 --> 00:25:02.496 A:middle
in this room right
after this session.

00:25:04.386 --> 00:25:06.236 A:middle
So I want to call out
this code snippet here.

00:25:06.236 --> 00:25:07.076 A:middle
This is very simple.

00:25:07.656 --> 00:25:10.186 A:middle
We have a window and we
want it to animate in a view

00:25:10.186 --> 00:25:13.126 A:middle
so we want it to look like that.

00:25:14.166 --> 00:25:15.416 A:middle
We set the views initial frame

00:25:15.476 --> 00:25:17.516 A:middle
and then we told the animator
what its final frame was.

00:25:17.516 --> 00:25:20.806 A:middle
So if we go back to
here the only difference

00:25:20.806 --> 00:25:23.116 A:middle
in the snippet is that
we've told it wants a layer.

00:25:23.116 --> 00:25:26.676 A:middle
If we run that animation
we see this.

00:25:27.136 --> 00:25:31.536 A:middle
Again the screen changed,
it's technically in animation

00:25:31.536 --> 00:25:33.046 A:middle
but it's not a great animation.

00:25:33.046 --> 00:25:36.786 A:middle
It's definitely not what we
wanted so why did that happen?

00:25:36.786 --> 00:25:38.526 A:middle
Well first, Core
Animation groups all

00:25:38.526 --> 00:25:40.016 A:middle
of its changes into
transactions.

00:25:41.186 --> 00:25:44.646 A:middle
And if you're using
implicit animation,

00:25:44.916 --> 00:25:47.286 A:middle
Core Animation is going to try
to grab the on screen value

00:25:47.286 --> 00:25:51.006 A:middle
as your from value but the
view was never on screen

00:25:51.096 --> 00:25:52.746 A:middle
so there wasn't any
on screen value.

00:25:53.076 --> 00:25:56.176 A:middle
That initial value we set on
the view is actually replaced

00:25:56.176 --> 00:25:59.026 A:middle
in that same transaction by the
value we set on the animator

00:25:59.626 --> 00:26:02.356 A:middle
so there's at least two
easy ways to fix this

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:25:59.626 --> 00:26:02.356 A:middle
so there's at least two
easy ways to fix this

00:26:02.356 --> 00:26:03.346 A:middle
and I'm going to
show them to you.

00:26:04.086 --> 00:26:08.016 A:middle
So in this case we're going back
to manually specifying the from

00:26:08.376 --> 00:26:10.066 A:middle
and to values of our animation.

00:26:10.476 --> 00:26:13.706 A:middle
Again we do that by setting
our animations dictionary

00:26:13.706 --> 00:26:15.726 A:middle
on the view and then telling
the animator to go to the

00:26:15.726 --> 00:26:16.806 A:middle
to value as necessary.

00:26:17.216 --> 00:26:20.476 A:middle
Technically we will
automatically fill in the from

00:26:20.476 --> 00:26:22.996 A:middle
and to values for
you, in this case the

00:26:22.996 --> 00:26:24.746 A:middle
from value is the
important part to specify.

00:26:24.746 --> 00:26:26.906 A:middle
The to value is inferred from
what we're setting the frame

00:26:26.906 --> 00:26:29.226 A:middle
on the animator to so it's
optional but leaving it

00:26:29.226 --> 00:26:30.806 A:middle
in there is often
good for clarity.

00:26:31.356 --> 00:26:35.566 A:middle
The other way of doing this is
with animation groups again.

00:26:36.156 --> 00:26:38.426 A:middle
And in this we actually
use our changes block

00:26:38.426 --> 00:26:41.096 A:middle
in the animation group to set
the initial value on the view

00:26:41.096 --> 00:26:44.396 A:middle
and then we use our completion
handler to tell the animator

00:26:44.396 --> 00:26:45.486 A:middle
to set it to the to value.

00:26:45.486 --> 00:26:48.216 A:middle
And in both cases we're going
to get an animation looking

00:26:48.216 --> 00:26:50.426 A:middle
like this, which is
exactly what we want.

00:26:50.426 --> 00:26:55.276 A:middle
So at this point I'd like to
welcome my colleague Peter Ammon

00:26:55.276 --> 00:26:55.856 A:middle
on stage.

00:26:56.496 --> 00:26:58.486 A:middle
He's going to get you
started with Auto Layout.

00:26:59.346 --> 00:26:59.976 A:middle
Welcome Peter.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:27:00.516 --> 00:27:05.076 A:middle
[ Applause ]

00:27:05.576 --> 00:27:06.206 A:middle
>> Peter Ammon: Thanks, Chris.

00:27:07.036 --> 00:27:08.176 A:middle
I'm Peter Ammon.

00:27:08.176 --> 00:27:09.986 A:middle
I'm a Cocoa Frameworks Engineer.

00:27:10.976 --> 00:27:12.736 A:middle
I apologize my voice
is a little rough.

00:27:12.736 --> 00:27:13.676 A:middle
I'm fighting off a cold.

00:27:14.246 --> 00:27:15.766 A:middle
We'll be talking
about a new class

00:27:15.766 --> 00:27:18.456 A:middle
in AppKit called NSStackView
which is really cool

00:27:18.586 --> 00:27:20.286 A:middle
and then I'll show you
three different techniques

00:27:20.446 --> 00:27:25.466 A:middle
for doing animations in
an auto layout based app.

00:27:25.706 --> 00:27:28.926 A:middle
So NSStackView, let's say you
just have a collection of views,

00:27:29.216 --> 00:27:30.646 A:middle
a button, a text field, a label,

00:27:30.646 --> 00:27:33.936 A:middle
you want to put them all
together into a list or a stack,

00:27:34.536 --> 00:27:36.176 A:middle
well that's what
NSStackView does for you.

00:27:37.486 --> 00:27:38.296 A:middle
Pretty simple, right?

00:27:38.816 --> 00:27:41.626 A:middle
Where it gets its flexibility
and its power is from its use

00:27:41.626 --> 00:27:43.796 A:middle
of auto layout, everything
is strung together

00:27:43.966 --> 00:27:44.726 A:middle
with constraints.

00:27:45.826 --> 00:27:48.396 A:middle
That means it knows how things
should be sized according

00:27:48.396 --> 00:27:49.926 A:middle
to their intrinsic content size

00:27:49.926 --> 00:27:51.466 A:middle
or any other constraints
you apply.

00:27:52.646 --> 00:27:54.116 A:middle
It knows how things
should be aligned

00:27:54.116 --> 00:27:56.686 A:middle
so you can specify a top
alignment, left alignment,

00:27:56.976 --> 00:27:58.296 A:middle
here we have a baseline
alignment.

00:27:58.336 --> 00:28:02.146 A:middle
And it interacts well
with window resizing

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:27:58.336 --> 00:28:02.146 A:middle
And it interacts well
with window resizing

00:28:02.256 --> 00:28:04.346 A:middle
so you can make a stack
view that prevents you

00:28:04.346 --> 00:28:07.046 A:middle
from resizing the window
too big or too small

00:28:07.046 --> 00:28:09.436 A:middle
so the things wouldn't
clip, etcetera.

00:28:10.236 --> 00:28:14.006 A:middle
And this is a really common
type of layout to have

00:28:14.366 --> 00:28:17.106 A:middle
and StackView makes it very easy
to create so you can go back

00:28:17.106 --> 00:28:20.526 A:middle
to [inaudible] or Mountain
Lion and create these yourself

00:28:20.526 --> 00:28:22.246 A:middle
but with StackView
it's a lot easier.

00:28:24.336 --> 00:28:25.726 A:middle
We figure why stop there?

00:28:26.086 --> 00:28:28.476 A:middle
We can make a stack view
that's horizontal or vertical.

00:28:29.606 --> 00:28:31.536 A:middle
You can have one that
has flexible spacing

00:28:31.536 --> 00:28:32.506 A:middle
or equal spacing.

00:28:32.506 --> 00:28:35.036 A:middle
Equal spacing in particular
is difficult to create

00:28:35.036 --> 00:28:36.366 A:middle
with auto layout today.

00:28:37.686 --> 00:28:39.126 A:middle
You can make a StackView
nestable

00:28:39.126 --> 00:28:41.586 A:middle
so you can put a stack
inside another one, why not?

00:28:41.586 --> 00:28:43.916 A:middle
And you can have a stack view

00:28:44.206 --> 00:28:46.656 A:middle
that will automatically
have views that get thrown

00:28:46.656 --> 00:28:49.246 A:middle
out when the StackView
gets too small or put back

00:28:49.246 --> 00:28:50.936 A:middle
in when the StackView
has enough space.

00:28:52.366 --> 00:28:54.646 A:middle
For example, how
NSToolbar does it.

00:28:54.646 --> 00:28:57.006 A:middle
And the API for StackView
could not be simpler.

00:28:57.306 --> 00:29:00.906 A:middle
You can create a StackView with
just passing an array of views

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:28:57.306 --> 00:29:00.906 A:middle
You can create a StackView with
just passing an array of views

00:29:00.906 --> 00:29:03.786 A:middle
to NSStackView, StackView
with Views and you're done.

00:29:04.046 --> 00:29:06.796 A:middle
So we're going to use StackView

00:29:06.796 --> 00:29:08.686 A:middle
to create an inspector
type window.

00:29:08.786 --> 00:29:11.736 A:middle
You may have seen this
in FindersGetInfo or in

00:29:11.736 --> 00:29:12.976 A:middle
for example a graphics editor.

00:29:14.906 --> 00:29:18.866 A:middle
For each of the individual
views in our inspector window,

00:29:19.026 --> 00:29:20.286 A:middle
for example filters, we're going

00:29:20.286 --> 00:29:21.856 A:middle
to string it all
together with auto layout.

00:29:22.426 --> 00:29:24.626 A:middle
So we have constraints
that specify the positions.

00:29:24.626 --> 00:29:26.646 A:middle
And you'll notice the
bottom constraint is dashed.

00:29:27.166 --> 00:29:28.836 A:middle
That means it's breakable.

00:29:28.836 --> 00:29:30.736 A:middle
It has a priority
less than required

00:29:30.736 --> 00:29:33.596 A:middle
and that means it could be
overridden by a constraint

00:29:33.596 --> 00:29:34.656 A:middle
with a higher priority.

00:29:34.656 --> 00:29:37.276 A:middle
So when we want to
disclose it, when we want

00:29:37.276 --> 00:29:41.206 A:middle
to collapse this view, we're
going to add another constraint

00:29:41.206 --> 00:29:44.346 A:middle
which just says center the
label in the view, that's going

00:29:44.346 --> 00:29:46.276 A:middle
to force the bottom
up until it's centered

00:29:46.796 --> 00:29:48.566 A:middle
and that's how we collapse it.

00:29:49.066 --> 00:29:52.606 A:middle
And this way we're going
to put these in a StackView

00:29:52.686 --> 00:29:54.296 A:middle
and that's how we'll get
the inspector window.

00:29:54.846 --> 00:29:58.526 A:middle
So I'm going to show
you a demo of that.

00:29:58.806 --> 00:30:01.166 A:middle
So here's the views that we're
going to put in our StackView.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:29:58.806 --> 00:30:01.166 A:middle
So here's the views that we're
going to put in our StackView.

00:30:01.396 --> 00:30:03.736 A:middle
We have the header view.

00:30:03.996 --> 00:30:06.536 A:middle
We've got three views that
are all kind of similar

00:30:06.536 --> 00:30:09.286 A:middle
and I'll zoom in
here and you'll see

00:30:09.776 --> 00:30:12.116 A:middle
that all the labels here are
positioned using auto layout.

00:30:12.116 --> 00:30:15.876 A:middle
I use the new X Code 5
Auto Layout Work Code

00:30:15.876 --> 00:30:17.136 A:middle
which is a lot nicer,
for those of you

00:30:17.136 --> 00:30:19.626 A:middle
who attended the session earlier
here today you saw that too.

00:30:20.296 --> 00:30:22.736 A:middle
And you'll notice the bottom
constraint has a priority

00:30:22.906 --> 00:30:28.206 A:middle
which is still pretty high,
725 but it's not required,

00:30:28.256 --> 00:30:30.286 A:middle
which means that a higher
priority constraint can

00:30:30.286 --> 00:30:30.676 A:middle
break it.

00:30:30.726 --> 00:30:36.276 A:middle
And by the way, one of these
views is itself a StackView.

00:30:36.276 --> 00:30:38.946 A:middle
You'll notice that we
have, this is a StackView.

00:30:38.946 --> 00:30:41.526 A:middle
We have some basic support
for configuring a StackView

00:30:41.526 --> 00:30:43.956 A:middle
on the interface builder,
in the seed build.

00:30:44.336 --> 00:30:45.706 A:middle
But in a future release

00:30:45.706 --> 00:30:48.096 A:middle
of X Code hopefully GM
we will have full support

00:30:48.256 --> 00:30:51.086 A:middle
for configuring the Stack View
with all the views inside it.

00:30:53.976 --> 00:30:58.536 A:middle
So now I'm going to switch
to the window controller.

00:30:58.906 --> 00:30:59.826 A:middle
So window did load.

00:30:59.826 --> 00:31:03.036 A:middle
We're going to start by making
a list of all our views,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:30:59.826 --> 00:31:03.036 A:middle
We're going to start by making
a list of all our views,

00:31:03.036 --> 00:31:04.896 A:middle
the header, the filter,
the shapes view.

00:31:04.896 --> 00:31:06.526 A:middle
And we're going to
make a StackView.

00:31:06.526 --> 00:31:09.006 A:middle
We're going to say
that it's vertical.

00:31:09.686 --> 00:31:12.246 A:middle
Alignment is leading, that
means that it's left aligned.

00:31:12.326 --> 00:31:14.046 A:middle
They all have the same
width so it doesn't matter

00:31:14.046 --> 00:31:15.796 A:middle
but if we wanted everything
to be left aligned,

00:31:15.796 --> 00:31:16.506 A:middle
that's what we would do.

00:31:16.606 --> 00:31:18.136 A:middle
And there's no spacing
between them.

00:31:18.136 --> 00:31:21.806 A:middle
We're going to see oh it
keeps its width and its height

00:31:21.806 --> 00:31:24.616 A:middle
with a high priority and
we're going to set it

00:31:24.616 --> 00:31:27.956 A:middle
as a document view of
a certain scroll view,

00:31:27.956 --> 00:31:29.246 A:middle
of the scroll view
that's in the window.

00:31:29.466 --> 00:31:33.966 A:middle
Next we're going to tell it
how do we position ourselves

00:31:33.966 --> 00:31:34.616 A:middle
in the scroll view?

00:31:34.916 --> 00:31:37.816 A:middle
Oh using the Visual Format
Language we're going to say

00:31:37.816 --> 00:31:39.306 A:middle
if penned to the
left and the right

00:31:39.306 --> 00:31:40.296 A:middle
so it just fills that width.

00:31:41.306 --> 00:31:45.446 A:middle
Vertically its penned to the
top, that's what that means,

00:31:45.446 --> 00:31:46.806 A:middle
but it's not penned
to the bottom.

00:31:46.806 --> 00:31:47.706 A:middle
It can float freely.

00:31:48.126 --> 00:31:51.806 A:middle
And this has to be in a flipped
clipped view, by the way.

00:31:53.276 --> 00:31:55.596 A:middle
So in our disclosure
view this is the view

00:31:55.746 --> 00:31:57.236 A:middle
that goes into the StackView.

00:31:59.036 --> 00:32:00.926 A:middle
We'll start by creating
a constraint.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:31:59.036 --> 00:32:00.926 A:middle
We'll start by creating
a constraint.

00:32:00.926 --> 00:32:03.036 A:middle
This is the centering
constraint that I showed you.

00:32:03.676 --> 00:32:07.126 A:middle
We're seeing the label
fields center Y is equal

00:32:07.126 --> 00:32:11.576 A:middle
to our center Y times 1 plus
0 so it's exactly centered.

00:32:12.606 --> 00:32:15.136 A:middle
Now when it comes time to
collapse it we're going

00:32:15.136 --> 00:32:18.336 A:middle
to remove that constraint, I'm
sorry, we want to uncollapse it,

00:32:18.336 --> 00:32:22.006 A:middle
we remove the constraint, set
the title of our button and say

00:32:22.006 --> 00:32:23.056 A:middle
that we're no longer collapsed.

00:32:23.906 --> 00:32:27.276 A:middle
And when we want to collapse
it we add the constraint,

00:32:27.466 --> 00:32:29.086 A:middle
set the title and say
that we are collapsed.

00:32:29.676 --> 00:32:33.426 A:middle
So that's not a lot of code
but here's the affects you get.

00:32:36.276 --> 00:32:37.736 A:middle
Here's our StackView
and you'll see

00:32:37.736 --> 00:32:42.946 A:middle
that I can disclose
things pretty nice

00:32:42.946 --> 00:32:46.116 A:middle
and I can resize the window,
for example, I can scroll.

00:32:46.116 --> 00:32:49.756 A:middle
So we got this pretty
sophisticated control

00:32:50.036 --> 00:32:54.376 A:middle
without a lot of code.

00:32:55.296 --> 00:32:58.016 A:middle
But this is a talk on animation

00:32:58.136 --> 00:33:00.926 A:middle
so how would we make this
disclosure view animate?

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:32:58.136 --> 00:33:00.926 A:middle
so how would we make this
disclosure view animate?

00:33:02.296 --> 00:33:04.476 A:middle
Well the desire is that
we want to just switch

00:33:04.476 --> 00:33:06.166 A:middle
from our old layout
to the new layout.

00:33:06.506 --> 00:33:08.776 A:middle
We want to just add that
constraint or remove it.

00:33:08.926 --> 00:33:11.716 A:middle
But rather than the views just
jumping we want them to animate

00:33:11.716 --> 00:33:13.416 A:middle
from their old position
to the new position.

00:33:13.986 --> 00:33:17.906 A:middle
So Chris showed you some
techniques for doing this

00:33:17.906 --> 00:33:21.256 A:middle
in a non-auto layout based
app where you set the frame

00:33:21.256 --> 00:33:25.856 A:middle
through the animator
proxy or you set the frame

00:33:25.856 --> 00:33:28.736 A:middle
after setting
allowsImplicitAnimation to yes.

00:33:29.636 --> 00:33:31.986 A:middle
But with constraints
you're never supposed

00:33:31.986 --> 00:33:33.056 A:middle
to set frames directly

00:33:33.546 --> 00:33:36.956 A:middle
so how would we do
this with constraints?

00:33:37.096 --> 00:33:39.256 A:middle
Well here's some things people
have tried that don't work.

00:33:40.306 --> 00:33:42.736 A:middle
What they have done is they've
tried opening the animation

00:33:42.736 --> 00:33:44.956 A:middle
block and saying add constraint

00:33:45.256 --> 00:33:46.506 A:middle
and you'll see that
doesn't animate.

00:33:47.796 --> 00:33:49.526 A:middle
They've tried adding
a constraint

00:33:49.526 --> 00:33:50.436 A:middle
and maybe setting the constant

00:33:50.436 --> 00:33:52.396 A:middle
to something, that
doesn't animate.

00:33:52.396 --> 00:33:55.776 A:middle
And here's something people have
tried, they're actually going

00:33:55.776 --> 00:33:58.876 A:middle
to call layout on the view
after modifying the constraints.

00:33:58.876 --> 00:34:02.326 A:middle
And this might seem to work
but this is really bad,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:33:58.876 --> 00:34:02.326 A:middle
And this might seem to work
but this is really bad,

00:34:02.326 --> 00:34:03.996 A:middle
you can see it's
off the page bad.

00:34:06.716 --> 00:34:07.916 A:middle
Why does it seem to work?

00:34:08.096 --> 00:34:10.856 A:middle
The underlying step frame calls
must be in an animation block

00:34:10.856 --> 00:34:13.096 A:middle
with allows implicit
animation set to yes.

00:34:13.716 --> 00:34:15.676 A:middle
And that's actually
where those calls occur

00:34:15.676 --> 00:34:16.545 A:middle
in the layout method.

00:34:17.476 --> 00:34:19.286 A:middle
But the layout method
is for overriding.

00:34:19.286 --> 00:34:21.876 A:middle
It's not a method you're ever
supposed to invoke yourself,

00:34:22.096 --> 00:34:23.186 A:middle
unless you're invoking super.

00:34:24.126 --> 00:34:28.795 A:middle
So how do we trigger it
being called by AppKit?

00:34:28.795 --> 00:34:31.866 A:middle
Well we're going to start
by adding the constraint.

00:34:31.866 --> 00:34:34.436 A:middle
We can do that inside or
outside the animation block,

00:34:35.266 --> 00:34:37.565 A:middle
it doesn't matter but
here we do it outside just

00:34:37.565 --> 00:34:38.266 A:middle
to make it clear.

00:34:38.716 --> 00:34:41.366 A:middle
Or you can set the
constant on a constraint.

00:34:41.366 --> 00:34:42.775 A:middle
If you're not familiar
with a constant

00:34:42.775 --> 00:34:44.585 A:middle
on a width constraint
it's just the width,

00:34:44.916 --> 00:34:46.755 A:middle
or it's like the base value.

00:34:47.216 --> 00:34:48.755 A:middle
For a spacing constraint,
it's the space

00:34:48.755 --> 00:34:50.116 A:middle
between the two views, etcetera.

00:34:51.096 --> 00:34:53.106 A:middle
And then in the animation
block we're going

00:34:53.106 --> 00:34:55.045 A:middle
to say allows implicit
animation yes.

00:34:55.045 --> 00:34:56.696 A:middle
And we'll trigger layout

00:34:56.696 --> 00:34:59.116 A:middle
by calling view
layoutSubtreeIfNeeded.

00:34:59.346 --> 00:35:01.946 A:middle
If you just want to animate that
view and all of its descendants

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:34:59.346 --> 00:35:01.946 A:middle
If you just want to animate that
view and all of its descendants

00:35:02.406 --> 00:35:04.106 A:middle
or you can call window
layoutIfNeeded

00:35:04.106 --> 00:35:05.326 A:middle
to animate the entire window.

00:35:06.206 --> 00:35:11.686 A:middle
So this is the right
way to do or one way

00:35:11.686 --> 00:35:14.046 A:middle
to do animation correctly
in an auto layout based app.

00:35:14.686 --> 00:35:17.186 A:middle
So let's make our disclosure
view animated in this way.

00:35:21.686 --> 00:35:24.446 A:middle
So I'm already in the right
spot, toggle collapsed,

00:35:25.426 --> 00:35:27.906 A:middle
and I've already added
or removed the constraint

00:35:28.216 --> 00:35:31.266 A:middle
so now all that's left to do is
open the animation block here.

00:35:33.266 --> 00:35:35.676 A:middle
Say we allow implicit
animation yes.

00:35:36.626 --> 00:35:38.786 A:middle
And then trigger layout if
needed on the entire window.

00:35:40.756 --> 00:35:44.726 A:middle
So now when I run this
you'll see that instead

00:35:44.726 --> 00:35:47.186 A:middle
of just jumping the views
actually animate open

00:35:47.186 --> 00:35:48.066 A:middle
and close like that.

00:35:49.396 --> 00:35:51.946 A:middle
So just a few lines of code we
went from this very static UI

00:35:52.516 --> 00:35:54.826 A:middle
to a nicely animated control.

00:35:55.516 --> 00:36:01.666 A:middle
[ Applause ]

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:35:55.516 --> 00:36:01.666 A:middle
[ Applause ]

00:36:02.166 --> 00:36:05.086 A:middle
It's nice when things
take a little code.

00:36:05.766 --> 00:36:11.686 A:middle
So that's one technique where
you just set your constraints

00:36:11.686 --> 00:36:14.526 A:middle
and you trigger layout
in an animation block.

00:36:15.186 --> 00:36:17.716 A:middle
But another technique is to
animate constraints directly.

00:36:20.186 --> 00:36:23.236 A:middle
As I said, constraints have
only one mutable property,

00:36:23.236 --> 00:36:24.446 A:middle
once the constraint
has been installed

00:36:24.446 --> 00:36:26.906 A:middle
on the view there's only
one thing you can change

00:36:26.976 --> 00:36:29.286 A:middle
about that constraint and we
chose to call that constant.

00:36:29.586 --> 00:36:34.256 A:middle
You can animate it
with the animator proxy

00:36:34.256 --> 00:36:37.556 A:middle
so you can say
constraint.animator.constant=17

00:36:37.556 --> 00:36:39.516 A:middle
and this uses the same
sort of animations

00:36:39.516 --> 00:36:40.706 A:middle
that Chris was telling
you about.

00:36:40.836 --> 00:36:46.386 A:middle
I know the constraints do not
respect allowsImplicitAnimation

00:36:46.386 --> 00:36:49.326 A:middle
so the constants will
always, you either have

00:36:49.326 --> 00:36:51.666 A:middle
to use the animator proxy
if you want animation.

00:36:51.666 --> 00:36:53.676 A:middle
This is because if
they did respect

00:36:53.676 --> 00:36:56.626 A:middle
that allowsImplicitAnimation
you might get layouts

00:36:56.626 --> 00:36:58.716 A:middle
which are not allowed
which will cause conflicts

00:36:58.716 --> 00:36:59.506 A:middle
with other constraints.

00:36:59.566 --> 00:37:03.596 A:middle
So let's, I'm going to
give you a demo of how

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:36:59.566 --> 00:37:03.596 A:middle
So let's, I'm going to
give you a demo of how

00:37:03.596 --> 00:37:08.676 A:middle
to use this technique to make
our StackView animated again.

00:37:08.866 --> 00:37:13.316 A:middle
So it was kind of
nice that it animated

00:37:13.316 --> 00:37:16.216 A:middle
but the window didn't
change its height, right,

00:37:16.216 --> 00:37:18.466 A:middle
so you have to scroll down or
you have to resize the window.

00:37:18.466 --> 00:37:22.016 A:middle
It would be a lot nicer if after
you disclose it the window just

00:37:22.016 --> 00:37:24.016 A:middle
resized and matched the
height of the StackView.

00:37:25.016 --> 00:37:27.196 A:middle
So we're going to do that
by instead of just penning

00:37:27.196 --> 00:37:30.186 A:middle
to the top we're also going to
pen to the top and the bottom.

00:37:30.186 --> 00:37:34.476 A:middle
And because our layout
priority is high

00:37:35.126 --> 00:37:39.226 A:middle
for the vertical orientation,
it's higher than the strength

00:37:39.226 --> 00:37:40.936 A:middle
with which the window
holds its size

00:37:40.936 --> 00:37:43.116 A:middle
so this will actually
push the window taller

00:37:43.116 --> 00:37:44.146 A:middle
or force it to shrink.

00:37:44.596 --> 00:37:50.916 A:middle
Here's the other implementation
of where we're going

00:37:50.916 --> 00:37:52.086 A:middle
to animate the constraint.

00:37:52.696 --> 00:37:56.746 A:middle
Instead of that centering
constraint we're going

00:37:56.746 --> 00:37:59.666 A:middle
to have a constraint which
just says what is the height

00:37:59.666 --> 00:38:00.846 A:middle
of my view, of me?

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:37:59.666 --> 00:38:00.846 A:middle
of my view, of me?

00:38:01.546 --> 00:38:03.906 A:middle
So it's equal to
nil, not an attribute

00:38:03.906 --> 00:38:05.476 A:middle
because we're just setting
the height to a constant

00:38:05.556 --> 00:38:08.616 A:middle
and that's going to be
either the collapsed height,

00:38:08.616 --> 00:38:10.506 A:middle
which is just the
height of our top part,

00:38:10.966 --> 00:38:14.106 A:middle
or our uncollapsed height
which is our fitting size,

00:38:14.106 --> 00:38:15.156 A:middle
the height we want to be.

00:38:15.696 --> 00:38:18.246 A:middle
And then we're going
to add that constraint

00:38:18.246 --> 00:38:21.736 A:middle
and then we set the
title to another button.

00:38:22.206 --> 00:38:23.556 A:middle
So then the toggle collapsed.

00:38:23.556 --> 00:38:27.466 A:middle
Instead of triggering layout
with the animation block,

00:38:27.676 --> 00:38:29.426 A:middle
we're going to go
through the animator proxy

00:38:29.426 --> 00:38:32.266 A:middle
and set the constant to
either the uncollapsed height

00:38:32.746 --> 00:38:34.206 A:middle
or the collapsed height.

00:38:36.656 --> 00:38:40.966 A:middle
So now when I run
this you'll see

00:38:40.966 --> 00:38:42.686 A:middle
that not only does it animate

00:38:42.686 --> 00:38:45.066 A:middle
but it also resizes the
window bigger or smaller.

00:38:47.436 --> 00:38:50.686 A:middle
So you may be wondering why did
we use this separate technique?

00:38:50.686 --> 00:38:54.226 A:middle
Why couldn't we have just made
the window resized using the old

00:38:54.226 --> 00:38:55.156 A:middle
technique for animation?

00:38:55.556 --> 00:38:57.426 A:middle
Well I'll show you what
happens if I do that.

00:38:58.006 --> 00:39:01.946 A:middle
So I if that out, now we're back
to doing the implicit animation

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:38:58.006 --> 00:39:01.946 A:middle
So I if that out, now we're back
to doing the implicit animation

00:39:01.946 --> 00:39:02.946 A:middle
and triggering layout.

00:39:03.486 --> 00:39:08.636 A:middle
When I run this you'll see
that it, it has this weird kind

00:39:08.636 --> 00:39:11.926 A:middle
of jumpy behavior here.

00:39:12.126 --> 00:39:13.776 A:middle
So what's going on with that?

00:39:20.336 --> 00:39:24.616 A:middle
So what we saw there was a core
animation driven animation.

00:39:24.696 --> 00:39:27.616 A:middle
It's using layers concurrent

00:39:27.616 --> 00:39:29.356 A:middle
with the window resize
animation,

00:39:29.356 --> 00:39:31.206 A:middle
which always happens
on the main thread.

00:39:31.956 --> 00:39:34.206 A:middle
So when you have these
two animations going

00:39:34.206 --> 00:39:37.096 A:middle
at the same time they may get
out of sync or they may fight.

00:39:37.966 --> 00:39:39.286 A:middle
We say don't cross the streams

00:39:39.286 --> 00:39:43.616 A:middle
and if you do something terrible
will happen or not quite

00:39:43.616 --> 00:39:46.586 A:middle
that bad but you'll get
drifting or you'll get jitter.

00:39:46.586 --> 00:39:49.336 A:middle
You'll see a view maybe
vibrate a bit and this is a clue

00:39:49.336 --> 00:39:50.766 A:middle
that there's two
animations going

00:39:50.766 --> 00:39:51.926 A:middle
at once on different threads.

00:39:52.586 --> 00:39:55.376 A:middle
So the solution to
this, one solution,

00:39:55.526 --> 00:39:57.396 A:middle
is to go through the
constraints animator

00:39:57.396 --> 00:40:00.566 A:middle
that will do an AppKit driven
animation on the main thread

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:39:57.396 --> 00:40:00.566 A:middle
that will do an AppKit driven
animation on the main thread

00:40:00.566 --> 00:40:02.666 A:middle
so it will not be concurrent
with the window resize.

00:40:03.556 --> 00:40:05.046 A:middle
Or you can do the
other technique

00:40:05.046 --> 00:40:06.006 A:middle
where you can tell the window

00:40:06.006 --> 00:40:08.186 A:middle
to just resize itself
in an animated way.

00:40:08.186 --> 00:40:10.846 A:middle
And that's the third
way of doing animations

00:40:10.846 --> 00:40:14.336 A:middle
with auto layout, which I'm
going to talk about now.

00:40:14.566 --> 00:40:19.186 A:middle
Animating window size changes,
so we're going to switch

00:40:19.186 --> 00:40:20.786 A:middle
to a totally different
kind of application.

00:40:20.786 --> 00:40:22.446 A:middle
This is a shopping list app

00:40:23.076 --> 00:40:25.176 A:middle
where we have a master
and a detail window.

00:40:25.336 --> 00:40:26.516 A:middle
So here we have a shopping list

00:40:26.626 --> 00:40:29.076 A:middle
and there's a segmented
control at the bottom right.

00:40:29.076 --> 00:40:30.826 A:middle
And when I click
that what I want

00:40:30.826 --> 00:40:33.936 A:middle
to have happen is a
side bar will slide out

00:40:33.936 --> 00:40:36.386 A:middle
and the user can select
different shopping lists.

00:40:37.256 --> 00:40:41.486 A:middle
So you may have seen this type
of UI in reminders or notes app.

00:40:42.636 --> 00:40:45.646 A:middle
So when the user clicks
that segmented control,

00:40:45.876 --> 00:40:49.126 A:middle
we want the window to grow but
it grows in a different way

00:40:49.126 --> 00:40:50.906 A:middle
than if the user had
just resized the window.

00:40:51.476 --> 00:40:56.426 A:middle
When the user resizes it we want
the pane on the right to pick

00:40:56.426 --> 00:40:58.206 A:middle
up this extra space,
all the slack.

00:40:59.286 --> 00:41:03.066 A:middle
But with this kind of animation
what we want is instead all the

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:40:59.286 --> 00:41:03.066 A:middle
But with this kind of animation
what we want is instead all the

00:41:03.066 --> 00:41:07.816 A:middle
slack should be taken up
by the pane on the left.

00:41:08.116 --> 00:41:08.736 A:middle
So how are we going

00:41:08.736 --> 00:41:11.706 A:middle
to accomplish this
animation using auto layout?

00:41:12.956 --> 00:41:15.656 A:middle
Well the trick is we're going
to set temporary constraints

00:41:15.656 --> 00:41:17.926 A:middle
that control how the panes
resize so we're going

00:41:17.926 --> 00:41:20.446 A:middle
to grow the window and
remove those constraints.

00:41:20.986 --> 00:41:23.956 A:middle
But we don't have to add
these constraints ourselves.

00:41:24.456 --> 00:41:27.466 A:middle
We can leverage NSSplitView,
which is a great client

00:41:27.466 --> 00:41:29.256 A:middle
and auto layout starting
in Mountain Lion,

00:41:29.766 --> 00:41:31.546 A:middle
to create these constraints
for us.

00:41:32.946 --> 00:41:36.336 A:middle
We do that by adjusting
the holding priority

00:41:36.616 --> 00:41:37.686 A:middle
of the split view panes.

00:41:37.776 --> 00:41:39.166 A:middle
The holding priority
is the strength

00:41:39.166 --> 00:41:41.746 A:middle
of which the split view pane
prefers to hold its size

00:41:42.246 --> 00:41:44.406 A:middle
so as the window
gets bigger the pane

00:41:44.406 --> 00:41:47.466 A:middle
with the lowest holding priority
will take up all the slack.

00:41:48.856 --> 00:41:50.686 A:middle
So we start by getting
the window framed.

00:41:50.686 --> 00:41:55.036 A:middle
And we're just going to
adjust the origin left by 120

00:41:55.036 --> 00:41:57.936 A:middle
and adjust the width by 120
so the right edge stays fixed

00:41:57.936 --> 00:41:59.296 A:middle
and the window gets bigger.

00:41:59.556 --> 00:42:03.736 A:middle
We're going to lower the holding
priority of the first subview

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:41:59.556 --> 00:42:03.736 A:middle
We're going to lower the holding
priority of the first subview

00:42:04.106 --> 00:42:05.776 A:middle
to 1, which is very low.

00:42:07.066 --> 00:42:08.736 A:middle
We'll then set the frame of
the window and we're going

00:42:08.736 --> 00:42:10.186 A:middle
to pass yes for animate.

00:42:10.186 --> 00:42:12.816 A:middle
Instead of just jumping it's
going to cause it to slide out.

00:42:13.176 --> 00:42:15.036 A:middle
And then we'll restore
the holding priority

00:42:15.036 --> 00:42:19.746 A:middle
of the split view pane.

00:42:19.956 --> 00:42:21.986 A:middle
So this gets us almost
all the way there

00:42:21.986 --> 00:42:24.856 A:middle
but there's one thing
we can't quite do,

00:42:24.936 --> 00:42:26.686 A:middle
one remaining wrinkle,
what's that?

00:42:27.216 --> 00:42:28.936 A:middle
We want not just the
pane to disappear

00:42:28.936 --> 00:42:30.316 A:middle
but also the split view divider.

00:42:30.316 --> 00:42:34.376 A:middle
And a split view calls
this collapsing the pane

00:42:34.616 --> 00:42:36.406 A:middle
so this is something
it has support for,

00:42:36.466 --> 00:42:38.386 A:middle
which we want to
take advantage of.

00:42:38.386 --> 00:42:40.586 A:middle
But collapsing is a
deliberate user action.

00:42:40.586 --> 00:42:43.086 A:middle
There's a special way the
user collapses a pane,

00:42:43.086 --> 00:42:44.906 A:middle
it's by dragging more
than halfway across it

00:42:45.656 --> 00:42:47.566 A:middle
so it's not something
constraints can just do

00:42:47.566 --> 00:42:48.266 A:middle
on their own.

00:42:49.816 --> 00:42:51.596 A:middle
However, oh, excuse me,

00:42:51.806 --> 00:42:53.196 A:middle
so here's what constraints
can get you,

00:42:53.196 --> 00:42:57.106 A:middle
they can get almost all the
way down to the last pixel

00:42:57.896 --> 00:42:59.556 A:middle
but to get it the rest
of the way we need

00:42:59.556 --> 00:43:00.706 A:middle
to invoke NSSplitView.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:42:59.556 --> 00:43:00.706 A:middle
to invoke NSSplitView.

00:43:01.936 --> 00:43:05.616 A:middle
So the solution is we're going
to shrink the pane as small

00:43:05.616 --> 00:43:06.926 A:middle
as we can get using auto layout.

00:43:06.926 --> 00:43:08.606 A:middle
Then we're going to collapse it

00:43:08.606 --> 00:43:12.016 A:middle
by calling setPosition:0
ofDividerAtIndex:0.

00:43:12.016 --> 00:43:14.376 A:middle
That says take the divider
and push it all the way

00:43:14.376 --> 00:43:16.476 A:middle
over to the left, which
will cause that pane

00:43:16.476 --> 00:43:17.346 A:middle
on the left to collapse.

00:43:18.106 --> 00:43:20.886 A:middle
And to uncollapse it is
almost exactly the same except

00:43:20.886 --> 00:43:21.516 A:middle
for backwards.

00:43:21.516 --> 00:43:23.136 A:middle
We start by setting
the position to 1

00:43:23.136 --> 00:43:25.826 A:middle
and then we grow the
pane using auto layout.

00:43:26.356 --> 00:43:29.536 A:middle
And don't forget we have
to enable collapsing.

00:43:29.686 --> 00:43:31.536 A:middle
We do that by implementing
the delegate method,

00:43:32.066 --> 00:43:35.806 A:middle
SplitView canCollapseSubview
and say oh you can collapse it

00:43:35.806 --> 00:43:38.386 A:middle
if the subview is the first
subview in a split view

00:43:38.616 --> 00:43:41.926 A:middle
so let's give a demo of that.

00:43:53.346 --> 00:43:55.046 A:middle
So here's our master detail view

00:43:55.226 --> 00:43:57.116 A:middle
and we have the segmented
control down here.

00:43:57.516 --> 00:43:58.526 A:middle
When I click that you'll see

00:43:58.526 --> 00:44:00.956 A:middle
that the split view
slides nicely in and out

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:43:58.526 --> 00:44:00.956 A:middle
that the split view
slides nicely in and out

00:44:00.956 --> 00:44:03.256 A:middle
and I can you know
resize it how I like

00:44:03.256 --> 00:44:05.286 A:middle
and then I can collapse
it and collapse it again.

00:44:05.626 --> 00:44:12.726 A:middle
How do we accomplish this
in our split view demo?

00:44:13.226 --> 00:44:14.596 A:middle
So here's the toggle collapse.

00:44:14.626 --> 00:44:17.016 A:middle
This is the action method
of the segmented control.

00:44:17.626 --> 00:44:19.906 A:middle
We start by getting the first
subview of the split view

00:44:19.906 --> 00:44:21.036 A:middle
and that's what we
want to collapse.

00:44:21.986 --> 00:44:25.256 A:middle
We say that do we want to
collapse it or uncollapse it?

00:44:25.616 --> 00:44:28.456 A:middle
And if it's already
collapsed the way we want it,

00:44:28.456 --> 00:44:29.146 A:middle
we just return.

00:44:29.146 --> 00:44:31.986 A:middle
So we're going to get
the holding priorities

00:44:31.986 --> 00:44:35.006 A:middle
of the first subview and the
second subview and we're going

00:44:35.006 --> 00:44:39.226 A:middle
to lower the first one and raise
the second one and we're going

00:44:39.226 --> 00:44:41.906 A:middle
to restore them at the end.

00:44:41.986 --> 00:44:44.446 A:middle
Now we're going to call that set
frame display animate method.

00:44:45.316 --> 00:44:46.896 A:middle
So we start by, if
we're collapsing,

00:44:47.366 --> 00:44:48.856 A:middle
if we already collapsed,
excuse me,

00:44:49.296 --> 00:44:51.566 A:middle
we're going to set the
position to just 1,

00:44:52.606 --> 00:44:55.346 A:middle
1 of the divider
index so that's going

00:44:55.346 --> 00:44:56.666 A:middle
to uncollapse it by one pixel.

00:44:57.396 --> 00:45:00.216 A:middle
Then we have to resize
the window by that amount

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:44:57.396 --> 00:45:00.216 A:middle
Then we have to resize
the window by that amount

00:45:00.356 --> 00:45:01.806 A:middle
so that the right
edge stays fixed.

00:45:02.626 --> 00:45:03.626 A:middle
Then we're going
to do it the rest

00:45:03.626 --> 00:45:07.696 A:middle
of the way just using a setFrame
display, yes, animate, yes.

00:45:08.216 --> 00:45:11.526 A:middle
And likewise if the window
is already big we want

00:45:11.526 --> 00:45:14.736 A:middle
to make it small, we
want to collapse it.

00:45:14.736 --> 00:45:21.246 A:middle
We start by, excuse me, we
get the frame, we say yes,

00:45:21.246 --> 00:45:23.686 A:middle
animate yes and then
we, excuse me,

00:45:23.686 --> 00:45:24.996 A:middle
this is using auto layout here,

00:45:25.796 --> 00:45:28.216 A:middle
then to collapse it
we set the position 0

00:45:28.216 --> 00:45:31.356 A:middle
of the divider index zero
and resize the window

00:45:31.356 --> 00:45:33.136 A:middle
in a non-animated way
for just that last pixel.

00:45:33.306 --> 00:45:35.926 A:middle
And then we restore
the holding priorities

00:45:35.926 --> 00:45:37.256 A:middle
to what they were before so that

00:45:37.256 --> 00:45:40.036 A:middle
when the user resizes it they
get the resizing behavior

00:45:40.036 --> 00:45:40.446 A:middle
we want.

00:45:41.516 --> 00:45:43.696 A:middle
And here's where we implement
the canCollapseSubview method

00:45:43.926 --> 00:45:45.726 A:middle
to indicate that we can
collapse that first subview.

00:45:46.256 --> 00:45:51.606 A:middle
So that's how we
get that effect.

00:45:58.926 --> 00:46:00.186 A:middle
So that's what we have.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:45:58.926 --> 00:46:00.186 A:middle
So that's what we have.

00:46:00.496 --> 00:46:03.076 A:middle
For more information you
can contact our Frameworks

00:46:03.266 --> 00:46:04.736 A:middle
Evangelist Jake Behrens.

00:46:05.156 --> 00:46:06.706 A:middle
There's also really
good documentation

00:46:06.706 --> 00:46:08.716 A:middle
on Core Animation
and Auto Layout.

00:46:10.046 --> 00:46:12.336 A:middle
You can always reach us at
the Apple Development Forums.

00:46:12.576 --> 00:46:14.206 A:middle
We've got some really
good labs too,

00:46:14.206 --> 00:46:15.996 A:middle
oh later sessions,
related sessions.

00:46:16.976 --> 00:46:19.406 A:middle
Hopefully you saw the really
nice auto layout session

00:46:19.446 --> 00:46:21.266 A:middle
for interface builder
that was earlier today.

00:46:21.266 --> 00:46:24.756 A:middle
And there's going to be a
session immediately following

00:46:24.756 --> 00:46:27.606 A:middle
this about Optimizing Drawing
and Scrolling using some

00:46:27.606 --> 00:46:28.916 A:middle
of that responsive
scrolling stuff,

00:46:29.626 --> 00:46:31.486 A:middle
immediately following
in this room.

00:46:32.096 --> 00:46:33.776 A:middle
So what did we see?

00:46:33.776 --> 00:46:37.006 A:middle
We saw NSStackView, how it
can layout views in a list,

00:46:37.006 --> 00:46:38.256 A:middle
horizontally or vertically.

00:46:38.766 --> 00:46:41.416 A:middle
It's a really powerful
new class in Mac OS X.

00:46:41.876 --> 00:46:45.676 A:middle
We can animate view positions
by adjusting constraints

00:46:45.676 --> 00:46:47.916 A:middle
and triggering layout
within an animation block.

00:46:48.586 --> 00:46:51.016 A:middle
By using layers you can
produce very smooth animations.

00:46:51.956 --> 00:46:54.346 A:middle
We saw how you can animate
constraints directly

00:46:54.406 --> 00:46:56.966 A:middle
by using the animator
proxy NSLayout constraint

00:46:56.966 --> 00:46:59.056 A:middle
and this allows you
to resize windows.

00:46:59.926 --> 00:47:02.196 A:middle
We saw a third technique
which is you set

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:46:59.926 --> 00:47:02.196 A:middle
We saw a third technique
which is you set

00:47:02.196 --> 00:47:03.566 A:middle
up your constraints
the way you want

00:47:03.646 --> 00:47:07.176 A:middle
and then you tell the window to
resize then pass yes for animate

00:47:07.176 --> 00:47:11.276 A:middle
and then the animation will
cause the content to reflow

00:47:11.276 --> 00:47:12.176 A:middle
in the way you specify.

00:47:13.296 --> 00:47:15.396 A:middle
But be careful to not
use core animation,

00:47:15.396 --> 00:47:18.106 A:middle
driven animations
alongside window resizing,

00:47:18.766 --> 00:47:19.926 A:middle
we call that crossing
the streams.

00:47:19.926 --> 00:47:21.536 A:middle
You'll get that jitter
or you'll get drifting.

00:47:22.826 --> 00:47:23.836 A:middle
Thank you very much.

00:47:23.836 --> 00:47:24.966 A:middle
Enjoy the rest of your week.

00:47:25.466 --> 00:47:28.500 A:middle
[ Applause ]