221 Creating Custom iOS User Interfaces [English].srt

1
00:00:11,078 --> 00:00:18,078
good afternoon

2
00:00:18,088 --> 00:00:20,161
my name is Brandon new and/or and I'm a
software engineer

3
00:00:21,061 --> 00:00:25,088
on iowa's and welcome to creating custom
I A West user interfaces

4
00:00:25,088 --> 00:00:29,171
if you take a look at Ohio West today it
is filled with really interesting

5
00:00:30,071 --> 00:00:34,136
engaging unique interfaces for our users
you can see that in things

6
00:00:35,036 --> 00:00:38,555
like the Notification Center which takes
a bit of a blur effect

7
00:00:38,879 --> 00:00:42,180
to give you a sense love being at a
different dept above the operating

8
00:00:42,018 --> 00:00:42,073
system

9
00:00:42,073 --> 00:00:45,158
Notification Center also uses affects
like vibrancy

10
00:00:46,058 --> 00:00:49,058
to create text that is highly legible at
all times

11
00:00:49,058 --> 00:00:53,114
you also see interesting interfaces like
what we call the suggestions view in

12
00:00:54,014 --> 00:00:54,071
Serie

13
00:00:54,071 --> 00:00:57,076
forget we have these pieces a text
better animating

14
00:00:57,076 --> 00:01:00,153
on and off screen at all times getting
the sense being polled on and off the

15
00:01:01,053 --> 00:01:01,102
screen

16
00:01:02,002 --> 00:01:06,029
we use a custom UI in a lot of places
across the system

17
00:01:06,029 --> 00:01:09,086
and you might be thinking to yourself I
want to build really cool stuff like

18
00:01:09,086 --> 00:01:09,152
this as well

19
00:01:10,052 --> 00:01:13,060
the same things that you should think
about there are questions we also like

20
00:01:14,032 --> 00:01:15,041
to ask ourselves

21
00:01:15,041 --> 00:01:18,053
when creating new cases the view I for
the operating system

22
00:01:18,053 --> 00:01:22,086
the first thing that you should think
about is where are you going to use this

23
00:01:22,086 --> 00:01:22,145
you why

24
00:01:23,045 --> 00:01:26,574
how does the students here ap and what
kind of purpose does it serve

25
00:01:26,979 --> 00:01:31,790
for users and your customers sometimes
you want to create you why

26
00:01:31,079 --> 00:01:35,097
that needs to represent multiple states
for example you might be creating

27
00:01:35,097 --> 00:01:38,115
a download control the need to have
states like an title

28
00:01:39,015 --> 00:01:42,059
odd downloading in progress cancelled

29
00:01:42,059 --> 00:01:45,138
and complete States so you want to think
about those and think about how to

30
00:01:46,038 --> 00:01:46,110
design

31
00:01:47,001 --> 00:01:50,630
and craft your control in a way that
supports those different states and six

32
00:01:50,729 --> 00:01:56,240
its intended for you also want to think
about what are you going to share this

33
00:01:56,024 --> 00:01:56,032
control

34
00:01:57,004 --> 00:02:01,193
or those peace and you I cross several
applications sorting and I'll essay

35
00:02:01,229 --> 00:02:05,200
you can create frameworks for your app
which are a great way to share code

36
00:02:05,002 --> 00:02:09,002
between naps that your team is creating
or even release it to the public

37
00:02:09,002 --> 00:02:12,008
to help other people use the same kind
of pieces if you I

38
00:02:12,026 --> 00:02:16,038
and in the last thing you might want to
think about

39
00:02:16,038 --> 00:02:19,079
or what pieces have a PI can you
leverage to make your job

40
00:02:19,079 --> 00:02:22,090
easier a lot of times we have you why

41
00:02:22,009 --> 00:02:26,020
or controls in UI kit that will make its
very easy for you to create custom

42
00:02:27,001 --> 00:02:27,050
things

43
00:02:27,005 --> 00:02:31,056
without having the subclass code so what
are some API is that you might find

44
00:02:32,001 --> 00:02:32,760
useful

45
00:02:32,769 --> 00:02:36,784
if you were to want to take Avengers
things we offering you like it

46
00:02:36,919 --> 00:02:41,150
what are those is the UI appearance
system you I appearance

47
00:02:41,015 --> 00:02:44,062
allows you to configure certain
characteristics up the default you like

48
00:02:44,062 --> 00:02:44,145
it controls

49
00:02:45,045 --> 00:02:49,294
without having to subclass them one of
the most popular leader uses for you I

50
00:02:49,699 --> 00:02:50,400
parents

51
00:02:50,004 --> 00:02:54,243
is the tent color which allows you to
configure the color of controls that we

52
00:02:54,639 --> 00:02:55,695
provide as part of you like it

53
00:02:56,199 --> 00:03:01,190
without having the subclass them one
particularly useful piece in the UAE

54
00:03:01,019 --> 00:03:01,112
appearance system

55
00:03:02,012 --> 00:03:06,094
is the UN image rendering mode this is
something we introduce an Iowa 7

56
00:03:06,094 --> 00:03:09,116
last year the lousy to provide a single
image

57
00:03:10,016 --> 00:03:13,100
into your application we take a look at
the alpha channel from that image

58
00:03:14,000 --> 00:03:17,078
and can apply to college to it so if you
would like to change the color this

59
00:03:17,078 --> 00:03:17,140
image

60
00:03:18,004 --> 00:03:22,043
during your apt life cycle orchid design
team would like to change the 10 color

61
00:03:22,079 --> 00:03:23,868
your application will it and development

62
00:03:24,579 --> 00:03:28,320
it's very very easy to apply universally
across your app

63
00:03:28,032 --> 00:03:32,171
we introduce dynamic type with I West
Sep

64
00:03:32,459 --> 00:03:36,130
which gives you a really great way to
respect your users request

65
00:03:36,013 --> 00:03:40,031
for larger or smaller type across the
system and it's important that you do

66
00:03:40,031 --> 00:03:41,031
the best you can

67
00:03:41,031 --> 00:03:44,037
to honor those preferences to help
things be more legible

68
00:03:44,091 --> 00:03:49,420
for users accessibility is a critical
part of Iowa's

69
00:03:50,239 --> 00:03:54,120
we care very deeply about making sure
our operating system is accessible to as

70
00:03:54,012 --> 00:03:55,441
many people as possible

71
00:03:55,549 --> 00:03:58,554
and this a very powerful APIs around
accessibility

72
00:03:59,049 --> 00:04:02,780
that are important for you to use if you
decide to build custom UI

73
00:04:02,078 --> 00:04:06,107
in your application there's no reason to
not support accessibility

74
00:04:07,007 --> 00:04:10,041
in your app and finally localization

75
00:04:10,041 --> 00:04:15,084
another very critical part abiola's we
rely localization to extend I West has

76
00:04:15,084 --> 00:04:16,633
many customers as possible

77
00:04:17,389 --> 00:04:21,850
and this a new localization tools and I
was 8 that make this even easier for you

78
00:04:21,085 --> 00:04:25,140
beyond those I like to introduce four
new topics today

79
00:04:26,004 --> 00:04:29,010
the first is we're going to talk about
spring animations

80
00:04:30,000 --> 00:04:35,069
which are a great way to make your
controls feel like a native party by OS

81
00:04:35,069 --> 00:04:39,075
the next thing are some new techniques
for vibrancy and blur

82
00:04:39,669 --> 00:04:42,800
after that we're going to talk about CA
shape layers

83
00:04:42,008 --> 00:04:45,014
CSA players are great way that you can
drop custom UI

84
00:04:45,086 --> 00:04:48,122
within your application and enemy
changes to it

85
00:04:49,022 --> 00:04:53,191
and then finally we're going to talk
about dynamic core animation behaviors

86
00:04:53,389 --> 00:04:56,810
and how you can make changes and have
even more control than you may realize

87
00:04:56,081 --> 00:05:00,100
over the behaviors and that coronation
provides today

88
00:05:01,000 --> 00:05:04,034
let's get started with spring animations

89
00:05:04,034 --> 00:05:07,543
the first thing to understand is you
need to understand what spring animation

90
00:05:07,849 --> 00:05:08,720
is

91
00:05:08,072 --> 00:05:11,115
and you probably think I'm a spring
animation as a balancing effect that

92
00:05:12,015 --> 00:05:14,083
mimics a springer a slinky in the real
world

93
00:05:14,083 --> 00:05:18,152
and will you can create very bouncy
effects like that with spring animations

94
00:05:19,052 --> 00:05:22,074
that's not the only thing you do with
springs

95
00:05:22,074 --> 00:05:25,973
really you can think about spring
animations as a new default I'm anchor

96
00:05:26,639 --> 00:05:29,770
for animations within your application

97
00:05:29,077 --> 00:05:32,126
in fact we use that these new timing
curves

98
00:05:32,819 --> 00:05:35,900
for nearly every system animation
starting in Iowa 7

99
00:05:36,629 --> 00:05:39,638
nearly everything you see that we
provide as part of my OS

100
00:05:39,719 --> 00:05:43,741
is built around spring in the nation's
now you can actually creates

101
00:05:43,939 --> 00:05:47,520
new animations a spring admissions in
your app with out the you said you like

102
00:05:47,052 --> 00:05:48,411
it dynamics

103
00:05:48,879 --> 00:05:51,976
dynamics is an incredibly powerful tool
for creating physics simulations within

104
00:05:52,849 --> 00:05:52,928
your app

105
00:05:53,639 --> 00:05:56,840
but there's easier ways to get at Spring
animations

106
00:05:56,084 --> 00:05:59,103
in fact the API for making a spring
animation in your app

107
00:06:00,003 --> 00:06:03,046
is nearly the same as using the enemy
with duration block

108
00:06:03,046 --> 00:06:06,102
that you're used to using today on you I
love you

109
00:06:07,002 --> 00:06:10,071
so what do spring animations look like
on the road

110
00:06:10,071 --> 00:06:13,650
up left side of the screen for you guys
i've a red box

111
00:06:14,289 --> 00:06:18,270
that's going to animate using the
default even is out timing kar

112
00:06:18,027 --> 00:06:21,256
on the right side we have a blue box
that's going to animate

113
00:06:21,499 --> 00:06:25,522
with the spring animation both
animations we use the same duration

114
00:06:25,729 --> 00:06:29,760
and they're moving the same distance but
when the animation start

115
00:06:30,039 --> 00:06:33,340
you'll notice that the spring animation
very quickly gets up to speed

116
00:06:33,034 --> 00:06:36,043
and then slowly tapers off as it reaches
its final position

117
00:06:36,043 --> 00:06:39,049
compared to the e-zine is out animation

118
00:06:39,049 --> 00:06:43,218
let's slow that down a little bit more
you can take a closer look

119
00:06:43,659 --> 00:06:46,664
you see when the animation begins

120
00:06:47,159 --> 00:06:50,090
the spring animation quickly moves up to
speed and then spent a considerable

121
00:06:50,009 --> 00:06:52,037
amount of its animation duration:

122
00:06:52,037 --> 00:06:55,055
reaching that final position its final
resting state

123
00:06:55,055 --> 00:06:58,112
compare this with these in is out where
it takes a little more time to get up to

124
00:06:59,012 --> 00:07:00,891
speed

125
00:07:00,999 --> 00:07:04,021
another way to visualize this is the
plot what that Kurt

126
00:07:04,219 --> 00:07:08,210
timing curve looks like overtime you can
see a default curve

127
00:07:08,021 --> 00:07:11,630
very slowly builds up its velocity and
then immediately starts to slow down its

128
00:07:11,819 --> 00:07:13,837
velocity for the end

129
00:07:13,999 --> 00:07:17,770
spring animations however launch up to
speed almost immediately

130
00:07:17,077 --> 00:07:20,686
and then spend the last third or so
other duration: reaching what we call

131
00:07:21,379 --> 00:07:22,383
the long tail

132
00:07:22,419 --> 00:07:26,650
or that slow bit where we finally
reached the the final position

133
00:07:26,065 --> 00:07:29,664
where do we use Spring animations and I
West today one place

134
00:07:30,249 --> 00:07:33,290
is watching aP's an opening and closing
folders

135
00:07:33,659 --> 00:07:37,360
you pay close attention to these
animations you see it feels like the

136
00:07:37,036 --> 00:07:40,395
the animation begins and very quickly
shows the user the content that they're

137
00:07:40,719 --> 00:07:41,735
about to see

138
00:07:41,879 --> 00:07:45,888
and then one closing very quickly pulls
the folder out on the way

139
00:07:46,779 --> 00:07:50,050
another place that we like to use fring
animations is in the default

140
00:07:50,005 --> 00:07:54,334
push and pop animations for navigation
controllers as well as presenting

141
00:07:54,379 --> 00:07:57,426
moral views on and off the screen

142
00:07:57,849 --> 00:08:01,680
and finally that serious suggestions you
that we looked at earlier

143
00:08:01,068 --> 00:08:05,457
is both with spring animations we use a
single spring animation to pull the text

144
00:08:06,069 --> 00:08:06,157
on-screen

145
00:08:06,949 --> 00:08:10,400
of the bottom and allowed to slowly
drift across the screen

146
00:08:10,004 --> 00:08:13,023
and then a second spring innovation to
quickly pull it out of the way

147
00:08:13,059 --> 00:08:17,318
making room for the next said it strings

148
00:08:17,849 --> 00:08:20,930
what is the OP I look like for spring
animations

149
00:08:20,093 --> 00:08:23,852
it's like I said is a single method on
you if you that makes us really

150
00:08:24,689 --> 00:08:26,761
straightforward for you to take
advantage of spring animations

151
00:08:27,409 --> 00:08:31,270
in your app many these parameters look
familiar to you

152
00:08:31,027 --> 00:08:34,125
but like to call out the two that are
unique to spring animations

153
00:08:35,025 --> 00:08:39,083
and those in the damping and the initial
spring velocity parameters

154
00:08:39,083 --> 00:08:43,412
damping takes a value from 0 to 1 and
controls how much resistance the spring

155
00:08:44,159 --> 00:08:44,910
has

156
00:08:44,091 --> 00:08:48,105
completing the animation at the end the
initial spring velocity

157
00:08:49,005 --> 00:08:52,098
is used to give the animation a kick to
push the object into the

158
00:08:52,098 --> 00:08:55,191
animation curve you can also use it to
synchronize the animation

159
00:08:56,091 --> 00:08:59,093
with something that's in flight today
let's take a look at how these different

160
00:09:00,011 --> 00:09:00,097
values

161
00:09:00,097 --> 00:09:03,194
have an effect on spring animations

162
00:09:04,094 --> 00:09:07,137
wanna start out with the same blue box

163
00:09:08,037 --> 00:09:11,126
and a damn thing a .1 and you can see
when the animation completes there's a

164
00:09:12,026 --> 00:09:13,725
lot of oscillation at the end

165
00:09:13,959 --> 00:09:17,610
it feels like you would expect a spring
to be in the real world

166
00:09:17,061 --> 00:09:20,113
you might want to subject but you might
not

167
00:09:21,013 --> 00:09:25,016
by stepping the damping up to something
like .5 you can see we considerably

168
00:09:25,016 --> 00:09:27,017
reduce how much isolation we get

169
00:09:27,017 --> 00:09:30,236
with this animation this still fair
amount about think the end

170
00:09:30,389 --> 00:09:35,230
but it's much more controlled bring the
damping up 2.8

171
00:09:35,023 --> 00:09:39,024
reduces most that damping effect you can
see there's a very small bounce back at

172
00:09:39,024 --> 00:09:40,072
the end of the animation

173
00:09:40,072 --> 00:09:44,751
but for the most part the animation a
smoothly reaches the end

174
00:09:45,399 --> 00:09:49,455
and finally bringing the damping up to
1.0 gives us know of elation at the end

175
00:09:49,959 --> 00:09:53,560
it just smoothly reaches that final
position getting a very nice

176
00:09:53,056 --> 00:09:56,143
fast feeling to the animation so it's
bring in

177
00:09:57,043 --> 00:10:01,069
the initial velocity parameter we're
going to leave damping the same

178
00:10:01,069 --> 00:10:04,125
but give our Spring a much stronger kick
to start the animation

179
00:10:05,025 --> 00:10:09,044
you can see almost immediately launch
the box passed its first position

180
00:10:09,269 --> 00:10:12,295
and actually overcomes the spring to
have it bounce back a little bit at the

181
00:10:12,529 --> 00:10:13,880
end

182
00:10:13,088 --> 00:10:17,094
and even stronger initial velocity can
blow even further past that final

183
00:10:17,094 --> 00:10:17,187
position

184
00:10:18,087 --> 00:10:22,046
but the damn thing value may quickly
posted in to rest

185
00:10:22,829 --> 00:10:26,829
and then finally we can combine these to
make their unique effects

186
00:10:26,829 --> 00:10:30,930
giving us a damping tell you that
resists oscillation an initial velocity

187
00:10:30,093 --> 00:10:34,118
to give a nice fast K to our Spring

188
00:10:35,018 --> 00:10:37,093
so where would you want to think about
using Spring animations in your

189
00:10:37,093 --> 00:10:38,138
application

190
00:10:39,038 --> 00:10:42,063
they're a fantastic substitute for
linear animations

191
00:10:42,063 --> 00:10:46,107
that you're used to using with the
current you have %um it with duration:

192
00:10:47,007 --> 00:10:51,646
in fact any place that you would like to
fit in to the native UI controls that we

193
00:10:51,709 --> 00:10:51,797
provide

194
00:10:52,589 --> 00:10:56,500
you should consider using Spring
animations instead because nearly every

195
00:10:56,005 --> 00:10:58,092
animation that's part if you like it
that's part of the OS

196
00:10:59,037 --> 00:11:03,049
is built around spring animations

197
00:11:03,049 --> 00:11:06,051
spring animations also give your
controls and your animations a more

198
00:11:06,069 --> 00:11:07,156
natural feeling to the user's

199
00:11:08,056 --> 00:11:11,895
because springs are something that are
part the real world around us

200
00:11:12,399 --> 00:11:15,407
it's also important to keep in mind that
we live show you examples with the

201
00:11:16,199 --> 00:11:17,238
position property

202
00:11:17,589 --> 00:11:22,230
you can use fring animations to apply to
any animal property in you like it

203
00:11:22,023 --> 00:11:25,038
that means if you want to have the Alpha
for your layers are for your views

204
00:11:25,038 --> 00:11:25,104
change

205
00:11:26,004 --> 00:11:29,042
you can do that on a springtime in her

206
00:11:29,042 --> 00:11:31,141
I have a demo application put together
and let's take a look at what spring

207
00:11:32,041 --> 00:11:34,125
animations can do for us there

208
00:11:35,025 --> 00:11:38,354
so this is my demo application I have
this very nice

209
00:11:38,579 --> 00:11:41,880
rainbow gradient background and then a
control bar at the bottom

210
00:11:41,088 --> 00:11:44,407
grab some custom controls that I can use
to configure

211
00:11:45,199 --> 00:11:48,231
that gradients rendering I can change
number of colors

212
00:11:48,519 --> 00:11:52,920
and I kill also pick how many colors
repeat within the gradient

213
00:11:52,092 --> 00:11:55,138
now these controls corporately being
animated on and off screen with the

214
00:11:56,038 --> 00:11:56,094
default

215
00:11:56,094 --> 00:11:59,149
even he's out timing curve and it feels
very

216
00:12:00,049 --> 00:12:03,648
very normal but it also feels like
there's a lot of time spent

217
00:12:04,089 --> 00:12:08,130
with the control getting in the way of
the user actually interacting with it

218
00:12:08,013 --> 00:12:12,066
so I was substituted substitute in a
pair spring animations

219
00:12:12,066 --> 00:12:16,435
so my demo code I have a couple blocks
I'm doing animations and already

220
00:12:17,029 --> 00:12:20,050
the used to present and dismiss the
modal view

221
00:12:20,005 --> 00:12:24,044
and you can see here I'm already using
you I love you ended it with duration

222
00:12:24,089 --> 00:12:27,440
and passing it and animation block

223
00:12:27,044 --> 00:12:31,253
what I'm going to do is just replace
that with the spring animation

224
00:12:31,649 --> 00:12:34,686
you can see the API is almost exactly
what we had before just with a couple

225
00:12:35,019 --> 00:12:37,060
extra arguments

226
00:12:37,006 --> 00:12:41,031
for my presentation we're going to use a
damping value of points 75

227
00:12:41,031 --> 00:12:44,860
if you remember the boxes on screen this
will give us a little bit boss elation

228
00:12:45,139 --> 00:12:47,880
early but have bouncing at the end to
the animation

229
00:12:47,088 --> 00:12:50,104
I'm also going to use an initial spring
velocity up ten

230
00:12:51,004 --> 00:12:56,038
to give even more the cake to get that
control on-screen quickly

231
00:12:56,038 --> 00:12:59,997
also going to take a look that might
dismiss animation

232
00:13:00,339 --> 00:13:03,750
again right now we're using the same and
it with duration

233
00:13:03,075 --> 00:13:06,138
ever going to substitute in another
spring animation

234
00:13:07,038 --> 00:13:10,227
for the dismiss I'm going to use a very
strong damping of one

235
00:13:10,569 --> 00:13:13,470
I don't really want to be bouncing when
it reaches its final position in the

236
00:13:13,047 --> 00:13:13,138
dock

237
00:13:14,038 --> 00:13:17,104
and I'm going to give it no initial
velocity to just let the spring itself

238
00:13:18,004 --> 00:13:21,673
poll that view back into the dock with
those changes

239
00:13:21,709 --> 00:13:25,740
let's take a look at what that does to
the app just as a quick reminder

240
00:13:25,074 --> 00:13:29,033
this is what it looks like right now
without the spring in the nation's

241
00:13:29,699 --> 00:13:32,730
the control very smoothly slides in and
out but it still feels a little bit like

242
00:13:33,009 --> 00:13:34,910
it's getting in the way

243
00:13:34,091 --> 00:13:37,500
when we switch over to a version with
the spring animations

244
00:13:38,319 --> 00:13:41,364
you can see there's a very different but
subtle effect

245
00:13:41,769 --> 00:13:45,230
the spring quickly pulls the the view on
screen you can see that very small

246
00:13:45,023 --> 00:13:46,092
bounce when it presents

247
00:13:46,092 --> 00:13:49,097
but it feels like it's getting on and
off the screen and available to the user

248
00:13:50,042 --> 00:13:54,117
much faster than it did before and
that's how we can use fring animations

249
00:13:55,017 --> 00:13:58,060
to bring a new feeling the animations
within Europe

250
00:13:58,006 --> 00:14:01,006
the next thing i'd like to talk about
something called you I

251
00:14:01,006 --> 00:14:04,075
visual effect you before we get to that
however

252
00:14:05,029 --> 00:14:08,091
I want to spend a couple minutes talking
about how we render things

253
00:14:08,091 --> 00:14:12,950
on iowa's some other API's that we're
going to be talking about today

254
00:14:13,769 --> 00:14:15,851
can have a dramatic effect on the
rendering performance in your

255
00:14:16,589 --> 00:14:16,681
application

256
00:14:17,509 --> 00:14:20,541
and it's important to understand how
they actually work within the rendering

257
00:14:20,829 --> 00:14:22,835
system

258
00:14:22,889 --> 00:14:26,895
so if you're take a look at the entire
system there's largely four steps that

259
00:14:26,949 --> 00:14:27,660
we take

260
00:14:27,066 --> 00:14:30,735
to render content for your application
we get your app a chance to handle

261
00:14:31,329 --> 00:14:32,000
events

262
00:14:32,000 --> 00:14:35,069
and uncommitted transactions to the
render server the render server

263
00:14:35,069 --> 00:14:38,141
which is part of the system on iowa's
processes that transaction

264
00:14:39,041 --> 00:14:42,136
does some more work and composites
layers which are handed off to the GP

265
00:14:43,036 --> 00:14:44,080
you to be rendered

266
00:14:44,008 --> 00:14:47,487
the GP will take its own block of time
to render all those layers

267
00:14:48,279 --> 00:14:52,550
and then handed off from the display to
present your user

268
00:14:52,055 --> 00:14:55,274
let's focus on just a little bit on the
except that we take within your

269
00:14:55,769 --> 00:14:56,777
application

270
00:14:57,569 --> 00:15:01,190
is largely for things that take place
within your app

271
00:15:01,019 --> 00:15:04,068
the first thing will do is due any setup
work and ask your views to lay

272
00:15:04,068 --> 00:15:05,667
themselves out

273
00:15:06,279 --> 00:15:09,690
if you're using auto layout we're going
to take the time here to compute the

274
00:15:09,069 --> 00:15:10,116
welfare at

275
00:15:11,016 --> 00:15:14,099
every doing manual AL previews we're
going to call the outside the US

276
00:15:14,099 --> 00:15:17,388
and ask your views from to lay
themselves out

277
00:15:18,279 --> 00:15:21,420
the next thing we'll deal is due any
necessary dry

278
00:15:21,042 --> 00:15:24,068
if they need using to draw themselves if
you implement a drought wracked

279
00:15:24,068 --> 00:15:27,166
on some interviews well ask that to
occur here will also do some string

280
00:15:28,066 --> 00:15:30,091
drawing at this time

281
00:15:30,091 --> 00:15:33,098
next we're going to give core animation
a little bit of time

282
00:15:33,098 --> 00:15:36,197
to prepare some images if anything the
code or convert them for rendering

283
00:15:37,097 --> 00:15:41,196
before we finally package up the layers
and send them up to the render server

284
00:15:42,069 --> 00:15:46,090
this is a very very broad overview how
the render server works

285
00:15:46,279 --> 00:15:49,500
if you'd like to find out more there was
a fantastic talk yesterday

286
00:15:49,005 --> 00:15:52,030
by their performance team that would
really encourage you to check out

287
00:15:52,075 --> 00:15:56,086
they go to a lot of great detail on how
all the steps actually work

288
00:15:56,086 --> 00:16:01,315
so with that quick understanding let's
go back to you I visual effect feel

289
00:16:02,089 --> 00:16:05,920
last year to be the BDC we introduced a
new API

290
00:16:05,092 --> 00:16:08,761
called drug new hierarchy and racked and
a system to go with that for creating

291
00:16:09,589 --> 00:16:09,597
fast

292
00:16:10,389 --> 00:16:13,397
static blur effect within your
application and we continue to recommend

293
00:16:14,189 --> 00:16:16,250
you take advantage of this technique

294
00:16:16,025 --> 00:16:19,294
if the content that you want to show
behind a blur is not

295
00:16:19,519 --> 00:16:22,660
actively changing for the user the
reason for this

296
00:16:22,066 --> 00:16:25,555
is just incredibly well optimized for
your application

297
00:16:26,149 --> 00:16:30,180
so we encourage you to continue using
that as much as possible

298
00:16:30,018 --> 00:16:33,043
however we heard that one or two if you
wanted something a little bit more

299
00:16:33,043 --> 00:16:33,124
advanced

300
00:16:34,024 --> 00:16:38,030
you want to do live were facts like we
have across Iowa s

301
00:16:38,003 --> 00:16:42,462
and to that end we are introducing you I
visual effect you

302
00:16:42,759 --> 00:16:46,791
your visual affect you to creates to
affects types

303
00:16:47,079 --> 00:16:50,100
it's a technique for creating live
dealers in your application

304
00:16:50,001 --> 00:16:53,840
and for creating vibrancy effects let's
take a look at what both for those

305
00:16:53,939 --> 00:16:55,953
affect actually mean

306
00:16:56,079 --> 00:16:59,154
alive for a fact is exactly what the
name suggests

307
00:16:59,829 --> 00:17:03,050
it we could have content behind a view
that has blurred

308
00:17:03,005 --> 00:17:06,092
and has some color effects change to it
as well all rendered in real time

309
00:17:06,092 --> 00:17:09,127
on your device vibrancy

310
00:17:10,027 --> 00:17:13,104
is used to create content that is highly
legible at all times

311
00:17:14,004 --> 00:17:17,075
on top of a blur in the screenshot you
see right now

312
00:17:17,075 --> 00:17:20,098
the FaceTime icon and the text are being
rendered

313
00:17:20,098 --> 00:17:23,183
with the vibrancy and you can see that
text is always legible

314
00:17:24,083 --> 00:17:31,083
no matter what colors or content are
being bored behind it

315
00:17:32,005 --> 00:17:38,039
the

316
00:17:38,039 --> 00:17:39,133
we have three styles for blur effects

317
00:17:40,033 --> 00:17:44,059
the first to those is a dark color you
can see that we're darkening the

318
00:17:44,059 --> 00:17:44,146
background here

319
00:17:45,046 --> 00:17:48,128
were also D separating the colors a
little bit it's more than just

320
00:17:49,028 --> 00:17:52,034
changing a blur a late bloomer fact

321
00:17:52,034 --> 00:17:55,040
is almost the opposite that again we're
blurring but we're starting to wash out

322
00:17:55,094 --> 00:17:56,107
some other colors as well

323
00:17:57,007 --> 00:18:00,040
finally we introduce extra light blur

324
00:18:00,004 --> 00:18:04,041
which almost entirely Dez at Reitz the
content blows out most of the colors

325
00:18:04,077 --> 00:18:07,135
but still gives you a blur effects to
give you a sense of what content

326
00:18:08,035 --> 00:18:13,079
is behind the view so what's up to me
make to take

327
00:18:13,079 --> 00:18:17,132
to create a blur effect as I said it's
more than just a simple gal simpler

328
00:18:18,032 --> 00:18:19,050
within your application

329
00:18:19,005 --> 00:18:23,007
the first thing we do when we create a
blur effect ever wanted down sample all

330
00:18:23,007 --> 00:18:23,096
the content

331
00:18:24,059 --> 00:18:28,067
that's waiting to be blurred the reason
we do that is for performance

332
00:18:28,067 --> 00:18:31,165
you are going to see the fine details a
review when we're going to blur at

333
00:18:32,065 --> 00:18:35,082
so we've got a hand down sample that too
much smaller size

334
00:18:35,082 --> 00:18:39,150
before applying blur effect the next
thing we do is modify the colors

335
00:18:40,005 --> 00:18:44,017
and this is based on what perfect you've
requested well either D separate

336
00:18:44,062 --> 00:18:47,071
or over saturate colors to create the
various styles

337
00:18:47,071 --> 00:18:51,088
and in the final sup is we're going to
compute the blurs

338
00:18:51,088 --> 00:18:56,088
and composite this back into your
application vibrancy effect

339
00:18:56,088 --> 00:18:59,091
as I said is a technique for making
legible content

340
00:18:59,091 --> 00:19:03,116
this typically placed on top of a blur
and we treat this with a few steps as

341
00:19:04,016 --> 00:19:04,051
well

342
00:19:04,051 --> 00:19:07,124
the first thing will do is Bruce the
saturation other content

343
00:19:08,024 --> 00:19:11,091
and then we're going to apply a custom
blend mode to the vibrant content

344
00:19:11,091 --> 00:19:14,155
and that put the blend mode is going to
change

345
00:19:15,055 --> 00:19:18,142
based on what kinda blur you expect to
put the vibrant backed on top of that

346
00:19:19,042 --> 00:19:21,043
way and for that reason

347
00:19:21,052 --> 00:19:24,101
you need to tell us what kinda blur
using when you create

348
00:19:25,001 --> 00:19:28,077
a vibrant effect so how do we use this
in your application

349
00:19:28,077 --> 00:19:31,102
the first thing I'll do is initialized a
new

350
00:19:32,002 --> 00:19:36,021
you i'd visual effects and you can
initialize either you I blur effect

351
00:19:36,021 --> 00:19:41,044
or you I vibrancy of fact UN vibrancy
effect actually takes the blur

352
00:19:41,044 --> 00:19:44,080
in its initializer so we know how to
create that vibrancy effect

353
00:19:44,008 --> 00:19:47,039
for the poor you plan to use after that

354
00:19:48,011 --> 00:19:51,088
you can instantiate you add visual
effects view and pass that

355
00:19:51,088 --> 00:19:54,166
visual effect that you've just created
finally

356
00:19:55,066 --> 00:19:58,073
the UN visual effects view provides a
content view

357
00:19:59,036 --> 00:20:03,059
and you should add your sub used to that
content view that way we know what views

358
00:20:03,059 --> 00:20:06,106
you want to have manipulated or affected
by the visual effects

359
00:20:07,006 --> 00:20:11,052
there's a couple things you can do to
customize visual effect use in your

360
00:20:11,052 --> 00:20:11,123
application

361
00:20:12,023 --> 00:20:15,104
the first thing you can do is your
content the blurs

362
00:20:16,004 --> 00:20:19,060
but changing the background color
property on the visual effect he is

363
00:20:19,006 --> 00:20:19,090
content view

364
00:20:20,044 --> 00:20:23,127
so if you would like to create a dark
red blur effect for example

365
00:20:24,027 --> 00:20:28,039
you can make a darker a dark blur and
then set the content his background

366
00:20:28,039 --> 00:20:28,092
color

367
00:20:28,092 --> 00:20:32,135
to a red color to have the desired
effect you can also

368
00:20:33,035 --> 00:20:36,050
do some animations for the frame changes
within your application

369
00:20:36,005 --> 00:20:41,007
to change the position and size of the
blur fact no visual effects

370
00:20:41,052 --> 00:20:44,080
also come with a number of caveats when
you consider using them

371
00:20:44,008 --> 00:20:48,071
in your application the first I've those
is the idea of setting alpha

372
00:20:49,043 --> 00:20:52,056
if you think about the purposes and
blurs an alpha

373
00:20:52,056 --> 00:20:55,120
they're at odds with each other you play
alpha to a view

374
00:20:56,002 --> 00:21:00,009
in order to make on Sat legible behind
another view to see what's back there

375
00:21:00,027 --> 00:21:03,075
you use a blur effect to show that
there's something there but you're not

376
00:21:03,075 --> 00:21:04,121
interested in the details

377
00:21:05,021 --> 00:21:08,089
so it's not really sensible to apply an
alpha

378
00:21:08,089 --> 00:21:12,096
to a blur at the same time and for that
reason we're going to drop the blue if

379
00:21:12,096 --> 00:21:13,131
you try to change the Alpha

380
00:21:14,031 --> 00:21:17,036
you should also be very cautious

381
00:21:17,036 --> 00:21:21,062
about placing visual effect views in a
few hierarchy that uses masks

382
00:21:21,062 --> 00:21:25,128
they're not going to work very well
together you also should be conscious

383
00:21:26,028 --> 00:21:29,049
on whether you're going to if you place
a visual effect the UN group

384
00:21:29,049 --> 00:21:32,092
they can have an impact on its rendering
either animation group

385
00:21:32,092 --> 00:21:35,147
or opacity group it's very easy to have
a

386
00:21:36,047 --> 00:21:39,123
to forget that US air blower or a
vibrancy effect really deep in your view

387
00:21:40,023 --> 00:21:40,088
hierarchy

388
00:21:40,088 --> 00:21:43,093
and then when you add an animation over
here forget that it's going to pick up

389
00:21:44,038 --> 00:21:45,049
that visual affect you

390
00:21:45,049 --> 00:21:49,142
and try to make changes to it so I
started the section by talking about the

391
00:21:50,042 --> 00:21:51,080
rendering pipeline

392
00:21:51,008 --> 00:21:54,062
and I'd like to highlight what impact
visual effect the US have

393
00:21:55,034 --> 00:21:59,056
on the render him your application all
the work for Visual Effects use

394
00:21:59,056 --> 00:22:02,123
is having an impact on the GPL

395
00:22:03,023 --> 00:22:06,052
so if we look at a standard view in your
application it's going to take

396
00:22:06,052 --> 00:22:09,133
a pretty typical amount of time to
render on the GPL

397
00:22:10,033 --> 00:22:13,099
in order to create blur effects we have
to take all those steps that were

398
00:22:13,099 --> 00:22:13,188
outlined

399
00:22:14,088 --> 00:22:17,172
and render those off-screen it's just
the way that we have to create blur

400
00:22:18,072 --> 00:22:18,163
effects

401
00:22:19,063 --> 00:22:22,117
so when asked the Jeep you to stop
rendering your absent mean views

402
00:22:23,017 --> 00:22:26,062
and create this blur effect off-screen
and then combine everything back

403
00:22:26,062 --> 00:22:27,074
together

404
00:22:27,074 --> 00:22:30,138
and that can take considerably more time
than rendering a standard view without

405
00:22:31,038 --> 00:22:32,121
blur effects

406
00:22:33,021 --> 00:22:37,060
vibrancy takes additional passes in
addition to the blur effect the that

407
00:22:37,006 --> 00:22:38,835
they're placed on top of

408
00:22:39,429 --> 00:22:43,310
so to add vibrancy into a view takes
even more of screen time for your

409
00:22:43,031 --> 00:22:44,036
application

410
00:22:44,081 --> 00:22:48,090
now the contrast this with drug you
hierarchy in rapt

411
00:22:48,009 --> 00:22:51,056
we can do that considerably faster
because we don't have to do all those of

412
00:22:52,037 --> 00:22:54,056
screen passes every frame

413
00:22:54,056 --> 00:22:57,113
so this is why we still strongly
encourage the static for techniques from

414
00:22:58,013 --> 00:22:58,111
last year

415
00:22:59,011 --> 00:23:03,088
if at all possible let's take a look at
how we can use Visual Effects use

416
00:23:03,088 --> 00:23:07,149
in that same demo application so going
back to the demo up

417
00:23:08,049 --> 00:23:11,091
I still have these controls the come on
screen and right now they're just being

418
00:23:11,091 --> 00:23:12,130
placed on top of the dimming

419
00:23:13,003 --> 00:23:16,060
view and you can see I have this white
text label at the bottom

420
00:23:16,087 --> 00:23:20,094
that it's not really legible anyway and
it just it doesn't look very interesting

421
00:23:21,057 --> 00:23:24,095
we're going to use we all saw the
control bar at the bottom which is just

422
00:23:24,095 --> 00:23:25,124
solid white right now

423
00:23:26,024 --> 00:23:30,049
I kinda feels out of place on this rich
colorful gradient background

424
00:23:30,049 --> 00:23:34,114
so we're going to use blur effects and
vibrancy effects to improve this

425
00:23:35,014 --> 00:23:38,079
specter my demo application the first
thing we're going to do

426
00:23:38,079 --> 00:23:41,082
is go to the gradient you controller and
we're going to set up the control bar at

427
00:23:42,009 --> 00:23:44,011
the bottom of the screen

428
00:23:44,011 --> 00:23:47,099
the control bar is that white bar at the
bottom with the different controls in it

429
00:23:47,099 --> 00:23:50,180
and we're going to create an extra light
perfect the key things that you should

430
00:23:51,008 --> 00:23:52,059
take a look at here

431
00:23:53,031 --> 00:23:56,078
are the first part where we create a new
UI blur effect

432
00:23:56,078 --> 00:24:02,094
and give it a style in this case were
using extra light perfect style

433
00:24:02,094 --> 00:24:05,162
next we're going to create you a visual
effect feel and pass it the effect that

434
00:24:06,062 --> 00:24:07,121
we just created

435
00:24:07,679 --> 00:24:11,690
that extra light blue fact and then
finally will add this

436
00:24:11,069 --> 00:24:15,102
to our view hierarchy we're also going
to do this

437
00:24:16,002 --> 00:24:20,006
on the click wheel controller I want to
do what the blur background

438
00:24:20,042 --> 00:24:23,049
and a vibrant title here first we're
going to make that blurred background

439
00:24:24,012 --> 00:24:24,096
view

440
00:24:24,096 --> 00:24:27,120
very similar to before we're going to
make a %um blur effect

441
00:24:28,002 --> 00:24:31,014
but given the dark blur effect style and
then

442
00:24:31,032 --> 00:24:35,050
another again create you a visual affect
you and passes that blur effect that we

443
00:24:35,005 --> 00:24:37,043
just created

444
00:24:37,088 --> 00:24:40,176
and then add it to our view hierarchy
the next thing we do

445
00:24:41,076 --> 00:24:44,092
as you want to modify that title able to
use vibrancy

446
00:24:44,092 --> 00:24:48,155
you can see right now in creating my
label and just giving it a white color

447
00:24:49,055 --> 00:24:52,110
it's pretty straightforward to upgrade
that to use vibrancy

448
00:24:53,001 --> 00:24:56,080
to do that we're going to make a
vibrancy effect on you notice the

449
00:24:56,179 --> 00:24:56,960
initializer

450
00:24:56,096 --> 00:25:00,097
is affect for blur effect

451
00:25:01,006 --> 00:25:04,078
we're going to grab a reference to the
bar affect often that backdrop you that

452
00:25:04,078 --> 00:25:05,144
we created right up here

453
00:25:06,044 --> 00:25:09,110
and pass it into the vibrancy effect
because we plan to composite this title

454
00:25:10,001 --> 00:25:10,063
label

455
00:25:10,072 --> 00:25:14,155
on top of that background blur same as
before will make an EU official affect

456
00:25:15,055 --> 00:25:15,104
you

457
00:25:16,004 --> 00:25:19,048
and give the vibrancy effects that we
just created and then down for the

458
00:25:19,048 --> 00:25:19,140
bottom

459
00:25:20,004 --> 00:25:23,008
we're going to at my title label to the
content deal

460
00:25:23,008 --> 00:25:26,106
about I'll up that new vibrancy effect
feel

461
00:25:27,078 --> 00:25:30,145
so those are the three steps I need to
take to add blurs and vibrancy

462
00:25:31,045 --> 00:25:35,052
to the demo application let's take a
look at what those look like

463
00:25:35,052 --> 00:25:38,150
immediately see that we're picking up
that blur effect that extra labor affect

464
00:25:39,005 --> 00:25:41,038
at the control bar at the bottom of the
screen

465
00:25:41,083 --> 00:25:44,119
it's reflecting the purple color of the
gradient behind it

466
00:25:45,019 --> 00:25:48,113
we bring our controls on screen you can
see that we're blurring that gradient

467
00:25:49,013 --> 00:25:52,042
as well as picking a vibrancy for that
text label at the bottom you can see the

468
00:25:52,042 --> 00:25:53,138
purple in the white from reviews behind
it

469
00:25:54,038 --> 00:25:57,337
taking place now you're probably
thinking well that's great Brandon but

470
00:25:57,679 --> 00:26:00,760
you probably just picking with that live
player that static Worthing

471
00:26:00,076 --> 00:26:03,078
I promise you we're not because I start
school in this

472
00:26:03,096 --> 00:26:06,117
you can see the blur effects are all
taking place in real time and you can

473
00:26:07,017 --> 00:26:07,526
see more

474
00:26:07,679 --> 00:26:11,640
that the vibrancy is also picking up all
those really cool colors

475
00:26:11,064 --> 00:26:15,133
behind everything and you also see that
control bar picking up those colors

476
00:26:16,033 --> 00:26:19,058
behind itself as well if that easy to
add

477
00:26:19,058 --> 00:26:26,058
vibrancy and blur to your application

478
00:26:31,219 --> 00:26:31,303
so moving on

479
00:26:32,059 --> 00:26:35,059
next we're going to talk about CA
shapewear

480
00:26:35,059 --> 00:26:38,153
sachet player is a really powerful tool

481
00:26:38,999 --> 00:26:42,001
for drying custom busy and pouts within
your application

482
00:26:42,019 --> 00:26:45,043
CA shapewear as the name suggests

483
00:26:45,259 --> 00:26:49,261
is a subclass a CA lair which makes it
very very easy to use

484
00:26:49,459 --> 00:26:52,523
in all your apps existing hugh
hierarchies because on iowa's

485
00:26:53,099 --> 00:26:57,190
all your views are already backed with
the layers the other really powerful

486
00:26:58,009 --> 00:26:58,061
part

487
00:26:58,529 --> 00:27:01,591
RCA shapewear is that all of the
properties on it the control its

488
00:27:02,149 --> 00:27:02,211
appearance

489
00:27:02,769 --> 00:27:06,788
are an available so where my users to us
shapewear

490
00:27:06,959 --> 00:27:09,964
one place is if you were going to create
download control

491
00:27:10,459 --> 00:27:13,527
similar to the one that you see in the
music app orbit different store aP's

492
00:27:14,139 --> 00:27:17,184
the thing to have a few different states
one that shows

493
00:27:17,589 --> 00:27:20,631
thinking state where there's a ring
that's partially completed that spinning

494
00:27:21,009 --> 00:27:25,440
it shows a state with a stop and it also
shows the download progress right

495
00:27:25,044 --> 00:27:26,113
completes the ring

496
00:27:26,509 --> 00:27:30,543
going from zero two hundred percent this
would be a great thing to draw

497
00:27:30,849 --> 00:27:34,872
with CS a player in your application I
like to show you a few of the more

498
00:27:35,079 --> 00:27:37,093
interesting properties on shape layers
right now

499
00:27:37,219 --> 00:27:40,288
the most important one is the path
property

500
00:27:40,909 --> 00:27:45,440
as the name suggests this defines what
your shape layers actually going to look

501
00:27:45,044 --> 00:27:45,633
like

502
00:27:46,029 --> 00:27:49,111
you create these bike handing us a CG
path

503
00:27:49,849 --> 00:27:53,904
rap personally I like to work with you
are busy a path and then hand of the CG

504
00:27:54,399 --> 00:27:54,437
path

505
00:27:54,779 --> 00:27:58,798
version of that at the end so there's a
few steps we're going to take

506
00:27:58,969 --> 00:28:02,974
to create the curve that you see on
screen even think about creating pads

507
00:28:03,019 --> 00:28:06,071
very similar to drawing on a piece of
paper remove your pencil to appoint

508
00:28:06,539 --> 00:28:09,596
and the move the pencil on the paper to
draw lines

509
00:28:10,109 --> 00:28:14,140
the first thing we're going to do is
moved to a specific point where we want

510
00:28:14,419 --> 00:28:14,513
to start the line

511
00:28:15,359 --> 00:28:18,359
in this case Roy start on the lower left
hand corner

512
00:28:18,359 --> 00:28:21,375
the next thing we'll deal is add

513
00:28:21,519 --> 00:28:25,543
two curves to the point and you notice
we pass this a pair of control points

514
00:28:25,759 --> 00:28:29,841
busier paths are defined by a point and
then a pair of control handles

515
00:28:30,579 --> 00:28:33,638
which is seen blue on the diagram above
those control points

516
00:28:34,169 --> 00:28:37,169
define what the curve looks like between
the first

517
00:28:37,169 --> 00:28:41,171
the previous and the current point so
we're going to add two curves

518
00:28:41,369 --> 00:28:45,710
with their control points to my path and
then finally set that path on my

519
00:28:45,071 --> 00:28:45,132
shapewear

520
00:28:46,032 --> 00:28:49,044
the next set of properties

521
00:28:49,044 --> 00:28:53,433
control how what the line looks like and
there's a few particularly interesting

522
00:28:53,829 --> 00:28:53,896
properties

523
00:28:54,499 --> 00:28:57,940
on the line the first is the line cap
property

524
00:28:57,094 --> 00:29:01,753
this defines what the enzyme each line
look like by the voltage to flatline

525
00:29:02,599 --> 00:29:05,940
in this case we're going to sit around
line cap on them to give them a nice

526
00:29:05,094 --> 00:29:06,083
rounded effect

527
00:29:06,929 --> 00:29:09,940
the line dash pattern defines

528
00:29:10,039 --> 00:29:13,047
how we draw dashed lines and gives you a
lot of control over what that looks like

529
00:29:13,839 --> 00:29:16,908
he create a line dash pattern by giving
us an array

530
00:29:17,529 --> 00:29:21,594
Amanda numbers and we go through this
array to decide how many points to draw

531
00:29:22,179 --> 00:29:25,240
and then how many points to not drop so
in this example

532
00:29:25,789 --> 00:29:28,792
were asking the CSA player to draw for
two points

533
00:29:29,089 --> 00:29:32,102
and then not draw for four points draw
for six

534
00:29:32,219 --> 00:29:35,262
and then not draw for the final six and
then repeat that pattern

535
00:29:35,649 --> 00:29:38,665
across the link to the line wind dash

536
00:29:38,809 --> 00:29:42,863
phase is used to control how far into
that array we start the blind dry

537
00:29:43,349 --> 00:29:47,350
so I something aligned us there is a for
essentially ships that dash

538
00:29:47,359 --> 00:29:51,397
pattern four points along line the next
set of properties

539
00:29:51,739 --> 00:29:54,740
relate to the stroke up the line which
is what we actually draw

540
00:29:54,839 --> 00:29:57,858
like those obvious one it's called
stroke color

541
00:29:58,029 --> 00:30:01,063
and as you would expect it defines the
color line

542
00:30:01,369 --> 00:30:04,415
pretty straightforward to use the help
the next two are a little bit more

543
00:30:04,829 --> 00:30:04,912
interesting

544
00:30:05,659 --> 00:30:08,960
and that's the stroke again and stroke
and properties

545
00:30:08,096 --> 00:30:11,855
stroke again defines how far into the
line

546
00:30:12,719 --> 00:30:16,700
we're going to begin stroking it are
drying it in the video above

547
00:30:16,007 --> 00:30:19,426
I'm actually drawing the original path
in a dark red behind that

548
00:30:20,119 --> 00:30:23,121
so you can see the difference between
the actual what the code is doing

549
00:30:23,139 --> 00:30:27,181
so I setting are struggling and 2.2
we're going to skip drawing the first 20

550
00:30:27,559 --> 00:30:27,645
percent on the line

551
00:30:28,419 --> 00:30:31,433
stroke and is very similar

552
00:30:31,559 --> 00:30:34,633
but defines how far from the end we're
going to draw that perhaps so I think

553
00:30:35,299 --> 00:30:36,303
it's points6

554
00:30:36,339 --> 00:30:39,433
we're going to not draw the final 60
percent in the past you can imagine this

555
00:30:40,279 --> 00:30:41,283
particular property

556
00:30:41,679 --> 00:30:44,752
we very powerful if you are creating a
download control

557
00:30:45,409 --> 00:30:48,433
because you could take that download
progress from 0 to 100 percent

558
00:30:48,649 --> 00:30:51,651
and directly map that onto the stroke
and property

559
00:30:51,669 --> 00:30:54,680
on CA shapewear which is again animated

560
00:30:54,779 --> 00:30:58,805
so the shapers automatically going to
end in a between states for you

561
00:30:59,039 --> 00:31:02,041
the final property that you'll probably
find useful in some cases

562
00:31:02,239 --> 00:31:05,440
is the fill color you always want to add
still color

563
00:31:05,044 --> 00:31:09,233
it doesn't always look awesome but it's
a very powerful thing to have you want

564
00:31:09,629 --> 00:31:11,638
more of a close-packed

565
00:31:12,529 --> 00:31:15,537
shape layers also could have a big
impact on the rendering performance in

566
00:31:16,329 --> 00:31:17,330
your application

567
00:31:17,429 --> 00:31:20,460
so let's go back to that rendering
pipeline one more time

568
00:31:20,739 --> 00:31:24,791
in this case shape layers have an impact
on all the rendering that occurs within

569
00:31:25,259 --> 00:31:26,940
your application itself

570
00:31:26,094 --> 00:31:30,623
and as a few things that we wanna talk
about when you're entering shape layers

571
00:31:31,469 --> 00:31:34,496
when you have a shapewear we have to
rest rise the shapewear

572
00:31:34,739 --> 00:31:37,807
on the CPU within your application what
that means

573
00:31:38,419 --> 00:31:41,468
is what we're doing all your view
drawing we're going to actually have to

574
00:31:41,909 --> 00:31:43,911
ask the shapewear to compute itself

575
00:31:43,929 --> 00:31:47,985
and then draw into essentially image
that we can composite later

576
00:31:48,489 --> 00:31:50,574
we're going to some that restaurants
lehrer over to the render server for

577
00:31:51,339 --> 00:31:52,382
later compositing

578
00:31:52,769 --> 00:31:55,846
and this process can get very expensive
in terms of CPU time

579
00:31:56,539 --> 00:32:00,562
especially if you have a very complex
path for shapewear

580
00:32:00,769 --> 00:32:03,823
the more complex it is the longer it's
going to take us to draw

581
00:32:04,309 --> 00:32:08,352
and prepare that shapewear so one thing
you can do to minimize that affect

582
00:32:08,739 --> 00:32:11,753
is using use more layers with less
complexity

583
00:32:11,879 --> 00:32:13,963
and then stack them behind each other to
get the same effect that you're asking

584
00:32:14,719 --> 00:32:15,747
for

585
00:32:15,999 --> 00:32:19,008
for example with that download control
that showing the downloads a

586
00:32:19,899 --> 00:32:23,700
you might want to draw the square is
once a player the outer ring as a second

587
00:32:23,007 --> 00:32:23,081
shape layer

588
00:32:24,044 --> 00:32:27,573
and ensure the download progress as a
third shapewear and then composite the

589
00:32:27,969 --> 00:32:29,975
three of them together by just stacking
them in the same place

590
00:32:30,569 --> 00:32:33,645
in your view hierarchy you should also
be very conscious

591
00:32:34,329 --> 00:32:37,408
a frequent changes to shape layers
within your application

592
00:32:38,119 --> 00:32:41,164
everytime shapewear changes we have to
redress to rise at

593
00:32:41,569 --> 00:32:44,647
and send that new result over to the
render server so if your shape layers

594
00:32:45,349 --> 00:32:46,381
changing every frame

595
00:32:46,669 --> 00:32:49,716
were constantly having to read ride and
hand this new object of

596
00:32:50,139 --> 00:32:55,201
which can get very expensive have a
negative impact on Europe's performance

597
00:32:55,759 --> 00:32:57,768
I actually have a shape layer hidden in
the demo application that we've been

598
00:32:58,659 --> 00:32:59,661
taking a look at

599
00:32:59,859 --> 00:33:02,860
so I'd like to show you how that's
implemented and then we'll make a couple

600
00:33:02,869 --> 00:33:07,890
quick changes to the appearance of my
shapewear

601
00:33:08,079 --> 00:33:11,131
so first let's see where that

602
00:33:11,599 --> 00:33:13,692
we look in the demo application you
probably noticed this to controls that I

603
00:33:14,529 --> 00:33:15,563
haven't touched yet

604
00:33:15,869 --> 00:33:18,894
and those affect the line and and the
dash size

605
00:33:19,119 --> 00:33:22,183
suffering the stroke and all the way up
to 100 percent and you see I suddenly

606
00:33:22,759 --> 00:33:23,710
get this nice

607
00:33:23,071 --> 00:33:27,030
red box its the world's most interesting
shapewear

608
00:33:27,669 --> 00:33:31,708
I also have a deaf size property the
controls the link to the dashers

609
00:33:32,059 --> 00:33:36,200
in that a red suffering I def size up
we're creating a dashed line effect

610
00:33:36,002 --> 00:33:37,351
instead

611
00:33:37,549 --> 00:33:41,554
every bring the stroke and back down to
something else like sixty-eight percent

612
00:33:41,599 --> 00:33:44,653
you can see we're only drawing the first
sixty-eight percent of the line

613
00:33:45,139 --> 00:33:48,710
by say players line starts in the upper
left corner and then progresses around

614
00:33:48,071 --> 00:33:49,980
the box from that

615
00:33:50,619 --> 00:33:52,628
let's take a look at how this is
implemented in code and make a couple

616
00:33:53,519 --> 00:33:54,573
quick changes to it

617
00:33:55,059 --> 00:33:58,067
what I've done is that created a custom
you love you subclass

618
00:33:58,859 --> 00:34:01,921
I'm calling shape feel and my shape feel

619
00:34:02,479 --> 00:34:05,522
like all news and I West is backed with
a CA layer

620
00:34:05,909 --> 00:34:09,008
we give you the ability to actually
override what kind of player

621
00:34:09,899 --> 00:34:12,960
your view is backed with by implementing
the layer class method

622
00:34:13,509 --> 00:34:18,750
and I've asked my view to be backed with
the CA shapewear instep

623
00:34:18,075 --> 00:34:21,144
in my week from the I'm going to do some
configuration work to create that

624
00:34:21,819 --> 00:34:23,220
shapewear

625
00:34:23,022 --> 00:34:26,097
the first then we'll deal is create a CG
path raff and trade with the rectangle

626
00:34:26,097 --> 00:34:27,194
that represents my views balance

627
00:34:28,094 --> 00:34:32,753
that's how we're creating that nice
simple square shapewear

628
00:34:33,599 --> 00:34:37,600
we set the path and then spent some time
configuring a few the properties of my

629
00:34:37,609 --> 00:34:38,770
shapewear

630
00:34:38,077 --> 00:34:41,716
the stroke color again is what defines
the color we use to draw the outside on

631
00:34:42,409 --> 00:34:43,250
the pathway

632
00:34:43,025 --> 00:34:46,694
in this case a red color we're sending
our line with 26

633
00:34:46,919 --> 00:34:50,230
to make a nice invisible on top in the
background ahead

634
00:34:50,023 --> 00:34:55,202
the stroke and started 0 Sat Nav you
would see the shapewear in advance

635
00:34:55,409 --> 00:34:59,425
I also have the line joining wine join
defines what the corners on those lines

636
00:34:59,569 --> 00:35:00,577
look like when they come together

637
00:35:01,369 --> 00:35:05,417
and were defaulting that to around join
we're also saying the line cap

638
00:35:05,849 --> 00:35:09,250
which is again what controls the edges
in each line and making those round as

639
00:35:09,025 --> 00:35:09,894
well

640
00:35:10,119 --> 00:35:13,910
and finally I'm not using it tho color
for my shapewear

641
00:35:13,091 --> 00:35:16,440
down here at the bottom I have two
methods that are used to configure

642
00:35:17,259 --> 00:35:17,336
properties

643
00:35:18,029 --> 00:35:22,380
based on those controls that you see on
screen one controls the stroke and

644
00:35:22,038 --> 00:35:26,042
the other setting that lined Ashley
right now what I'm doing is making an

645
00:35:26,042 --> 00:35:26,121
array

646
00:35:27,021 --> 00:35:30,065
that creates to Ennis numbers that use
the same value for both

647
00:35:30,065 --> 00:35:33,474
the this is to draw and the distance not
to drop

648
00:35:34,059 --> 00:35:37,138
we're going to make a change to that
first I've decided that

649
00:35:37,849 --> 00:35:42,230
the dash is just got too close to each
other so instead what we're going to do

650
00:35:42,023 --> 00:35:45,040
is first is the same in this number to
draw for a distance

651
00:35:45,004 --> 00:35:48,055
and then we're going to multiply that by
four to have a much larger gap between

652
00:35:48,091 --> 00:35:50,420
our daschle's

653
00:35:51,239 --> 00:35:55,500
I'm also going to make a quick change
two-line join up my shapewear

654
00:35:55,005 --> 00:35:59,554
and switch over to a bevel angina let's
take a look at those changes in the demo

655
00:36:00,049 --> 00:36:01,910
application now

656
00:36:01,091 --> 00:36:03,164
so again we're gonna bring that stroke
and all the way up first to see the

657
00:36:04,064 --> 00:36:05,433
changes we've made

658
00:36:06,009 --> 00:36:09,980
and the first thing you see is the
change that we made to the line joining

659
00:36:09,098 --> 00:36:12,098
if you take a look at the corners of my
boxers instead of having then I

660
00:36:12,098 --> 00:36:13,177
surrounded the fact

661
00:36:14,059 --> 00:36:18,066
they've just nice like diamond-cut champ
from the edge that looks fantastic

662
00:36:18,759 --> 00:36:22,250
we're also going to take a look at those
deaf size changes we made sold out that

663
00:36:22,025 --> 00:36:22,894
up a bit

664
00:36:23,119 --> 00:36:26,390
and you see a dramatic difference in
what we had before we're drawing a very

665
00:36:26,039 --> 00:36:27,040
short dash

666
00:36:27,004 --> 00:36:30,343
followed by a much longer gap

667
00:36:30,739 --> 00:36:33,798
and again just illustrate those changes
let style some these effects back

668
00:36:34,329 --> 00:36:38,426
and you can again see the difference
this makes are shapewear

669
00:36:39,299 --> 00:36:43,230
now you might have noticed in code that
I have a tap gesture recognizer setup

670
00:36:43,023 --> 00:36:47,662
on my shapewear let's take a look at
what that's doing

671
00:36:47,869 --> 00:36:50,960
every time a tap on my shape layer I'm
picking a random

672
00:36:50,096 --> 00:36:53,695
alpha value to animate to and changing
the opacity of my view

673
00:36:54,559 --> 00:36:57,560
and at the same player itself

674
00:36:57,569 --> 00:36:59,636
it's an interesting effect but it's
kinda boring and I'd like to do

675
00:37:00,239 --> 00:37:02,880
something a little more interesting from
a user's

676
00:37:02,088 --> 00:37:04,169
and to do that we're going to take a
look at how we can create dynamic

677
00:37:05,069 --> 00:37:05,148
behaviors

678
00:37:06,048 --> 00:37:10,397
with poor animation as you're probably
aware

679
00:37:10,829 --> 00:37:14,230
you like it and %um you provide a lot of
interesting innovations

680
00:37:14,023 --> 00:37:17,092
for your application and you have a lot
of control over how these animations

681
00:37:17,299 --> 00:37:17,370
look

682
00:37:18,009 --> 00:37:23,037
and behave core animation provides
implicit animations on your layers

683
00:37:23,289 --> 00:37:26,680
nearly every property that you would
change on a layer will be implicitly

684
00:37:26,068 --> 00:37:27,165
animated bike or animation

685
00:37:28,065 --> 00:37:31,150
that means you set the property and CA
will just provide an animation from the

686
00:37:32,005 --> 00:37:33,093
current value to the new value for you

687
00:37:34,038 --> 00:37:37,064
automatically what you might not be
aware of

688
00:37:37,064 --> 00:37:41,043
US a developer have the ability to
override the implicit behaviors that

689
00:37:41,619 --> 00:37:44,410
core animation provides to you

690
00:37:44,041 --> 00:37:47,660
and you might be thinking that's nice
what what I want to do with that

691
00:37:48,029 --> 00:37:51,038
one thing you can do is you can just
disable the implicit animations

692
00:37:51,119 --> 00:37:54,162
even to say I you know I don't I don't
want any other nations thanks anyway

693
00:37:54,549 --> 00:37:59,552
don't do anything at all and that's fine
you can also use the steak capability

694
00:37:59,579 --> 00:38:04,430
to change the behavior of the default
animations the coronation provides

695
00:38:04,043 --> 00:38:07,432
for example you might want to have your
your lair or your view

696
00:38:07,819 --> 00:38:11,460
show different color while the opacity
animation takes place

697
00:38:11,046 --> 00:38:14,165
you also might decide that you're
implementing OS 10 we'd and you won't

698
00:38:14,579 --> 00:38:15,630
have that path

699
00:38:15,063 --> 00:38:18,150
be less than linear as it moves from
point A to point B

700
00:38:19,005 --> 00:38:22,050
if you're to create a new CA lehrer
subclass you can also add your own

701
00:38:22,095 --> 00:38:22,884
properties

702
00:38:23,739 --> 00:38:26,920
and they can enable with this technique

703
00:38:26,092 --> 00:38:30,121
the key part of this is that we can use
this technique to define behaviors

704
00:38:31,021 --> 00:38:34,370
that are inherent to custom views within
your application

705
00:38:34,559 --> 00:38:37,720
this encapsulates any custom animation
behaviors you'd like

706
00:38:37,072 --> 00:38:41,077
and bakes them into the view itself so
if you want to reuse this view

707
00:38:41,077 --> 00:38:44,086
elsewhere in your app or in a framework

708
00:38:44,779 --> 00:38:48,834
it just comes along as part of the view
how these work

709
00:38:49,329 --> 00:38:52,670
in this case I have my view which like
all views and I owe us

710
00:38:52,067 --> 00:38:55,071
is backed with the CA late

711
00:38:55,071 --> 00:38:59,093
CA layers have a seattle Mayor Daley a
protocol the all the views implement

712
00:38:59,093 --> 00:39:03,282
and your view is always the what the
delegates for its layer

713
00:39:04,119 --> 00:39:07,690
so it's a my application I want to
animate the Alpha

714
00:39:07,069 --> 00:39:10,488
I'm calling you have %um it with
duration and setting the Alpha on my

715
00:39:11,109 --> 00:39:11,720
view

716
00:39:11,072 --> 00:39:17,120
20.2 let's take a look at the steps that
take place when we request this

717
00:39:18,002 --> 00:39:22,002
you see a layer is going to ask its
delegates action for layer

718
00:39:22,002 --> 00:39:25,097
for key and that's going to be called on
my custom view

719
00:39:26,015 --> 00:39:30,214
if you haven't implemented this it will
automatically go to the superclass

720
00:39:30,349 --> 00:39:33,371
if you have implemented it you have a
couple options

721
00:39:33,569 --> 00:39:37,270
the first thing you can do is called
back to your super class and just say

722
00:39:37,027 --> 00:39:40,066
action for layer key and pass the same
result back on

723
00:39:40,066 --> 00:39:43,114
to Coronation if you decide that you
would like to have a little bit more

724
00:39:44,014 --> 00:39:46,043
control over the animation

725
00:39:46,043 --> 00:39:49,069
instead you can create

726
00:39:49,069 --> 00:39:52,163
a new action result and pass that back

727
00:39:53,063 --> 00:39:56,068
you create objects that conform to the
CA action protocol

728
00:39:56,068 --> 00:40:00,737
and hand that new action object back to
Coronation

729
00:40:01,349 --> 00:40:04,370
the CA action protocol defines a single
method

730
00:40:04,559 --> 00:40:07,625
run action for key object arguments

731
00:40:08,219 --> 00:40:11,980
and you can implement the CA action
protocol on any object

732
00:40:11,098 --> 00:40:15,107
typically want to just make this on and
as object a very nice lightweight object

733
00:40:15,989 --> 00:40:18,025
to pass back to core animation

734
00:40:18,349 --> 00:40:22,450
you can do whatever you would like in
the implementation abroad action for key

735
00:40:22,045 --> 00:40:25,091
typically you're going to want to
actually run some animations there

736
00:40:25,091 --> 00:40:29,010
but you might decide you'd like to do
something else fires and notifications

737
00:40:29,829 --> 00:40:32,857
starter cancel timers keep out or
something

738
00:40:33,109 --> 00:40:36,680
whatever your minds come up with you can
do whatever you like and run action for

739
00:40:36,068 --> 00:40:37,095
key

740
00:40:37,095 --> 00:40:40,146
this two arguments in here there
particularly interesting

741
00:40:41,046 --> 00:40:44,575
the first is the key this specifies what
property

742
00:40:44,989 --> 00:40:49,045
just changed on the CA l'air that you're
being asked to interact with

743
00:40:49,549 --> 00:40:53,630
the second is the object argument this
is providing a reference

744
00:40:53,063 --> 00:40:56,140
to the CA lair that's being animated
right now for having values change i

745
00:40:57,004 --> 00:40:58,009
right now

746
00:40:58,045 --> 00:41:01,624
and this is how you have access to the
new values that have been set

747
00:41:02,029 --> 00:41:05,055
as well as how you can apply these
changes to the lair that you've been

748
00:41:05,289 --> 00:41:06,346
manipulated

749
00:41:06,859 --> 00:41:10,390
it's hard to talk about this and slides
so on said let's take a look at it back

750
00:41:10,039 --> 00:41:12,488
in the demo application

751
00:41:12,839 --> 00:41:15,880
we're going to go back to my shape you
class

752
00:41:15,088 --> 00:41:18,967
have decided I'd like to add some
custombehavior for when the opacity

753
00:41:19,759 --> 00:41:20,786
changes on my lair

754
00:41:21,029 --> 00:41:24,480
and on my view the first thing you need
to do

755
00:41:24,048 --> 00:41:28,927
is create a new object that conforms to
the CA action protocol

756
00:41:29,359 --> 00:41:32,405
to do that I've defines and opacity
action object

757
00:41:32,819 --> 00:41:35,827
and it has a single method and its
implementation run action for key

758
00:41:36,619 --> 00:41:41,960
object arguments let's take a look at
some other steps we're making here

759
00:41:41,096 --> 00:41:44,101
the first they were going to do is
checked what the events is that's being

760
00:41:45,046 --> 00:41:46,435
asked for this animation

761
00:41:46,849 --> 00:41:50,871
are for this action and we're only
interested into doing things here

762
00:41:51,069 --> 00:41:55,086
if the layer's opacity was asked to
change

763
00:41:55,239 --> 00:41:58,293
and we give myself a nice pointer to the
CIA later that was passed in

764
00:41:58,779 --> 00:42:01,862
and define a duration to use for all of
my animations

765
00:42:02,609 --> 00:42:06,890
I'm going to create three see a basic
animations from application

766
00:42:06,089 --> 00:42:09,168
that take place when is a pass the
change occurs what I've decided I'd like

767
00:42:10,068 --> 00:42:10,145
to do

768
00:42:11,045 --> 00:42:16,067
is have the background color of my layer
change as the opacity and needs as well

769
00:42:16,067 --> 00:42:20,118
and we really do that with these few
steps

770
00:42:21,018 --> 00:42:24,069
now the things I'd like you to notice is
first the from value

771
00:42:24,069 --> 00:42:27,188
coronation needs to know what to start
an animation with and what

772
00:42:27,809 --> 00:42:32,520
ended with the from value is a finding
the beginning at that

773
00:42:32,052 --> 00:42:35,151
now my lair already has the new value
set on it

774
00:42:35,619 --> 00:42:38,680
when my action object is call

775
00:42:38,068 --> 00:42:41,140
which means I need to know what it looks
like on screen and layers provide

776
00:42:42,004 --> 00:42:45,843
what they call a presentation layer the
presentation layer

777
00:42:46,239 --> 00:42:50,020
is a representation what the lehrer
looks like on-screen to the user

778
00:42:50,002 --> 00:42:54,041
at that instant in time some asking my
presentation layer for its current

779
00:42:54,059 --> 00:42:55,140
background color

780
00:42:55,014 --> 00:42:58,093
to be the starting point in this
animation my to value

781
00:42:58,093 --> 00:43:01,422
is the new value that we're requesting
and what I'm doing here

782
00:43:02,259 --> 00:43:05,318
is animating changes to the hue value
and leaving the saturation and

783
00:43:05,849 --> 00:43:06,888
brightness alone

784
00:43:07,239 --> 00:43:10,440
if you're not familiar with Q saturation
and brightness even think about the

785
00:43:10,044 --> 00:43:10,973
color wheel

786
00:43:11,369 --> 00:43:14,385
where the hughes defining what point
along that circle

787
00:43:14,529 --> 00:43:18,190
what color using so we're taking a pass
the value

788
00:43:18,019 --> 00:43:22,041
and use that to define by Hugh I'm also
going to make the same animation to the

789
00:43:22,041 --> 00:43:23,127
stroke color is mild shapewear

790
00:43:24,027 --> 00:43:27,123
but this time we're going to use some
modifications to the value that we're

791
00:43:28,023 --> 00:43:29,572
setting on the hill

792
00:43:29,779 --> 00:43:33,920
and then finally I do in fact want to
end with the opacity myself

793
00:43:33,092 --> 00:43:36,541
and since I'm overriding the action I
have to provide my own

794
00:43:37,369 --> 00:43:40,520
a pass the animation as well saw set
that's

795
00:43:40,052 --> 00:43:43,311
using the same presentation layer and
the two value

796
00:43:43,779 --> 00:43:46,848
and that's all there is to making a new
action object now I need to make sure

797
00:43:47,469 --> 00:43:50,250
that my action object is actually going
to get call

798
00:43:50,025 --> 00:43:54,324
we're going to do that within my layers
to implement air my views implementation

799
00:43:54,549 --> 00:43:56,577
itself

800
00:43:56,829 --> 00:43:59,928
so I view is going to implement action
for lehrer for key this is that CA lair

801
00:44:00,819 --> 00:44:01,897
delegate method

802
00:44:02,599 --> 00:44:06,626
it's pretty straightforward I will check
if I'm being requested to make provide

803
00:44:06,869 --> 00:44:08,270
an action for the opacity

804
00:44:08,027 --> 00:44:12,996
value if I do I L again that a new
instance half mile past the action

805
00:44:13,239 --> 00:44:16,287
and head back to Coronation in all other
cases

806
00:44:16,719 --> 00:44:19,783
I'm Way call through to my super class
and allow the default behaviors

807
00:44:20,359 --> 00:44:23,380
to be returned and those are the steps
we need to take

808
00:44:23,569 --> 00:44:26,750
to provide a custom CA action within
your application

809
00:44:26,075 --> 00:44:29,874
let's see what effect that has on our
box

810
00:44:30,549 --> 00:44:33,554
sore back in the demo app again I'm
gonna bring that box all the way up to

811
00:44:33,599 --> 00:44:34,680
full visibility

812
00:44:34,068 --> 00:44:37,397
and to make sure that it's you're really
gonna stand out will bring some more

813
00:44:38,009 --> 00:44:39,650
colors into things as well

814
00:44:39,065 --> 00:44:42,138
actually I like it with los colores so
that

815
00:44:43,038 --> 00:44:47,046
preloved SI's on just for fun not
remember the way this is configured

816
00:44:48,018 --> 00:44:51,113
is I'm going to tap on the box which
will pick a random opacity value

817
00:44:52,013 --> 00:44:56,019
and animate to that over the newly
defined point seven five second duration

818
00:44:56,073 --> 00:44:59,892
whenever we get that you'll pass a value
we're also going to animate the hue up

819
00:45:00,549 --> 00:45:01,920
the background color

820
00:45:01,092 --> 00:45:06,121
and the stroke see can see every time I
step on that

821
00:45:06,949 --> 00:45:09,991
we're getting a very interesting set of
color combinations

822
00:45:10,369 --> 00:45:13,418
and we're also still making changes to
the background very interesting and

823
00:45:13,859 --> 00:45:14,868
their unique effects

824
00:45:14,949 --> 00:45:18,954
we can see the opacity better this way
the opacity is changing

825
00:45:19,449 --> 00:45:23,501
alongside the hue for the backgrounds
and the stroke colors

826
00:45:23,969 --> 00:45:27,052
and the really powerful part of the way
I built this is all these behaviors are

827
00:45:27,799 --> 00:45:29,270
inherently part

828
00:45:29,027 --> 00:45:32,376
my custom view so anytime I use that
view

829
00:45:32,619 --> 00:45:36,000
I can add it to my view hierarchy
anywhere in the apt and I don't have to

830
00:45:36,000 --> 00:45:37,009
remember to and they all three
properties

831
00:45:37,009 --> 00:45:40,073
I just set the Alpha at automatically
gets all the new behaviors

832
00:45:41,054 --> 00:45:48,054
that I've requested a really powerful
capability

833
00:45:54,015 --> 00:45:55,099
so to summarize what we've talked about
today

834
00:45:55,099 --> 00:45:58,190
we presented for new techniques the
first is how you can use fring

835
00:45:59,009 --> 00:45:59,085
animations

836
00:46:00,066 --> 00:46:04,084
in your application think about spring
animations as a new timing curve for

837
00:46:04,084 --> 00:46:05,150
animations within your application

838
00:46:06,005 --> 00:46:10,006
the make them fit in better with the
rest the platform and feel more dynamic

839
00:46:10,006 --> 00:46:13,073
engaging for users UN official affect
you

840
00:46:14,027 --> 00:46:17,122
is a great new API energy since I was 8
the light to create live

841
00:46:18,022 --> 00:46:21,108
blur effects as well as vibrancy to keep
content highly legible

842
00:46:22,008 --> 00:46:27,015
on top of blurs say shapewear allows you
to define custom busy a pass

843
00:46:27,015 --> 00:46:30,099
and running within your application and
enemy changes to those properties

844
00:46:30,099 --> 00:46:34,140
and we talk about how do you see a
action to get more dynamic behaviors

845
00:46:35,004 --> 00:46:39,005
out of core animation if you'd like to
learn more about these technologies

846
00:46:39,041 --> 00:46:42,054
there's some great documentation are for
you like it

847
00:46:42,054 --> 00:46:46,103
and for coronation you can also talk to
Jake he's %ah wraps framework evangelist

848
00:46:47,003 --> 00:46:50,085
his great shoes and he loves getting
email from olive you there's some

849
00:46:50,085 --> 00:46:51,103
fantastic news that

850
00:46:52,003 --> 00:46:55,027
sessions going on this week the talk
about more these type

851
00:46:55,027 --> 00:46:59,065
topics we've covered many that happened
yesterday as can be a fantastic session

852
00:46:59,065 --> 00:47:00,153
on Friday at 11:30 in Presidio

853
00:47:01,053 --> 00:47:04,070
I really encourage you to check out
thanks for coming I hope you enjoy the

854
00:47:04,007 --> 00:47:04,069
rest your time

855
00:47:05,032 --> 00:47:05,093
have you ever this is