206.srt

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

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

00:00:13.836 --> 00:00:14.716 A:middle
>> Olivier Gutknecht:
Good afternoon.

00:00:15.516 --> 00:00:19.946 A:middle
[ Applause ]

00:00:20.446 --> 00:00:22.936 A:middle
And welcome to this WWDC session

00:00:22.936 --> 00:00:25.896 A:middle
on getting started
with UIKit Dynamics.

00:00:26.696 --> 00:00:30.606 A:middle
We think we have a great new
addition to UIKit for you today.

00:00:31.776 --> 00:00:33.566 A:middle
My name is Olivier Gutknecht

00:00:34.176 --> 00:00:36.876 A:middle
and I'm a frameworks
engineer in the UIKit team.

00:00:37.966 --> 00:00:44.856 A:middle
And you might have noticed
that on iOS 7, content is key.

00:00:45.916 --> 00:00:51.886 A:middle
And we'd like to offer you new
ways to have better rendering

00:00:52.356 --> 00:00:55.186 A:middle
and interactions
with this content,

00:00:56.306 --> 00:00:58.426 A:middle
and that is what
dynamics is about.

00:00:58.426 --> 00:01:01.976 A:middle
What are we going
to cover today?

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

00:00:58.426 --> 00:01:01.976 A:middle
What are we going
to cover today?

00:01:01.976 --> 00:01:06.126 A:middle
First, the core concepts in
architecture of dynamics.

00:01:07.166 --> 00:01:11.636 A:middle
And dynamics is based
on a very simple ID,

00:01:12.656 --> 00:01:15.216 A:middle
combining basic behaviors.

00:01:16.416 --> 00:01:18.696 A:middle
And we've see how
you can actually use

00:01:18.696 --> 00:01:22.456 A:middle
that to integrate
new rich interactions

00:01:23.386 --> 00:01:24.346 A:middle
in your applications.

00:01:24.706 --> 00:01:31.616 A:middle
But first, I'd like to make a
very quick recap of animation

00:01:31.616 --> 00:01:33.606 A:middle
and interaction on iOS today.

00:01:34.936 --> 00:01:38.166 A:middle
Of course, almost everything
we render and animate

00:01:38.166 --> 00:01:40.466 A:middle
on iOS is based on
Core Animation.

00:01:41.526 --> 00:01:44.756 A:middle
Core Animation is an
amazing animation framework.

00:01:45.476 --> 00:01:48.306 A:middle
It has very strong
and consistent model,

00:01:48.506 --> 00:01:51.226 A:middle
extremely powerful API.

00:01:51.226 --> 00:01:56.016 A:middle
And on top of that, in UIKit,
we built UIView animations.

00:01:56.726 --> 00:02:00.616 A:middle
Easier to use API, web
integrated with the UIKit model.

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

00:01:56.726 --> 00:02:00.616 A:middle
Easier to use API, web
integrated with the UIKit model.

00:02:01.526 --> 00:02:05.016 A:middle
And we actually include
that a lot in iOS 7.

00:02:05.876 --> 00:02:09.476 A:middle
We had it at UIView level
keyframe animations.

00:02:10.476 --> 00:02:15.766 A:middle
And we are adding spring
animations to UIView animations.

00:02:17.116 --> 00:02:22.036 A:middle
Another great API we have
in iOS 7 is motion effects.

00:02:22.346 --> 00:02:26.706 A:middle
A way to animate content
based on the physical position

00:02:26.706 --> 00:02:29.216 A:middle
and movement of your device.

00:02:29.576 --> 00:02:34.836 A:middle
That's how we build this
power act effect in iOS 7.

00:02:34.986 --> 00:02:38.096 A:middle
And when you start
interacting with content,

00:02:38.736 --> 00:02:41.236 A:middle
one great tool is
gesture recognizer

00:02:41.806 --> 00:02:45.746 A:middle
and drive changes
view moving based

00:02:45.806 --> 00:02:48.236 A:middle
on gesture recognizer callbacks.

00:02:49.616 --> 00:02:57.966 A:middle
But, you can also use lower
level APIs like CADisplayLink

00:02:58.546 --> 00:03:03.466 A:middle
and animate things at
screen refresh level.

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

00:02:58.546 --> 00:03:03.466 A:middle
and animate things at
screen refresh level.

00:03:03.796 --> 00:03:11.116 A:middle
And of course, you can actually
combine all of these techniques.

00:03:11.706 --> 00:03:14.286 A:middle
So, what is UIKit Dynamics?

00:03:15.456 --> 00:03:17.216 A:middle
I think somebody said yesterday

00:03:17.216 --> 00:03:20.496 A:middle
that this definition was
not exactly crystal clear.

00:03:21.116 --> 00:03:27.116 A:middle
It is a composable,
realtime system.

00:03:27.696 --> 00:03:32.116 A:middle
It's made to be--
you can subclass it.

00:03:32.116 --> 00:03:34.286 A:middle
You can combine effects
together,

00:03:34.816 --> 00:03:37.246 A:middle
and it's physics-inspired.

00:03:37.846 --> 00:03:41.506 A:middle
What kind of applications
can you build with that?

00:03:46.866 --> 00:03:49.506 A:middle
Well, maybe not.

00:03:50.826 --> 00:03:55.226 A:middle
Hoever that was probably
the most creative

00:03:55.646 --> 00:03:59.056 A:middle
and completely wrong
use of UISwitch ever.

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

00:04:02.136 --> 00:04:05.936 A:middle
No, and why not?

00:04:07.656 --> 00:04:09.646 A:middle
Because we have much
better tool for you.

00:04:10.406 --> 00:04:14.716 A:middle
Sprite Kits, it's a
great new game framework.

00:04:15.226 --> 00:04:18.536 A:middle
It's available on iOS and OS X.

00:04:19.366 --> 00:04:20.706 A:middle
It's a great foundering engine.

00:04:21.416 --> 00:04:28.396 A:middle
And we actually use the
same physics engine.

00:04:29.026 --> 00:04:33.316 A:middle
So then, where can you use
dynamics in your applications?

00:04:33.786 --> 00:04:40.236 A:middle
I have a very quick demo
I'd like to show you.

00:04:40.916 --> 00:04:45.126 A:middle
This is a very simple
likable example.

00:04:46.096 --> 00:04:49.366 A:middle
I can organize my pictures.

00:04:49.796 --> 00:04:54.576 A:middle
And, as you pay attention,
when I'm dragging a picture

00:04:54.576 --> 00:04:58.236 A:middle
by the center, it
moves as expected.

00:04:58.536 --> 00:05:03.126 A:middle
But when I drag by the
corner of this picture,

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

00:04:58.536 --> 00:05:03.126 A:middle
But when I drag by the
corner of this picture,

00:05:04.296 --> 00:05:06.906 A:middle
it will react the
way you would expect

00:05:06.906 --> 00:05:09.976 A:middle
when dragging something
in a table.

00:05:10.086 --> 00:05:15.386 A:middle
So we have natural real
world looking interactions.

00:05:15.726 --> 00:05:20.636 A:middle
I can select pictures to
the bottom of the screen.

00:05:20.986 --> 00:05:27.676 A:middle
I can throw this to
start organizing things.

00:05:28.616 --> 00:05:31.716 A:middle
But, maybe we can find
something easier actually.

00:05:32.356 --> 00:05:38.496 A:middle
So let's create new albums and
start organizing these albums.

00:05:39.656 --> 00:05:47.206 A:middle
OK. That's -- that's
much better.

00:05:47.806 --> 00:05:52.466 A:middle
So that's a good
example of using dynamics

00:05:53.616 --> 00:05:55.786 A:middle
in a non-game application.

00:05:55.896 --> 00:06:00.946 A:middle
So of course, that's
a WWDC demo app.

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

00:05:55.896 --> 00:06:00.946 A:middle
So of course, that's
a WWDC demo app.

00:06:00.946 --> 00:06:03.176 A:middle
How complex is that?

00:06:04.536 --> 00:06:06.546 A:middle
Actually, not that much.

00:06:06.546 --> 00:06:08.596 A:middle
You enter your application,

00:06:08.976 --> 00:06:11.466 A:middle
all implementation
files and no cheating.

00:06:11.466 --> 00:06:14.486 A:middle
It's about for 400
lines of code.

00:06:15.056 --> 00:06:19.736 A:middle
But what's interesting here
is I have a lot of code here

00:06:19.736 --> 00:06:25.166 A:middle
to load these images, have
this nice picture views.

00:06:25.606 --> 00:06:31.676 A:middle
The actual interaction code
is about 80 lines of code.

00:06:31.676 --> 00:06:33.486 A:middle
So that's really easy.

00:06:33.876 --> 00:06:38.106 A:middle
And most of it is in
this cute magnet effect.

00:06:39.516 --> 00:06:45.656 A:middle
[ Applause ]

00:06:46.156 --> 00:06:48.696 A:middle
So, let's start exploring
dynamics.

00:06:49.636 --> 00:06:51.836 A:middle
But first, why?

00:06:53.936 --> 00:06:56.616 A:middle
We wanted to provide a way

00:06:57.166 --> 00:07:00.556 A:middle
to [inaudible] model real
world inspired interactions.

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

00:06:57.166 --> 00:07:00.556 A:middle
to [inaudible] model real
world inspired interactions.

00:07:01.106 --> 00:07:04.856 A:middle
And we wanted also
to provide a way

00:07:05.286 --> 00:07:09.146 A:middle
to combine quick
canned animations,

00:07:09.186 --> 00:07:12.136 A:middle
predefined animation
and interactions.

00:07:13.306 --> 00:07:18.046 A:middle
And we wanted to offer you
something that's really was

00:07:18.046 --> 00:07:19.276 A:middle
at UI level.

00:07:20.126 --> 00:07:25.136 A:middle
And there is a good example
of that, the lock screen.

00:07:26.426 --> 00:07:29.176 A:middle
In iOS 6, do you
still remember iOS 6?

00:07:30.666 --> 00:07:34.736 A:middle
OK. In iOS 6, when you
tap this camera button,

00:07:35.506 --> 00:07:37.956 A:middle
you have the small
bounce animation, right,

00:07:38.446 --> 00:07:41.726 A:middle
to show there is actually
a Camera UI behind.

00:07:41.726 --> 00:07:47.266 A:middle
And then you can drag, so
that's going up to review it.

00:07:47.656 --> 00:07:50.436 A:middle
And you can actually end
that gesture or cancel,

00:07:50.986 --> 00:07:52.606 A:middle
and the lock screen
is going fall down.

00:07:54.146 --> 00:07:56.196 A:middle
What's interesting is, in iOS 6,

00:07:56.766 --> 00:07:58.846 A:middle
these two modes are
completely separate.

00:07:59.426 --> 00:08:03.316 A:middle
There is a predefined animation
for the tap bounce effect.

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

00:07:59.426 --> 00:08:03.316 A:middle
There is a predefined animation
for the tap bounce effect.

00:08:04.216 --> 00:08:07.466 A:middle
And because it's a
completely predefine animation,

00:08:07.906 --> 00:08:11.536 A:middle
you cannot catch with a
gesture the lock screen

00:08:11.576 --> 00:08:13.626 A:middle
in flight while it's animating.

00:08:14.286 --> 00:08:19.666 A:middle
And seen in iOS 6, when you end
that gesture interactive part,

00:08:20.856 --> 00:08:23.986 A:middle
the lock screen just animate
down, it doesn't bounce.

00:08:24.776 --> 00:08:27.556 A:middle
That's not what we want.

00:08:27.556 --> 00:08:30.986 A:middle
So in iOS 7, let me show you.

00:08:31.046 --> 00:08:33.076 A:middle
So that's when I tap
the camera button.

00:08:33.486 --> 00:08:38.046 A:middle
I slide up and cancel,
it bounces.

00:08:39.496 --> 00:08:42.236 A:middle
I slide up and I'm going
to [inaudible] the view,

00:08:43.686 --> 00:08:46.116 A:middle
the bounce is slightly
different.

00:08:46.746 --> 00:08:51.246 A:middle
So that's a good example

00:08:51.246 --> 00:08:53.916 A:middle
of [inaudible] interaction
you might want

00:08:53.916 --> 00:08:55.466 A:middle
to add in your application.

00:08:55.786 --> 00:09:02.606 A:middle
How? When we start to
thinking about this API,

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

00:08:55.786 --> 00:09:02.606 A:middle
How? When we start to
thinking about this API,

00:09:02.606 --> 00:09:08.786 A:middle
an interesting question was,
where should we add that?

00:09:09.526 --> 00:09:16.236 A:middle
And one idea was, "Maybe should
just add new methods to UIView,

00:09:16.966 --> 00:09:19.636 A:middle
like setMass, applyForce."

00:09:20.126 --> 00:09:23.056 A:middle
That's interesting,

00:09:23.056 --> 00:09:27.816 A:middle
but we realize that's not
what you want to express.

00:09:28.346 --> 00:09:32.286 A:middle
You want to express
high level effects.

00:09:32.866 --> 00:09:35.236 A:middle
You don't want just
to mess with these use

00:09:35.236 --> 00:09:36.516 A:middle
and forces and everything.

00:09:36.876 --> 00:09:40.696 A:middle
You want a high level more
the clarity of expression

00:09:40.696 --> 00:09:42.356 A:middle
of these interactions.

00:09:43.616 --> 00:09:49.956 A:middle
So then, we ask the concept we
use all over the place in UIKit

00:09:50.596 --> 00:09:53.226 A:middle
and in all of our
frameworks' composition.

00:09:54.566 --> 00:10:00.436 A:middle
And in dynamics, we
compose Predefined behaviors

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

00:09:54.566 --> 00:10:00.436 A:middle
And in dynamics, we
compose Predefined behaviors

00:10:00.586 --> 00:10:02.366 A:middle
for you own behaviors.

00:10:02.896 --> 00:10:08.236 A:middle
In this lock screen
example, the bouncing,

00:10:08.666 --> 00:10:10.566 A:middle
falling down and
bouncing effect.

00:10:11.766 --> 00:10:13.966 A:middle
Why do I really need
to express that?

00:10:14.656 --> 00:10:18.946 A:middle
I need gravity towards
a view falling.

00:10:20.116 --> 00:10:25.566 A:middle
And I need a collision to
get this bounce effect.

00:10:26.106 --> 00:10:29.676 A:middle
So, in dynamics, I would express

00:10:29.676 --> 00:10:35.566 A:middle
that as one view being popped
off two primitive behaviors,

00:10:35.946 --> 00:10:37.516 A:middle
gravity and collision.

00:10:38.726 --> 00:10:46.446 A:middle
And all these behaviors ran are
associated in animation context.

00:10:47.176 --> 00:10:50.136 A:middle
So if we start digging
in the architecture,

00:10:50.956 --> 00:10:55.496 A:middle
what we add is first that's
new class, UI DynamicAnimator

00:10:56.816 --> 00:11:01.366 A:middle
which provides the context, and
then you associate behaviors,

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

00:10:56.816 --> 00:11:01.366 A:middle
which provides the context, and
then you associate behaviors,

00:11:01.856 --> 00:11:05.356 A:middle
UI DynamicBehavior
subclasses to this animator.

00:11:05.886 --> 00:11:11.656 A:middle
And usually then, you associate
views to these behaviors.

00:11:12.676 --> 00:11:19.006 A:middle
And one key concept here is,
usually, you want to view

00:11:19.006 --> 00:11:25.336 A:middle
to be part of two or more
behaviors 'cause that's going

00:11:25.336 --> 00:11:28.456 A:middle
to combine the effect
of these behaviors.

00:11:28.796 --> 00:11:35.066 A:middle
The other thing we need is
what we call Reference View

00:11:35.676 --> 00:11:41.046 A:middle
which was a way to define
the global coordinate system,

00:11:42.206 --> 00:11:44.256 A:middle
in which we would
run this interaction

00:11:44.946 --> 00:11:46.976 A:middle
with the only constraint

00:11:46.976 --> 00:11:54.206 A:middle
that the views we animate
are actually subviews or part

00:11:54.206 --> 00:12:00.466 A:middle
of the view hierarchy
of that reference view.

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

00:11:54.206 --> 00:12:00.466 A:middle
of the view hierarchy
of that reference view.

00:12:00.686 --> 00:12:05.716 A:middle
So that's-- see in more
details what we have

00:12:05.716 --> 00:12:07.066 A:middle
in animators and behaviors.

00:12:07.656 --> 00:12:11.486 A:middle
UIDynamicAnimator provide
your overall context

00:12:11.486 --> 00:12:16.596 A:middle
for your animation and
defines the coordinate system.

00:12:16.916 --> 00:12:20.776 A:middle
And we'll see later,
that's quite interesting.

00:12:21.326 --> 00:12:28.246 A:middle
And it wraps the underlying
engine and we know when to start

00:12:28.246 --> 00:12:30.266 A:middle
and stop that engine for you.

00:12:34.036 --> 00:12:36.476 A:middle
It also keeps track
of all the behaviors

00:12:36.666 --> 00:12:38.956 A:middle
that are currently
associated with this animator.

00:12:40.046 --> 00:12:41.186 A:middle
It's really easy to use.

00:12:42.306 --> 00:12:44.596 A:middle
You just create a
UIDynamicAnimator

00:12:45.376 --> 00:12:51.306 A:middle
with the reference view
and then you just have

00:12:53.496 --> 00:12:56.196 A:middle
to add behaviors to that.

00:12:56.406 --> 00:12:57.086 A:middle
Behaviors.

00:12:57.116 --> 00:13:00.666 A:middle
UIDynamicBehavior is
something that is going

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

00:12:57.116 --> 00:13:00.666 A:middle
UIDynamicBehavior is
something that is going

00:13:00.666 --> 00:13:02.886 A:middle
to be associated
with DynamicAnimator.

00:13:04.046 --> 00:13:09.166 A:middle
It's usually associated with
a view or a set of views.

00:13:10.546 --> 00:13:17.816 A:middle
And we try to make behaviors
as declarative as possible.

00:13:18.376 --> 00:13:24.066 A:middle
It will describe some
inference view like

00:13:24.486 --> 00:13:26.416 A:middle
"That view should be
impacted by gravity.

00:13:27.036 --> 00:13:28.006 A:middle
That view should collide."

00:13:29.356 --> 00:13:34.766 A:middle
And a real interesting thing
about behaviors is you can add

00:13:34.766 --> 00:13:38.766 A:middle
and remove behaviors to
the animator at anytime.

00:13:39.806 --> 00:13:43.456 A:middle
And we'll see why that's a
real key concept in dynamics.

00:13:43.976 --> 00:13:47.106 A:middle
It's made to be composed.

00:13:47.666 --> 00:13:52.036 A:middle
You can actually group behaviors
together to define your own,

00:13:53.266 --> 00:13:56.046 A:middle
also by defining in
your own subclass.

00:13:56.506 --> 00:14:01.316 A:middle
And it's really easy to use.

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

00:13:56.506 --> 00:14:01.316 A:middle
And it's really easy to use.

00:14:01.316 --> 00:14:02.606 A:middle
Usually, you just want

00:14:02.606 --> 00:14:06.446 A:middle
to allocate-alloc init
a behavior usually

00:14:06.446 --> 00:14:07.266 A:middle
with a set of views.

00:14:07.856 --> 00:14:11.286 A:middle
And you add that
behavior to the animator.

00:14:11.816 --> 00:14:19.736 A:middle
And to help you, we
are providing in UIKit

00:14:19.736 --> 00:14:24.046 A:middle
in iOS 7 a set of
Predefined behaviors you can

00:14:24.046 --> 00:14:24.726 A:middle
combine together.

00:14:24.726 --> 00:14:30.826 A:middle
All of these behaviors
have some common traits.

00:14:31.566 --> 00:14:34.706 A:middle
First, usually, these
behaviors are configured

00:14:34.706 --> 00:14:38.566 A:middle
with items you want to animate.

00:14:39.776 --> 00:14:46.956 A:middle
Most of this, actually you can
add or remove views at anytime.

00:14:47.426 --> 00:14:50.556 A:middle
So if I want a view to be no
longer impacted by gravity,

00:14:51.226 --> 00:14:52.826 A:middle
I just remove it
from that behavior.

00:14:53.346 --> 00:15:02.196 A:middle
You can configure a behavior
before or after adding it

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

00:14:53.346 --> 00:15:02.196 A:middle
You can configure a behavior
before or after adding it

00:15:02.576 --> 00:15:09.066 A:middle
to an animator and the influence
of a behavior stops as soon

00:15:09.066 --> 00:15:12.076 A:middle
as you remove it from
the animator itself.

00:15:12.076 --> 00:15:15.196 A:middle
So what do we have?

00:15:16.456 --> 00:15:20.016 A:middle
gravity, we talked about that.

00:15:20.536 --> 00:15:21.116 A:middle
collisions.

00:15:22.936 --> 00:15:29.226 A:middle
Attachment, a way to
connect views together.

00:15:29.776 --> 00:15:34.696 A:middle
We have a high level of behavior
we call the Snap behavior

00:15:34.696 --> 00:15:37.206 A:middle
which is a way to
snap view into place.

00:15:37.296 --> 00:15:41.886 A:middle
We have a behavior,
a Push behavior

00:15:41.886 --> 00:15:44.856 A:middle
to apply forces to views.

00:15:45.326 --> 00:15:51.166 A:middle
And we have a low level
behavior which gives you a way

00:15:51.576 --> 00:15:56.156 A:middle
to twitch some physics
level properties of views,

00:15:57.366 --> 00:16:03.096 A:middle
like friction, for
instance, or density.

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

00:15:57.366 --> 00:16:03.096 A:middle
like friction, for
instance, or density.

00:16:04.226 --> 00:16:07.386 A:middle
So, let's explore this
Predefined behavior.

00:16:07.936 --> 00:16:09.346 A:middle
First one, Gravity behavior.

00:16:10.286 --> 00:16:12.896 A:middle
So if the only thing I have

00:16:13.566 --> 00:16:18.116 A:middle
in my animator is a gravity
behavior with just one view,

00:16:18.876 --> 00:16:26.076 A:middle
what's going to happen is
that, which is expected.

00:16:26.716 --> 00:16:32.496 A:middle
It's defined by a very simple
gravity vector which is uniform

00:16:32.496 --> 00:16:34.906 A:middle
and global to the
entire animator.

00:16:34.906 --> 00:16:37.886 A:middle
We have four views which
are part of this behavior.

00:16:39.136 --> 00:16:43.616 A:middle
And it's controlled by
x and the y components.

00:16:44.516 --> 00:16:46.726 A:middle
It's expressed in the
UIKit coordinate system.

00:16:47.636 --> 00:16:50.706 A:middle
So, (0,1) which is the default,

00:16:50.926 --> 00:16:55.266 A:middle
is gravity pointing
down which is nice.

00:16:55.746 --> 00:17:00.856 A:middle
And you can add and
remove items at any time.

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

00:16:55.746 --> 00:17:00.856 A:middle
And you can add and
remove items at any time.

00:17:01.436 --> 00:17:04.866 A:middle
It's quite easy to use.

00:17:05.665 --> 00:17:09.546 A:middle
You create a Gravity
behavior with a set of items

00:17:09.646 --> 00:17:12.526 A:middle
and you just add this
behavior to your animator.

00:17:13.046 --> 00:17:21.336 A:middle
Through this one open
question, though, (0,1),

00:17:21.925 --> 00:17:24.036 A:middle
which units do we use here?

00:17:25.266 --> 00:17:28.425 A:middle
Well, there was a well-known
constant about gravity,

00:17:28.906 --> 00:17:34.306 A:middle
Earth gravity, 9.80665
[inaudible].

00:17:34.976 --> 00:17:38.466 A:middle
Who designed this API?

00:17:40.366 --> 00:17:43.386 A:middle
UIKit Gravity, much better.

00:17:43.386 --> 00:17:47.586 A:middle
One thousand points
per second square.

00:17:48.136 --> 00:17:52.506 A:middle
It feels like Earth
gravity, trust me.

00:17:52.966 --> 00:17:56.556 A:middle
Just easier to use
points on devices.

00:17:58.516 --> 00:18:04.296 A:middle
[ Applause ]

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

00:17:58.516 --> 00:18:04.296 A:middle
[ Applause ]

00:18:04.796 --> 00:18:07.636 A:middle
Collision behavior, that is
a really interesting one.

00:18:09.716 --> 00:18:11.336 A:middle
You just add a view.

00:18:11.676 --> 00:18:13.446 A:middle
You can specify a boundary.

00:18:14.016 --> 00:18:16.996 A:middle
And in this case, I
actually added gravity

00:18:17.036 --> 00:18:22.006 A:middle
because without gravity, that
would not animate, right?

00:18:23.136 --> 00:18:29.966 A:middle
So, another mode is
colliding between views.

00:18:31.406 --> 00:18:33.786 A:middle
And of course, the third way

00:18:33.786 --> 00:18:37.866 A:middle
to use Collision
behavior is colliding

00:18:37.866 --> 00:18:39.976 A:middle
between views and boundaries.

00:18:40.046 --> 00:18:48.576 A:middle
Views are controlled by a very
simple property, collision mode.

00:18:48.576 --> 00:18:53.886 A:middle
UI won't views to collide with
views, views to only collide

00:18:54.096 --> 00:18:56.286 A:middle
with boundaries but
not with other views,

00:18:56.846 --> 00:19:00.426 A:middle
or a views colliding with
views and boundaries.

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

00:18:56.846 --> 00:19:00.426 A:middle
or a views colliding with
views and boundaries.

00:19:02.936 --> 00:19:07.706 A:middle
Like gravity, you can
add and remove items

00:19:07.706 --> 00:19:09.646 A:middle
from this behavior at any time.

00:19:09.646 --> 00:19:13.606 A:middle
So if I actually make a
bottom green view disappear,

00:19:13.606 --> 00:19:18.686 A:middle
what's going to happen is we
will resume the animation.

00:19:19.216 --> 00:19:23.556 A:middle
And I was talking
about Composition.

00:19:26.216 --> 00:19:31.976 A:middle
The real interesting use case
here is you can define multiple

00:19:31.976 --> 00:19:36.226 A:middle
Collision behaviors, so you can
express really easily things

00:19:36.226 --> 00:19:40.086 A:middle
like I want red views to
collide with red views,

00:19:40.456 --> 00:19:42.036 A:middle
green views with green views,

00:19:42.526 --> 00:19:45.526 A:middle
but not green views
and red views.

00:19:45.936 --> 00:19:53.916 A:middle
And a small word of warning
here, it's not completely free.

00:19:54.426 --> 00:19:57.056 A:middle
We steer around an
engine [inaudible],

00:19:57.586 --> 00:20:01.466 A:middle
so collisions do have a
cost we have to detect,

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

00:19:57.586 --> 00:20:01.466 A:middle
so collisions do have a
cost we have to detect,

00:20:01.856 --> 00:20:04.506 A:middle
compute when we have collisions.

00:20:08.566 --> 00:20:09.216 A:middle
Boundaries.

00:20:10.036 --> 00:20:11.676 A:middle
How do you create this?

00:20:12.826 --> 00:20:19.186 A:middle
There is a really easy way
which is having what you want

00:20:19.356 --> 00:20:23.686 A:middle
which use that reference view
we were talking about before

00:20:24.246 --> 00:20:27.836 A:middle
as the default boundary.

00:20:28.706 --> 00:20:30.066 A:middle
So that's a really
simple property.

00:20:30.596 --> 00:20:33.876 A:middle
We have a variant which--

00:20:33.916 --> 00:20:39.166 A:middle
with which you can
actually apply in sets.

00:20:39.306 --> 00:20:43.986 A:middle
And we have another way
to define boundaries.

00:20:43.986 --> 00:20:50.176 A:middle
So you can do things like
that by defining segments

00:20:51.226 --> 00:20:56.216 A:middle
or even path, UIBezierPath.

00:20:56.516 --> 00:21:00.116 A:middle
In that case, you have to know
that we basically approximate

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

00:20:56.516 --> 00:21:00.116 A:middle
In that case, you have to know
that we basically approximate

00:21:00.246 --> 00:21:03.056 A:middle
that with a set off lines.

00:21:03.196 --> 00:21:06.026 A:middle
But usually, it's OK.

00:21:06.416 --> 00:21:11.666 A:middle
When you create this, you
need to pass a notifier

00:21:12.626 --> 00:21:15.356 A:middle
and we will see why
in a few minutes.

00:21:15.876 --> 00:21:20.856 A:middle
And again, you can create
a multiple behavior,

00:21:20.856 --> 00:21:21.856 A:middle
multiple boundaries.

00:21:23.236 --> 00:21:25.876 A:middle
There is one thing
in these slides.

00:21:25.876 --> 00:21:31.136 A:middle
I did show you the
boundaries I was using.

00:21:32.026 --> 00:21:39.296 A:middle
On device, the only thing
you see is that view.

00:21:40.196 --> 00:21:44.386 A:middle
These boundaries are just
description of my system.

00:21:44.906 --> 00:21:47.296 A:middle
They don't have an
existence on screen.

00:21:47.816 --> 00:21:53.316 A:middle
We have an interesting
delegate on Collision behavior.

00:21:53.836 --> 00:21:59.536 A:middle
And you can be notified when
we actually have a collision.

00:21:59.646 --> 00:22:02.196 A:middle
So, when a view collides
with a view,

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

00:21:59.646 --> 00:22:02.196 A:middle
So, when a view collides
with a view,

00:22:03.156 --> 00:22:06.476 A:middle
you can implement this
method and you will get

00:22:06.736 --> 00:22:14.796 A:middle
where that collision took place,
and same thing for boundaries.

00:22:15.476 --> 00:22:19.036 A:middle
And this is why we have
this boundary notifier,

00:22:19.426 --> 00:22:23.816 A:middle
so you will know which
wall you collided with.

00:22:25.206 --> 00:22:30.386 A:middle
And by definition,
when you get nil,

00:22:30.386 --> 00:22:36.296 A:middle
it was this reference bounds
easy way to set up boundaries

00:22:37.346 --> 00:22:44.216 A:middle
and that is implicit
bounds we pass nil.

00:22:44.436 --> 00:22:47.126 A:middle
Next, Attachment behavior.

00:22:48.896 --> 00:22:55.256 A:middle
This describe a view connected
to an attachment point

00:22:55.626 --> 00:22:59.836 A:middle
and it's really easy to use.

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

00:23:00.706 --> 00:23:04.996 A:middle
You just pass a view and
where that one should be

00:23:05.206 --> 00:23:08.906 A:middle
and that's expressed in the
reference view coordinate space.

00:23:09.256 --> 00:23:13.646 A:middle
We have a variant for that

00:23:14.196 --> 00:23:17.876 A:middle
where you can actually
connect two views together.

00:23:19.416 --> 00:23:29.086 A:middle
So in this case, imagine that
I then push that middle view,

00:23:29.916 --> 00:23:32.986 A:middle
the system is going to
react as you would expect.

00:23:37.076 --> 00:23:42.716 A:middle
You can even specify
where that connection is.

00:23:43.076 --> 00:23:49.476 A:middle
You can specify as an offset
from the center of the view

00:23:50.096 --> 00:23:56.596 A:middle
where we should attach this view
or these two views together.

00:23:57.796 --> 00:24:02.736 A:middle
There is a nice feature
in UIAttachmentBehavior.

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

00:23:57.796 --> 00:24:02.736 A:middle
There is a nice feature
in UIAttachmentBehavior.

00:24:09.036 --> 00:24:14.616 A:middle
Springs. You can configure an
Attachment behavior as a spring.

00:24:15.516 --> 00:24:20.076 A:middle
[ Applause ]

00:24:20.576 --> 00:24:24.296 A:middle
Just pass a Frequency and
Damping and it will act

00:24:24.356 --> 00:24:27.046 A:middle
as a really easy
to set up spring.

00:24:27.476 --> 00:24:29.466 A:middle
Another interesting feature is

00:24:30.316 --> 00:24:33.016 A:middle
that attachment point
can be moved.

00:24:33.656 --> 00:24:38.616 A:middle
So if I move the attachment
point, the view is going

00:24:38.616 --> 00:24:40.816 A:middle
to move as you would expect.

00:24:43.896 --> 00:24:48.746 A:middle
We also have a length
property that you can change.

00:24:49.766 --> 00:24:50.956 A:middle
Usually, you don't need

00:24:50.956 --> 00:24:55.796 A:middle
that because we compute
the length at init time.

00:24:57.186 --> 00:24:59.586 A:middle
Sometimes, you need that
but you have to know

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

00:25:00.126 --> 00:25:06.146 A:middle
when you change just in one
shot, the lengths of something,

00:25:06.146 --> 00:25:07.926 A:middle
it's not really physically.

00:25:07.926 --> 00:25:11.586 A:middle
So, it's really not
a common case.

00:25:16.316 --> 00:25:17.296 A:middle
Like boundaries,

00:25:18.536 --> 00:25:22.136 A:middle
these attachments are not
visible in your application.

00:25:22.376 --> 00:25:26.786 A:middle
It's just description of how
your system should react.

00:25:28.386 --> 00:25:31.556 A:middle
I'd like to show
your how it feels.

00:25:32.516 --> 00:25:45.956 A:middle
[ Pause ]

00:25:46.456 --> 00:25:51.526 A:middle
So in that example,
I actually added code

00:25:52.246 --> 00:25:55.116 A:middle
to show you the collision
boundaries

00:25:55.176 --> 00:25:58.396 A:middle
and the attachment
because, without that,

00:25:58.396 --> 00:25:59.966 A:middle
it would just be a view moving

00:25:59.966 --> 00:26:01.766 A:middle
in a very strange
way of the screen.

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

00:25:59.966 --> 00:26:01.766 A:middle
in a very strange
way of the screen.

00:26:02.316 --> 00:26:09.096 A:middle
So, again, to start with
a very simple attachment.

00:26:09.896 --> 00:26:11.936 A:middle
So that's my gesture.

00:26:12.556 --> 00:26:13.516 A:middle
So it really acts

00:26:13.516 --> 00:26:19.156 A:middle
like a nonflexible small
rod connected to this shape.

00:26:19.556 --> 00:26:20.916 A:middle
There is no gravity, so it's

00:26:20.916 --> 00:26:25.796 A:middle
like that's green shape
was just flat on a table,

00:26:26.646 --> 00:26:32.386 A:middle
so I can push or
pull that shape.

00:26:37.516 --> 00:26:38.196 A:middle
All right.

00:26:38.666 --> 00:26:48.716 A:middle
And, the other mode we have for
Attachment behavior is Springs.

00:26:49.806 --> 00:26:50.676 A:middle
So, let's see.

00:26:51.296 --> 00:26:55.106 A:middle
It's just the same thing.

00:26:55.106 --> 00:27:00.696 A:middle
I can actually push
that view or pull it.

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

00:26:55.106 --> 00:27:00.696 A:middle
I can actually push
that view or pull it.

00:27:01.316 --> 00:27:04.556 A:middle
And just because of
that Spring effect,

00:27:05.276 --> 00:27:09.546 A:middle
you don't have exactly
the same animation.

00:27:10.516 --> 00:27:18.616 A:middle
[ Pause ]

00:27:19.116 --> 00:27:22.816 A:middle
Snap behavior that's
a high level,

00:27:22.816 --> 00:27:24.806 A:middle
really easy to use behavior.

00:27:25.396 --> 00:27:29.946 A:middle
It just snaps a view at specific
place on the screen and we try

00:27:29.946 --> 00:27:34.546 A:middle
to get it back to
non-rotated state.

00:27:35.376 --> 00:27:40.206 A:middle
It looks like that.

00:27:40.406 --> 00:27:43.246 A:middle
Really easy to use.

00:27:43.426 --> 00:27:47.206 A:middle
Oh, you can actually customize
also that dumping effect.

00:27:47.786 --> 00:27:50.486 A:middle
One way to understand
the Snap behavior is just

00:27:50.486 --> 00:27:54.516 A:middle
like if we had set
up four small springs

00:27:55.206 --> 00:27:56.926 A:middle
at the corner of that view.

00:27:57.496 --> 00:28:05.306 A:middle
To create a Snap behavior, you
just pass an item and a point

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

00:27:57.496 --> 00:28:05.306 A:middle
To create a Snap behavior, you
just pass an item and a point

00:28:05.306 --> 00:28:09.876 A:middle
in the reference view coordinate
system, and you just add

00:28:11.036 --> 00:28:12.946 A:middle
that Snap behavior
to your animator.

00:28:18.016 --> 00:28:22.066 A:middle
Push behavior, that's
a way to apply forces.

00:28:26.696 --> 00:28:28.676 A:middle
And, you just want to set

00:28:28.676 --> 00:28:31.816 A:middle
up a Push behavior
with a set of views.

00:28:32.466 --> 00:28:36.426 A:middle
And there is this
mode parameter here.

00:28:36.976 --> 00:28:37.746 A:middle
What does that mean?

00:28:37.746 --> 00:28:41.406 A:middle
It means that, in this mode,
we're going to apply a force

00:28:41.406 --> 00:28:45.556 A:middle
which is the force will
still be applied while

00:28:45.556 --> 00:28:48.356 A:middle
that behavior is
active in the animator.

00:28:48.706 --> 00:28:52.026 A:middle
So, which means that for
this view, the view is going

00:28:52.026 --> 00:28:57.676 A:middle
to accelerate, right, 'cause
I keep applying that force.

00:28:57.676 --> 00:29:03.416 A:middle
It's defined with a very simple
force vector, xComponent,

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

00:28:57.676 --> 00:29:03.416 A:middle
It's defined with a very simple
force vector, xComponent,

00:29:03.416 --> 00:29:07.296 A:middle
yComponent, or magnitude
and angle, if you prefer.

00:29:07.836 --> 00:29:13.056 A:middle
And there is another
interesting feature here.

00:29:13.506 --> 00:29:16.046 A:middle
You can actually
customize where,

00:29:16.546 --> 00:29:19.286 A:middle
in that view, we
apply this force.

00:29:20.186 --> 00:29:22.836 A:middle
So it's an offset
from the center

00:29:22.836 --> 00:29:24.606 A:middle
of the view which
is the default.

00:29:25.746 --> 00:29:29.426 A:middle
And if you apply a
force small offset

00:29:29.426 --> 00:29:33.216 A:middle
from the center is still being
to push that view but you want

00:29:33.216 --> 00:29:39.526 A:middle
to get this rotation
effect at the same time.

00:29:39.556 --> 00:29:44.136 A:middle
Units, we have a well-known
unit per force Newton,

00:29:44.916 --> 00:29:49.066 A:middle
which is defined as the
amount of force you need

00:29:49.206 --> 00:29:54.926 A:middle
to accelerate 1 kilogram to
1 meter per second squared.

00:29:55.516 --> 00:29:57.516 A:middle
[ Pause ]

00:29:58.016 --> 00:30:01.000 A:middle
[ Laughter ]

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

00:29:58.016 --> 00:30:01.000 A:middle
[ Laughter ]

00:30:02.176 --> 00:30:03.576 A:middle
UIKit Newton.

00:30:07.156 --> 00:30:11.126 A:middle
Accelerate to 100
point by 100 point view

00:30:11.176 --> 00:30:14.256 A:middle
with a default density to
100 point per second squared.

00:30:15.156 --> 00:30:17.046 A:middle
Should we give it
a name on UIKit,

00:30:17.046 --> 00:30:17.456 A:middle
[inaudible], I don't know.

00:30:17.456 --> 00:30:22.496 A:middle
You don't-- we don't need a
name actually 'cause it's really

00:30:22.496 --> 00:30:23.056 A:middle
in Newton.

00:30:23.746 --> 00:30:28.966 A:middle
Observe that we are expressing
it in the UIKit unit system.

00:30:31.556 --> 00:30:34.696 A:middle
There is an also
interesting feature

00:30:34.696 --> 00:30:40.126 A:middle
to UIPushBehavior what we
call the instantaneous mode,

00:30:40.126 --> 00:30:41.046 A:middle
immediate mode.

00:30:41.646 --> 00:30:44.326 A:middle
In that case, instead
of applying a force,

00:30:45.056 --> 00:30:48.016 A:middle
we just apply very
quick impulse,

00:30:49.296 --> 00:30:56.406 A:middle
which mean that this view, we
immediately acquire a velocity,

00:30:57.356 --> 00:30:58.996 A:middle
it's not going to accelerate

00:30:58.996 --> 00:31:02.426 A:middle
over time it will just
kick it a little bit.

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

00:30:58.996 --> 00:31:02.426 A:middle
over time it will just
kick it a little bit.

00:31:03.546 --> 00:31:09.076 A:middle
And it's going to
automatically visible itself

00:31:09.596 --> 00:31:10.656 A:middle
after applying it.

00:31:11.616 --> 00:31:13.476 A:middle
And if you want to
reenable that again,

00:31:13.476 --> 00:31:15.726 A:middle
we have the Active property.

00:31:16.626 --> 00:31:19.896 A:middle
And you can set that to
Yes again and you would get

00:31:19.896 --> 00:31:21.536 A:middle
that [inaudible] force again.

00:31:22.166 --> 00:31:27.306 A:middle
That's a great way to actually
implement this tap Camera button

00:31:27.476 --> 00:31:28.306 A:middle
in the lock screen.

00:31:31.256 --> 00:31:32.966 A:middle
So we have gravity.

00:31:33.846 --> 00:31:35.976 A:middle
Push behavior in force mode.

00:31:36.036 --> 00:31:40.206 A:middle
Push behavior impulse mode.

00:31:41.246 --> 00:31:43.326 A:middle
One is immediate
velocity change.

00:31:43.326 --> 00:31:45.726 A:middle
The other one is
accelerating the view.

00:31:45.936 --> 00:31:50.706 A:middle
How could we see how that
works and understand better?

00:31:51.676 --> 00:31:55.896 A:middle
Science. We should
grab some graph paper,

00:31:56.696 --> 00:31:59.816 A:middle
run some experiments
and see what happens.

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

00:32:00.526 --> 00:32:01.636 A:middle
We're going to do exactly that.

00:32:02.516 --> 00:32:11.576 A:middle
[ Pause ]

00:32:12.076 --> 00:32:18.726 A:middle
So, the first setup here is two
views which we're going to add

00:32:19.236 --> 00:32:20.336 A:middle
to a Gravity behavior.

00:32:20.986 --> 00:32:24.736 A:middle
In that case, the
relative size or density

00:32:24.736 --> 00:32:26.466 A:middle
of the view will not matter.

00:32:27.416 --> 00:32:33.506 A:middle
So, these views are just going
to accelerate the big one

00:32:33.506 --> 00:32:35.226 A:middle
and the small one
at the same rate.

00:32:35.766 --> 00:32:41.406 A:middle
Now, Push behavior
in continuous mode.

00:32:42.236 --> 00:32:46.106 A:middle
So we will apply the same
force to these two views.

00:32:46.696 --> 00:32:48.156 A:middle
These two views will
be part actually

00:32:48.156 --> 00:32:49.756 A:middle
of the same Push behavior.

00:32:50.406 --> 00:32:52.186 A:middle
One is smaller than
the other one,

00:32:52.186 --> 00:32:53.646 A:middle
so it's actually easier to use.

00:32:53.646 --> 00:32:55.506 A:middle
So it's going to
accelerate faster.

00:32:56.706 --> 00:32:57.986 A:middle
Let's verify that.

00:32:58.646 --> 00:33:00.916 A:middle
Yup, that's correct.

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

00:32:58.646 --> 00:33:00.916 A:middle
Yup, that's correct.

00:33:01.306 --> 00:33:08.386 A:middle
And the third mode is Push
behavior in instantaneous mode.

00:33:09.046 --> 00:33:12.566 A:middle
That's just at a very
quick impulse these views.

00:33:13.436 --> 00:33:19.156 A:middle
So, as you see, these do
acquire a velocity but then

00:33:19.156 --> 00:33:20.596 A:middle
that velocity doesn't change.

00:33:21.016 --> 00:33:22.826 A:middle
These views are not
accelerating.

00:33:23.726 --> 00:33:27.546 A:middle
So if we run everything again,

00:33:28.096 --> 00:33:34.736 A:middle
it feels like the last views are
actually decelerating but not.

00:33:34.736 --> 00:33:38.976 A:middle
It's just an effect
of the other view

00:33:39.396 --> 00:33:41.136 A:middle
which are indeed accelerating.

00:33:41.696 --> 00:33:43.456 A:middle
So, that's difference
between Gravity

00:33:44.156 --> 00:33:48.496 A:middle
and the two modes we
have for Push behaviors.

00:33:51.516 --> 00:34:01.536 A:middle
[ Applause ]

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

00:33:51.516 --> 00:34:01.536 A:middle
[ Applause ]

00:34:02.036 --> 00:34:03.856 A:middle
UIDynamicItemBehavior.

00:34:05.256 --> 00:34:09.275 A:middle
This one is the last
Predefined behavior we have.

00:34:10.356 --> 00:34:13.396 A:middle
It's a little bit strange.

00:34:13.426 --> 00:34:20.366 A:middle
It's more acting as a template
you can apply to your views.

00:34:20.775 --> 00:34:22.636 A:middle
With Dynamic Item Behavior,

00:34:22.996 --> 00:34:29.056 A:middle
you can actually customize
properties to one or many views.

00:34:29.536 --> 00:34:33.416 A:middle
And what we have is friction

00:34:33.525 --> 00:34:38.396 A:middle
when views are sliding
one on top of the other.

00:34:38.396 --> 00:34:42.545 A:middle
We have dumpingResistance
and angularResistance.

00:34:43.016 --> 00:34:46.846 A:middle
And that's useful
because without dumping,

00:34:48.446 --> 00:34:50.926 A:middle
views would just keep moving

00:34:51.666 --> 00:34:54.366 A:middle
which is usually the feel
you don't want in a UI,

00:34:54.366 --> 00:34:58.046 A:middle
so we have a default
dumping set on views.

00:34:58.936 --> 00:35:02.716 A:middle
Another interesting
one is elasticity

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

00:34:58.936 --> 00:35:02.716 A:middle
Another interesting
one is elasticity

00:35:02.716 --> 00:35:09.226 A:middle
which is the restitution when
you collide to the bounciness.

00:35:10.526 --> 00:35:14.406 A:middle
And density which is a
way to actually set a mass

00:35:14.446 --> 00:35:17.206 A:middle
or a relative mass
between views.

00:35:17.996 --> 00:35:18.986 A:middle
So, we cheat.

00:35:19.546 --> 00:35:20.826 A:middle
We don't offer you set mass.

00:35:21.506 --> 00:35:23.076 A:middle
But we do offer you set density.

00:35:24.176 --> 00:35:24.996 A:middle
Fair enough.

00:35:26.066 --> 00:35:28.006 A:middle
And the last one is-- whoops.

00:35:28.846 --> 00:35:34.476 A:middle
So that was-- the right view was
part of a UIDynamicItemBehavior

00:35:35.306 --> 00:35:39.106 A:middle
which actually changed
the elasticity property,

00:35:39.106 --> 00:35:41.106 A:middle
so it bounce more.

00:35:41.496 --> 00:35:47.536 A:middle
And we have one last property
which is interesting for UI

00:35:47.846 --> 00:35:50.846 A:middle
which is allowsRotation which
is basically a way to cheat

00:35:51.696 --> 00:35:56.446 A:middle
with the underlying engine
and to actually block rotation

00:35:56.746 --> 00:35:59.706 A:middle
of the items we animate.

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

00:36:01.496 --> 00:36:07.096 A:middle
There is another really
useful low level method

00:36:07.096 --> 00:36:12.896 A:middle
in UIDynamicItemBehaviors,
that's a way to immediately set,

00:36:13.446 --> 00:36:17.616 A:middle
immediately add a given
velocity to a view.

00:36:18.476 --> 00:36:19.696 A:middle
And why is that useful?

00:36:21.956 --> 00:36:25.996 A:middle
Sometimes, your interaction
with dynamic starts

00:36:26.096 --> 00:36:30.786 A:middle
after a regular gesture-based
interaction.

00:36:31.816 --> 00:36:35.466 A:middle
And in this case, you add
this seamless transition

00:36:36.626 --> 00:36:41.326 A:middle
from the gesture-based
phase to dynamics phase,

00:36:42.496 --> 00:36:45.586 A:middle
you want to exactly match
the gesture velocity.

00:36:46.706 --> 00:36:50.126 A:middle
So you can actually inject in
the system with this method,

00:36:50.716 --> 00:36:53.026 A:middle
the gesture velocity itself.

00:36:54.346 --> 00:36:55.146 A:middle
That's really useful.

00:36:55.576 --> 00:36:59.146 A:middle
And, 'cause we use
the UIKit unit system,

00:36:59.816 --> 00:37:02.896 A:middle
it's expressed in
points per second.

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

00:36:59.816 --> 00:37:02.896 A:middle
it's expressed in
points per second.

00:37:07.136 --> 00:37:08.366 A:middle
Applying Dynamics.

00:37:08.906 --> 00:37:13.276 A:middle
So when you want to add dynamics

00:37:13.616 --> 00:37:15.026 A:middle
through repetition,
what do you need?

00:37:16.096 --> 00:37:18.586 A:middle
First, you need to know which
views you want to animate.

00:37:18.586 --> 00:37:22.916 A:middle
You want to define
what is this container

00:37:23.446 --> 00:37:26.826 A:middle
or reference view you would
create the animator with.

00:37:27.446 --> 00:37:32.166 A:middle
And then it's really about
creating the behaviors you need,

00:37:33.366 --> 00:37:36.286 A:middle
adding views to these behaviors.

00:37:36.726 --> 00:37:43.486 A:middle
Next thing is configuring
if needed these behaviors

00:37:44.246 --> 00:37:47.206 A:middle
and associating these
behaviors to animators--

00:37:48.036 --> 00:37:52.586 A:middle
to your animator, and that's it.

00:37:53.956 --> 00:38:00.496 A:middle
As soon as we have a view in an
active behavior and we detect

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

00:37:53.956 --> 00:38:00.496 A:middle
As soon as we have a view in an
active behavior and we detect

00:38:00.496 --> 00:38:04.886 A:middle
that the system is not
at rest, we reanimate.

00:38:05.496 --> 00:38:11.126 A:middle
The other thing is when we
detect that the system is

00:38:11.446 --> 00:38:13.226 A:middle
at rest, we stop animating,

00:38:13.226 --> 00:38:15.246 A:middle
which means that we
basically stop the engine,

00:38:15.496 --> 00:38:18.296 A:middle
we stop the CADisplayLink
we use on those [inaudible].

00:38:18.896 --> 00:38:23.386 A:middle
So, a system at rest is
not consuming CPU at all.

00:38:28.966 --> 00:38:31.726 A:middle
Well, this is physics.

00:38:31.846 --> 00:38:38.156 A:middle
So, you can actually
create with this API setup

00:38:39.046 --> 00:38:46.156 A:middle
which don't really make
sense, like if you say

00:38:46.156 --> 00:38:49.486 A:middle
that this view should
collide with that boundary

00:38:50.356 --> 00:38:54.926 A:middle
but if the initial state of that
view is completely intersecting

00:38:55.076 --> 00:39:01.306 A:middle
with that boundary, you won't
really have animations, right?

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

00:38:55.076 --> 00:39:01.306 A:middle
with that boundary, you won't
really have animations, right?

00:39:02.116 --> 00:39:05.036 A:middle
And we are going to be
slightly confused about that.

00:39:05.936 --> 00:39:10.386 A:middle
And also interesting variant
with Collision behavior is

00:39:10.706 --> 00:39:12.536 A:middle
if you try to add
all these views

00:39:12.986 --> 00:39:17.566 A:middle
in this very small enclosed
space, it's not going

00:39:17.566 --> 00:39:23.136 A:middle
to work 'cause we basically
can't compute a correct solution

00:39:23.136 --> 00:39:23.886 A:middle
for that setup.

00:39:26.956 --> 00:39:31.296 A:middle
And in all-time coverage,
when you have a view blocked

00:39:31.296 --> 00:39:36.146 A:middle
by a boundary and you try
to apply an infinite force,

00:39:39.816 --> 00:39:44.506 A:middle
this will not break your device.

00:39:45.256 --> 00:39:50.746 A:middle
So, when I-- what
I usually suggest

00:39:51.336 --> 00:39:53.266 A:middle
when you're building
systems with dynamics is

00:39:53.266 --> 00:39:56.316 A:middle
to build that step by step.

00:39:57.236 --> 00:40:00.396 A:middle
Start with one behavior,
add your views,

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

00:39:57.236 --> 00:40:00.396 A:middle
Start with one behavior,
add your views,

00:40:01.046 --> 00:40:03.806 A:middle
configure that behavior,
see how that reacts,

00:40:03.806 --> 00:40:08.636 A:middle
add another behavior, see
what's changing, see--

00:40:08.876 --> 00:40:11.566 A:middle
check if the actual
interactions feels right,

00:40:12.016 --> 00:40:15.506 A:middle
and then keep adding or
tweaking your behaviors.

00:40:15.506 --> 00:40:21.026 A:middle
If you start by constructing
this incredibly complex set

00:40:21.026 --> 00:40:23.326 A:middle
of behaviors in the
configuration

00:40:23.326 --> 00:40:25.736 A:middle
or the [inaudible], and
if that doesn't work,

00:40:25.736 --> 00:40:27.056 A:middle
that's not really easy

00:40:27.086 --> 00:40:30.316 A:middle
to actually understand
what's [inaudible].

00:40:30.316 --> 00:40:34.716 A:middle
So in this case, just remove
one-by-one your behaviors

00:40:34.716 --> 00:40:41.136 A:middle
to understand which one was
actually causing the problem.

00:40:41.226 --> 00:40:46.096 A:middle
Did I mention that we are
sometimes cheating with physics?

00:40:47.296 --> 00:40:51.126 A:middle
This is not a physics-accurate
simulation tool.

00:40:52.166 --> 00:40:56.536 A:middle
Do not use that to control
your Evil Genius Space Station.

00:40:57.936 --> 00:41:02.026 A:middle
That is your configuration that
we do not support explicitly.

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

00:40:57.936 --> 00:41:02.026 A:middle
That is your configuration that
we do not support explicitly.

00:41:02.566 --> 00:41:11.036 A:middle
And that's really a core
concept of dynamics.

00:41:11.426 --> 00:41:16.206 A:middle
But I'd like to show you
a few additional things.

00:41:17.876 --> 00:41:22.996 A:middle
The first one is what
we call Dynamic Items.

00:41:23.516 --> 00:41:27.396 A:middle
You may not notice that,
in this presentation,

00:41:27.396 --> 00:41:31.646 A:middle
I was talking sometimes about
views, sometimes about items,

00:41:31.646 --> 00:41:35.656 A:middle
sometimes-- most of these
methods actually were init

00:41:35.656 --> 00:41:36.306 A:middle
with items.

00:41:37.216 --> 00:41:39.916 A:middle
So, views or items?

00:41:42.376 --> 00:41:46.506 A:middle
UIDynamicItem is
actually a protocol.

00:41:46.566 --> 00:41:53.386 A:middle
And what's great about that
is it describes what we need

00:41:54.456 --> 00:41:55.576 A:middle
for something associated

00:41:55.576 --> 00:42:00.696 A:middle
with a Predefined
behavior to be animated.

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

00:41:55.576 --> 00:42:00.696 A:middle
with a Predefined
behavior to be animated.

00:42:01.096 --> 00:42:04.996 A:middle
And what UIKit needs
to animate something

00:42:04.996 --> 00:42:08.156 A:middle
in dynamics is actually
pretty basic.

00:42:08.156 --> 00:42:13.866 A:middle
We need to be able to
actually move an item.

00:42:15.346 --> 00:42:20.116 A:middle
We need to know the size of
this item because we need

00:42:20.116 --> 00:42:27.256 A:middle
that for correct forces,
computation, or collisions.

00:42:27.766 --> 00:42:32.906 A:middle
And an object without a size
is again not really physics.

00:42:32.906 --> 00:42:37.436 A:middle
And we need to animate
a rotation

00:42:37.646 --> 00:42:41.196 A:middle
because the only thing we
animate is 2D rotations.

00:42:43.336 --> 00:42:48.966 A:middle
Guess what, UIView actually
implement that UIDynamicItem.

00:42:48.966 --> 00:42:53.886 A:middle
Center, transform,
bounce, that's all we need.

00:42:55.036 --> 00:42:56.736 A:middle
But because of that's
actually a protocol,

00:42:57.926 --> 00:42:58.786 A:middle
you can implement that.

00:42:59.896 --> 00:43:02.156 A:middle
You can define your
own dynamic item.

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

00:42:59.896 --> 00:43:02.156 A:middle
You can define your
own dynamic item.

00:43:02.886 --> 00:43:07.796 A:middle
Your own classes
implementing UIDynamicItem,

00:43:08.106 --> 00:43:14.766 A:middle
and we will just call center
and transform on this.

00:43:14.976 --> 00:43:18.126 A:middle
It's actually a really
simple protocol.

00:43:19.156 --> 00:43:22.796 A:middle
I can add everything
on just one slide.

00:43:23.416 --> 00:43:26.386 A:middle
The thing we need is we need

00:43:26.386 --> 00:43:29.196 A:middle
to know the initial
state for an item.

00:43:29.286 --> 00:43:30.666 A:middle
So we need to know the position.

00:43:30.666 --> 00:43:32.286 A:middle
We need to know the size.

00:43:32.596 --> 00:43:36.186 A:middle
We need to know the initial
rotation only to the rotation.

00:43:37.026 --> 00:43:40.346 A:middle
And then, when we animate
on each [inaudible],

00:43:40.476 --> 00:43:43.526 A:middle
we basically call
center and transform.

00:43:44.676 --> 00:43:48.296 A:middle
And that's how we
animate things.

00:43:48.456 --> 00:43:55.706 A:middle
Actually, there is another class
in UIKit when you set a position

00:43:56.296 --> 00:44:01.266 A:middle
to transform and which has a
size, and that's not UIView.

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

00:43:56.296 --> 00:44:01.266 A:middle
to transform and which has a
size, and that's not UIView.

00:44:05.376 --> 00:44:07.146 A:middle
CollectionViewLayoutAttributes.

00:44:07.656 --> 00:44:10.736 A:middle
You can use dynamics
which UICollectionView

00:44:11.696 --> 00:44:18.076 A:middle
and the way it works is
UICollectionViewLayoutAttributes

00:44:18.136 --> 00:44:21.646 A:middle
which is what we use when
you define your own layout

00:44:21.966 --> 00:44:27.496 A:middle
to describe where a given cell
is going to add on screen.

00:44:28.536 --> 00:44:29.946 A:middle
That class we introduced

00:44:29.946 --> 00:44:33.866 A:middle
in iOS 6 actually
implements UIDynamicItem.

00:44:35.606 --> 00:44:39.476 A:middle
And when you want to
create an animator

00:44:39.476 --> 00:44:46.056 A:middle
to actually animate parts
of a layout, you just create

00:44:46.056 --> 00:44:49.196 A:middle
that with the layout
itself instead

00:44:49.196 --> 00:44:50.606 A:middle
of passing a reference view.

00:44:51.476 --> 00:44:52.466 A:middle
For the layout is going

00:44:52.466 --> 00:44:56.576 A:middle
to define a size
CollectionView button size

00:44:57.116 --> 00:44:59.666 A:middle
and that's all we need.

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

00:45:00.356 --> 00:45:05.506 A:middle
And then when you want to
create your own behaviors,

00:45:05.536 --> 00:45:08.406 A:middle
instead of passing views,

00:45:09.056 --> 00:45:13.306 A:middle
just pass your
UICollectionViewLayoutAttributes

00:45:13.356 --> 00:45:14.076 A:middle
instances.

00:45:15.156 --> 00:45:17.916 A:middle
And we're going to animate this.

00:45:18.136 --> 00:45:22.436 A:middle
And because you passed through
layout at alloc-init time,

00:45:23.046 --> 00:45:26.626 A:middle
we will derive the layout
in validation itself.

00:45:27.446 --> 00:45:30.366 A:middle
Which also mean that when we
detect that a system is at rest,

00:45:31.316 --> 00:45:33.626 A:middle
we want to invalidate
your CollectionViewLayout.

00:45:34.106 --> 00:45:38.156 A:middle
So that's Dynamics
and UICollectionView.

00:45:39.516 --> 00:45:47.226 A:middle
[ Applause ]

00:45:47.726 --> 00:45:51.706 A:middle
And, because that's
the last demo,

00:45:51.776 --> 00:45:53.776 A:middle
I'm going to do something
a little bit silly.

00:45:54.516 --> 00:46:00.116 A:middle
[ Pause ]

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

00:45:54.516 --> 00:46:00.116 A:middle
[ Pause ]

00:46:00.616 --> 00:46:01.966 A:middle
That's a CollectionView.

00:46:02.926 --> 00:46:04.496 A:middle
Actually, that's a subclass

00:46:04.496 --> 00:46:07.546 A:middle
of a well-known
UICollectionViewLayout.

00:46:08.066 --> 00:46:11.456 A:middle
You might know
UICollectionViewFlowLayout.

00:46:12.246 --> 00:46:15.576 A:middle
Well that was just
a subclass of this.

00:46:15.766 --> 00:46:18.576 A:middle
And what can you do
is a CollectionView

00:46:19.236 --> 00:46:21.116 A:middle
with a data source
in a CollectionView.

00:46:21.946 --> 00:46:24.556 A:middle
You can add new elements, right?

00:46:24.936 --> 00:46:26.966 A:middle
So let's do that .

00:46:27.516 --> 00:46:31.516 A:middle
[ Pause ]

00:46:32.016 --> 00:46:41.000 A:middle
[ Applause ]

00:46:41.516 --> 00:46:48.136 A:middle
[ Pause ]

00:46:48.636 --> 00:46:56.426 A:middle
To conclude, UIKit Dynamics is
really an interaction-oriented

00:46:56.756 --> 00:46:58.256 A:middle
animation system.

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

00:47:00.336 --> 00:47:03.086 A:middle
The best way to use dynamics is

00:47:03.366 --> 00:47:07.516 A:middle
to create this small
additional effects are going

00:47:07.516 --> 00:47:09.866 A:middle
to make your application
more alive

00:47:10.316 --> 00:47:11.926 A:middle
and have this natural feel.

00:47:12.576 --> 00:47:16.376 A:middle
And that one good thing
to keep in mind is

00:47:16.416 --> 00:47:22.126 A:middle
to notify your key
elements and animate this.

00:47:22.716 --> 00:47:28.516 A:middle
Again, it's really about
focusing on the user experience.

00:47:28.516 --> 00:47:30.696 A:middle
What can make your
app even better?

00:47:32.146 --> 00:47:35.436 A:middle
We have UI Dynamics
recommendation

00:47:35.436 --> 00:47:39.226 A:middle
in the UIKit Prerelease Library.

00:47:39.776 --> 00:47:46.816 A:middle
We have another session about
UIKit Dynamics and I'm going

00:47:46.816 --> 00:47:52.076 A:middle
to explore how to create real
effects by combining behavior

00:47:52.076 --> 00:47:55.846 A:middle
and creating your own UI
Dynamic behavior subclass.

00:47:56.776 --> 00:48:01.946 A:middle
We have some related sessions
custom transition using

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

00:47:56.776 --> 00:48:01.946 A:middle
We have some related sessions
custom transition using

00:48:01.946 --> 00:48:02.836 A:middle
View Controllers.

00:48:03.856 --> 00:48:05.386 A:middle
And you can actually
use dynamics

00:48:05.386 --> 00:48:08.766 A:middle
with View Controllers transition
[inaudible] about that.

00:48:09.526 --> 00:48:12.636 A:middle
And we have-- or
if you're indeed,

00:48:12.636 --> 00:48:16.696 A:middle
game oriented two
sessions about SpriteKits.

00:48:17.266 --> 00:48:22.756 A:middle
We have a dedicated dynamics lab
[inaudible], come talk to us,

00:48:23.106 --> 00:48:25.686 A:middle
and we can't wait to see what
you're going to do with that.

00:48:25.936 --> 00:48:26.346 A:middle
Thank you.

00:48:26.846 --> 00:48:29.670 A:middle
[Applause]