en/subtitles/8. Animation.srt

﻿1
00:00:00,401 --> 00:00:04,536
[MUSIC]                         

2
00:00:04,605 --> 00:00:09,208
Standford University.           
>> Okay, well,                  

3
00:00:09,276 --> 00:00:14,846
welcome to lecture number 8,    
CS193P, Fall of 2017. Today     

4
00:00:14,915 --> 00:00:18,183
it's all about animation, just  
going to continue a little bit  

5
00:00:18,251 --> 00:00:20,819
of what we talked about Last    
time. There's three kinds of    

6
00:00:20,888 --> 00:00:22,087
information I'm gonna           
talk about today.               

7
00:00:22,156 --> 00:00:25,924
The first is                    
UIView Property Animation. And  

8
00:00:25,992 --> 00:00:27,492
it's exactly what               
it sounds like.                 

9
00:00:27,561 --> 00:00:31,462
You can animate these yellow    
properties on your view.        

10
00:00:31,531 --> 00:00:34,066
This really the only things     
you can animate using this      

11
00:00:34,135 --> 00:00:37,569
UIView Property Animation       
mechanism. But                  

12
00:00:37,637 --> 00:00:39,370
it's pretty powerfu.            
You've got the frame and        

13
00:00:39,439 --> 00:00:42,441
center that animating the       
position of the view. You've    

14
00:00:42,509 --> 00:00:45,343
got the bounds which will       
animate the size of the view,   

15
00:00:45,412 --> 00:00:48,112
although only in a transient    
way because it's the frame      

16
00:00:48,181 --> 00:00:50,816
that determines where you are.  
And so If you're going to make  

17
00:00:50,884 --> 00:00:53,285
it larger,                      
it occupies more space.         

18
00:00:53,353 --> 00:00:56,321
In super view, you have to      
set the frame. The transform,   

19
00:00:56,389 --> 00:00:58,490
which is super powerful,        
we saw that with the card,      

20
00:00:58,558 --> 00:01:00,659
where we rotated                
the corners upside down. So     

21
00:01:00,727 --> 00:01:03,428
you can do rotation, you could  
also do scaling with that,      

22
00:01:03,496 --> 00:01:06,831
in fact, that's probably a      
better way to do scaling than   

23
00:01:06,900 --> 00:01:09,901
trying to mock with your        
bounds. And then an opacity,    

24
00:01:09,969 --> 00:01:12,837
another good one, fading views  
in and out, appearing and       

25
00:01:12,906 --> 00:01:15,573
disappearing, and background    
color. We almost never do       

26
00:01:15,642 --> 00:01:18,476
that, but you could do that.    
So the way this works is with   

27
00:01:18,545 --> 00:01:22,013
a class called UIView Property  
Animator, not surprisingly.     

28
00:01:22,082 --> 00:01:26,217
And it works with closures.     
And basically the way it works  

29
00:01:26,286 --> 00:01:29,821
is you set a bunch of things    
on your property animator,      

30
00:01:29,890 --> 00:01:32,791
UIView property animator, to    
say what kind of animation you  

31
00:01:32,860 --> 00:01:36,227
want. How long it's gonna       
take, what curve of going       

32
00:01:36,296 --> 00:01:39,531
through the process quickly or  
slowly it's gonna do. If you    

33
00:01:39,599 --> 00:01:42,667
wanna delay before you start.   
All these kinds of things.      

34
00:01:42,736 --> 00:01:45,269
You set that up and then you    
give it a closure. And inside   

35
00:01:45,338 --> 00:01:50,041
the closure is just code that   
modifies these properties. So   

36
00:01:50,110 --> 00:01:52,744
that's it, then it will         
animate those changes           

37
00:01:52,813 --> 00:01:56,214
that you asked for in the       
fashion that you described.     

38
00:01:56,283 --> 00:01:59,651
Okay so, this is a super        
simple way to animate these     

39
00:01:59,720 --> 00:02:02,754
properties in a view. So let's  
take a look at what it looks    

40
00:02:02,823 --> 00:02:06,124
like to call it now. I'm not    
even gonna scratch the surface  

41
00:02:06,192 --> 00:02:09,794
of UIViewPropertyAnimator's     
power, it's amazing. You can    

42
00:02:09,863 --> 00:02:12,197
create the se animations. You   
can scrub them backwards and    

43
00:02:12,266 --> 00:02:14,833
forwards. You can have          
them with auto-repeat and       

44
00:02:14,902 --> 00:02:16,034
reverse, do all these things.   

45
00:02:16,103 --> 00:02:19,004
I'm just gonna talk about       
the simplest way to use it      

46
00:02:19,073 --> 00:02:22,573
which is this class method      
running property animator.      

47
00:02:22,642 --> 00:02:25,844
Okay, this thing creates        
a property animator that will   

48
00:02:25,913 --> 00:02:29,348
immediately start running. Now  
the arguments to it are very    

49
00:02:29,416 --> 00:02:32,351
simple. The first one with      
duration is just how long this  

50
00:02:32,419 --> 00:02:34,919
animation is going to take to   
happen. So you can make it      

51
00:02:34,988 --> 00:02:37,956
a one second animation, or a    
ten second, solely up to you.   

52
00:02:38,025 --> 00:02:40,825
Delay is how long to wait       
before you start this           

53
00:02:40,894 --> 00:02:43,895
animation. Why would you wanna  
delay the starting animation?   

54
00:02:43,964 --> 00:02:46,097
Well, maybe you got some other  
animation going on you wanna    

55
00:02:46,166 --> 00:02:50,001
wait, some time for definition  
although there's ways to        

56
00:02:50,070 --> 00:02:52,771
chain animations too, so        
that when one finishes,         

57
00:02:52,839 --> 00:02:54,973
you start another one,          
but it might delay for          

58
00:02:55,041 --> 00:02:57,542
that reason. Then options       
we'll talk about later,         

59
00:02:57,611 --> 00:03:00,411
just various options, how you   
want animations to run. And     

60
00:03:00,480 --> 00:03:03,748
then the all important closure  
right there, animations,        

61
00:03:03,817 --> 00:03:07,219
it takes no arguments, returns  
no arguments this closure and   

62
00:03:07,287 --> 00:03:09,120
you just put the code           
that's gonna                    

63
00:03:09,189 --> 00:03:11,522
modify those                    
properties in ther.             

64
00:03:11,591 --> 00:03:14,893
And then there's a completion   
closure as well. This will get  

65
00:03:14,962 --> 00:03:18,096
called when the animation       
actually finishes running.      

66
00:03:18,165 --> 00:03:20,331
And that completion one         
has an argument there,          

67
00:03:20,400 --> 00:03:23,067
which the position's            
either the start,               

68
00:03:23,136 --> 00:03:25,102
because you might be running    
this animation backwards,       

69
00:03:25,171 --> 00:03:28,173
believe it or not. Or it's the  
end, so the animation got all   

70
00:03:28,242 --> 00:03:31,275
the way to the end. Or if the   
animation got interrupted in    

71
00:03:31,344 --> 00:03:34,245
the middle, then the position   
will be called current,         

72
00:03:34,314 --> 00:03:37,182
dot current. This is an enum    
right here, dot current.        

73
00:03:37,251 --> 00:03:39,384
Why would an animation get      
interrupted in the middle?      

74
00:03:39,453 --> 00:03:42,320
You start another animation     
that animates one of the same   

75
00:03:42,389 --> 00:03:45,590
properties.                     
Then that animation wins and    

76
00:03:45,659 --> 00:03:47,392
it starts to taking over.       

77
00:03:47,461 --> 00:03:49,694
Now you can have multiple of    
these property animators going  

78
00:03:49,763 --> 00:03:53,098
side by side. All modifying     
different properties, but       

79
00:03:53,166 --> 00:03:56,734
once one starts to pick on      
the properties of another one,  

80
00:03:56,803 --> 00:03:59,037
the later one starts            
to win and take over.           

81
00:03:59,106 --> 00:04:01,406
Okay, and then this             
one will stop, go to,           

82
00:04:01,474 --> 00:04:05,310
say it's complete with the      
current position. Now, there's  

83
00:04:05,379 --> 00:04:08,212
something very important to     
understand conceptually about   

84
00:04:08,281 --> 00:04:12,016
how animations work. And        
I'm gonna show you an example   

85
00:04:12,085 --> 00:04:15,120
of calling this running         
property on an, animator. That  

86
00:04:15,188 --> 00:04:19,758
closure that you passed to it   
gets executed immediately.      

87
00:04:20,994 --> 00:04:23,762
It does not take five           
seconds,or ten seconds, or      

88
00:04:23,831 --> 00:04:25,797
however long for                
that closure to execute.        

89
00:04:25,866 --> 00:04:26,931
It executes immediately and     

90
00:04:27,000 --> 00:04:30,702
takes effect immediately.       
So, the animation is only       

91
00:04:30,771 --> 00:04:34,572
what the user is seeing.        
The user is seeing your         

92
00:04:34,641 --> 00:04:37,409
animation happen over five or   
ten seconds, but actually it    

93
00:04:37,478 --> 00:04:40,344
happened the instant you        
started the animation. Okay,    

94
00:04:40,413 --> 00:04:43,715
so there's a difference going   
on here. There's the reality,   

95
00:04:43,783 --> 00:04:46,618
which is in your code. That     
all happens instantly, then     

96
00:04:46,686 --> 00:04:49,921
there's the presentation of     
it that happens to the user.    

97
00:04:49,989 --> 00:04:52,023
That's what happens over time.  
So,                             

98
00:04:52,092 --> 00:04:55,093
this can be confusing because   
you might have an animation     

99
00:04:55,162 --> 00:04:57,361
that you set to take            
go off in two seconds,          

100
00:04:57,430 --> 00:05:00,532
and it starts running for two   
seconds. And, you know you're   

101
00:05:00,601 --> 00:05:03,601
thinking, yeah, my animation,   
when it's done, my frame or     

102
00:05:03,670 --> 00:05:06,404
my center or my alpha will be   
changed. But no, the instant    

103
00:05:06,472 --> 00:05:10,642
you started that animator,      
it got that stuff changed. So   

104
00:05:10,711 --> 00:05:12,176
you have to think about         
these two timeframes.           

105
00:05:12,245 --> 00:05:14,379
This is what makes animation    
somewhat difficult,             

106
00:05:14,448 --> 00:05:16,814
is thinking about them,         
what we call the model, but     

107
00:05:16,883 --> 00:05:19,050
has nothing to do with          
model view controller. But      

108
00:05:19,119 --> 00:05:20,985
you know the actual             
reality in your code, and       

109
00:05:21,054 --> 00:05:23,188
then the presentation which is  
a different thing if we're to   

110
00:05:23,257 --> 00:05:24,689
user seeing.                    

111
00:05:24,758 --> 00:05:25,923
Alright, so                     

112
00:05:25,992 --> 00:05:29,427
here I'm going to take a view   
that's fully opaque and         

113
00:05:29,495 --> 00:05:32,830
I'm gonna fade it out, and      
then when it's gone I'm going   

114
00:05:32,899 --> 00:05:35,901
to remove it from superview.    
So this is basically make       

115
00:05:35,969 --> 00:05:39,237
a view disappear from the       
screen animation. £So first,    

116
00:05:39,306 --> 00:05:41,940
I'm just checking to make       
sure that I'm fully opaque,     

117
00:05:42,009 --> 00:05:45,576
if my alpha is 1, then I'm      
calling the animator here.      

118
00:05:45,645 --> 00:05:49,047
This animation is gonna take    
3 seconds to fade out, and      

119
00:05:49,115 --> 00:05:51,382
it's not going to start         
Until 2 seconds from now.       

120
00:05:51,451 --> 00:05:53,552
That's what the first           
two arguments mean.             

121
00:05:53,620 --> 00:05:55,120
Then I picked one               
option just for                 

122
00:05:55,188 --> 00:05:57,021
fun, which is                   
allowUserInteraction            

123
00:05:57,090 --> 00:05:59,423
which means that as it's        
fading out, gestures and        

124
00:05:59,492 --> 00:06:02,694
stuff will still work on it.    
Otherwise,                      

125
00:06:02,763 --> 00:06:06,097
if you don't specify this then  
as animations happening this    

126
00:06:06,165 --> 00:06:09,100
kind of animation, you          
won't be able to, you know,     

127
00:06:09,169 --> 00:06:12,971
tap on things or whatever.      
Then here's my animations.      

128
00:06:13,040 --> 00:06:16,007
My animation is just setting    
my transparency to zero         

129
00:06:16,076 --> 00:06:19,511
fully transparent, right?       
So, that happens                

130
00:06:19,579 --> 00:06:22,280
immediately when I call this    
method. This method running     

131
00:06:22,349 --> 00:06:25,383
property animator return        
immediately having executed     

132
00:06:25,451 --> 00:06:29,253
that closure immediately.       
And then I have a completion.   

133
00:06:29,322 --> 00:06:32,190
If the thing gets to the end    
without being interrupted,      

134
00:06:32,259 --> 00:06:34,493
in other words I do fade        
all the way out to 0,           

135
00:06:34,561 --> 00:06:37,262
then I'm going to remove        
myself from my super view.      

136
00:06:37,330 --> 00:06:39,898
That's what this little         
completion closure is all       

137
00:06:39,967 --> 00:06:43,701
about. But notice I put         
print alpha equals whatever?    

138
00:06:43,770 --> 00:06:47,638
That's gonna say alpha          
equals 0. Do you see why?       

139
00:06:47,707 --> 00:06:50,174
Cuz even though it's gonna      
take five seconds for           

140
00:06:50,243 --> 00:06:53,111
that alpha to go to zero it     
goes to zero immediately,       

141
00:06:53,180 --> 00:06:57,081
because I executed              
this animation. So              

142
00:06:57,150 --> 00:06:59,417
I've said that I'm sure your    
like yeah makes sense, but      

143
00:06:59,486 --> 00:07:02,920
until you start coding it up    
you're gonna be like woah,      

144
00:07:02,989 --> 00:07:04,555
that's right,                   
I already changed that,         

145
00:07:04,624 --> 00:07:06,358
it just hasn't                  
appeared on screen, so          

146
00:07:06,426 --> 00:07:09,594
you have to get a little bit    
used to that. What are some     

147
00:07:09,663 --> 00:07:11,596
of the options that you can     
do when you're doing these      

148
00:07:11,665 --> 00:07:14,466
animations? The first one,      
begin from current state,       

149
00:07:14,534 --> 00:07:16,835
is if you're animating some     
property and then you start     

150
00:07:16,903 --> 00:07:19,437
another animation that          
animates the same property.     

151
00:07:19,505 --> 00:07:22,473
Does it start from the real     
value of the property, which    

152
00:07:22,542 --> 00:07:25,543
is what it got set to, like     
alpha equals zero? So does it   

153
00:07:25,612 --> 00:07:28,079
jump to transparent and         
start animating from there? Or  

154
00:07:28,147 --> 00:07:31,683
does it pick up from wherever   
that other animation was?       

155
00:07:31,752 --> 00:07:35,353
This is really, do you use the  
state of alpha that is being    

156
00:07:35,422 --> 00:07:37,756
animated or do you use the      
real state of alpha which is    

157
00:07:37,824 --> 00:07:40,458
what's in the code which        
using our previous slide,       

158
00:07:40,526 --> 00:07:45,163
would be zero? Okay, so this    
is kinda like picking up or     

159
00:07:45,231 --> 00:07:48,232
just using the real version.    
We do this quite a bit if we    

160
00:07:48,301 --> 00:07:50,134
have overlapping                
animations that are doing       

161
00:07:50,203 --> 00:07:54,272
the same property by two        
different animations.           

162
00:07:54,340 --> 00:07:56,675
What else we got in there?      
We got repeat and autoreverse.  

163
00:07:56,743 --> 00:07:58,442
So you can have animations      
that can go forwards and        

164
00:07:58,511 --> 00:08:00,679
backwards and                   
forwards and backwards.         

165
00:08:00,747 --> 00:08:02,780
It's kind of in a loop.         
That's kind of fun.             

166
00:08:02,849 --> 00:08:05,383
Down at the bottom you see      
these curves. Curve ease in,    

167
00:08:05,451 --> 00:08:07,652
ease out. For example,          
third from the bottom.          

168
00:08:07,721 --> 00:08:09,554
That's just saying that         
when you move the thing,        

169
00:08:09,623 --> 00:08:11,989
does it move linearly?          
That's curve linear,            

170
00:08:12,058 --> 00:08:14,825
which would be like it would    
move like that, or does it      

171
00:08:14,894 --> 00:08:17,695
kind of ease into moving        
slowly then pick up speed and   

172
00:08:17,764 --> 00:08:20,432
then slow down at the end? Now  
why would you want it to do     

173
00:08:20,500 --> 00:08:25,637
that? Well things that move     
like very linearly feel kind    

174
00:08:25,705 --> 00:08:29,006
of robotic and mechanical.      
Things that ease in and         

175
00:08:29,075 --> 00:08:31,909
then ease out, feel a little    
more like someone picked them   

176
00:08:31,978 --> 00:08:34,812
up and moved them over and      
put them down. You see. So      

177
00:08:34,881 --> 00:08:37,315
it is just kind of more         
natural movement. So like for   

178
00:08:37,383 --> 00:08:40,585
moving things you almost        
always want curve ease in,      

179
00:08:40,653 --> 00:08:44,188
ease out. But other ones like   
maybe fading out to alpha.      

180
00:08:44,257 --> 00:08:49,560
Maybe you don't need that you   
can just linearly fade out. So  

181
00:08:49,629 --> 00:08:51,730
that's it for view animation,   
super, super easy.              

182
00:08:51,798 --> 00:08:55,400
You can only animate those      
properties. It's super easy to  

183
00:08:55,468 --> 00:08:58,403
do. And again,                  
I only scratched the surface.   

184
00:08:58,471 --> 00:09:01,071
I showed you one method in      
UIViewPropertyAnimator.         

185
00:09:01,140 --> 00:09:03,007
It has dozens of methods,       

186
00:09:03,076 --> 00:09:05,643
lots of capability in there.    
All right, so                   

187
00:09:05,711 --> 00:09:08,079
let's talk about a totally      
different kinda animation now.  

188
00:09:08,148 --> 00:09:11,516
This is animating               
an entire view change.          

189
00:09:11,585 --> 00:09:14,452
So you've got a view and        
it's gonna completely change    

190
00:09:14,520 --> 00:09:17,422
the way it looks and you wanna  
animate that in some ways.      

191
00:09:17,491 --> 00:09:18,956
And there's limited             
ways to do that.                

192
00:09:19,025 --> 00:09:22,593
The classic example of this is  
a playing card. When a playing  

193
00:09:22,662 --> 00:09:26,063
card is face down, it looks     
like the Stanford logo or       

194
00:09:26,132 --> 00:09:29,567
it's the back of a card. When   
it's face up it's got pips and  

195
00:09:29,636 --> 00:09:31,268
corners and all of that stuff.  

196
00:09:31,337 --> 00:09:35,840
Okay, well when I wanna flip    
my card over I could just       

197
00:09:35,908 --> 00:09:37,875
change it immediately and       
it would just change back and   

198
00:09:37,944 --> 00:09:42,080
forth starkly, but this allows  
me to actually flip it over.    

199
00:09:42,149 --> 00:09:44,915
Like a 3D looking flip. And     

200
00:09:44,984 --> 00:09:47,918
you can also cross dissolve     
from one thing to another.      

201
00:09:47,987 --> 00:09:50,454
Those are the two major things  
you can do here. There's curl   

202
00:09:50,523 --> 00:09:52,924
up from the bottom too, which   
makes it like it's curling up,  

203
00:09:52,993 --> 00:09:54,959
and you're looking at a piece   
of paper behind it and          

204
00:09:55,028 --> 00:09:56,627
that's the new version. But     

205
00:09:56,696 --> 00:09:58,796
that's only for views that      
fill the whole screen.          

206
00:09:58,865 --> 00:10:01,498
Okay, that's not for,           
it doesn't really work if it's  

207
00:10:01,567 --> 00:10:06,771
a view inside another view. It  
kind of doesn't feel right. So  

208
00:10:06,840 --> 00:10:09,574
this is for transitioning       
just smoothing out or           

209
00:10:09,642 --> 00:10:12,744
animating the complete          
change to a view. Play cards    

210
00:10:12,812 --> 00:10:14,913
being the classic example.      
Here's how you would call it.   

211
00:10:14,981 --> 00:10:17,648
You would use this method in    
UIView. It's a class method     

212
00:10:17,717 --> 00:10:21,920
called transition with View.    
And you give again, duration.   

213
00:10:21,988 --> 00:10:24,522
You give the option.            
Same options as we had before.  

214
00:10:24,591 --> 00:10:27,391
Also with some options like     
transition flip from left,      

215
00:10:27,460 --> 00:10:30,027
which means flip this           
thing from the left edge.       

216
00:10:30,096 --> 00:10:31,262
You can also have               
flip from top,                  

217
00:10:31,330 --> 00:10:34,231
flip from bottom,               
cross dissolve,                 

218
00:10:34,300 --> 00:10:37,201
those kind of things. And       
now, in the animation block,    

219
00:10:37,270 --> 00:10:40,104
you're not limited to just      
changing view properties,       

220
00:10:40,173 --> 00:10:41,706
you can change                  
anything you want,              

221
00:10:41,775 --> 00:10:44,041
that's going to make that       
thing look different. And       

222
00:10:44,110 --> 00:10:46,911
then, so what the animation     
system does is, it draws your   

223
00:10:46,980 --> 00:10:50,682
view before this closure.       
Then it executes closure,       

224
00:10:50,750 --> 00:10:54,385
draws the view after, and       
then it just flips it over or   

225
00:10:54,454 --> 00:10:57,222
cross dissolves it,             
see what's going on here? So    

226
00:10:57,290 --> 00:10:59,857
this is kind of a simple        
animator for big changes.       

227
00:10:59,926 --> 00:11:02,059
Playing card is a great         
example and we'll see that in   

228
00:11:02,128 --> 00:11:04,862
the demo that I'm going to do.  
All right, so that's number     

229
00:11:04,931 --> 00:11:08,198
two. Here's number three. This  
one's a little more powerful,   

230
00:11:08,267 --> 00:11:09,400
a little more complicated.      

231
00:11:09,468 --> 00:11:13,104
Dynamic animation, it's a       
little approach to animation.   

232
00:11:13,172 --> 00:11:16,541
Here we're gonna set up         
physics attributes on our       

233
00:11:16,609 --> 00:11:20,377
views and then just tell them   
to go do what they do. So       

234
00:11:20,446 --> 00:11:24,548
we're talking physics like      
density, friction, gravity.     

235
00:11:24,617 --> 00:11:26,350
Stuff like that.                
You put on them there and       

236
00:11:26,419 --> 00:11:30,088
then they just start moving     
because physics, it works. So   

237
00:11:30,156 --> 00:11:34,225
let's take a look at how you    
make this happen. The first,    

238
00:11:34,294 --> 00:11:35,860
there's three steps             
to making it happen.            

239
00:11:35,929 --> 00:11:37,628
First, you need an animator.    

240
00:11:37,697 --> 00:11:40,364
This is just the thing          
that drives the animation.      

241
00:11:40,433 --> 00:11:43,501
It's an instance of a class     
called UIDynamicAnimator,       

242
00:11:43,570 --> 00:11:46,270
it only takes one argument      
in it's initializer,            

243
00:11:46,339 --> 00:11:48,973
which is the view that is       
going to be the reference       

244
00:11:49,042 --> 00:11:52,076
coordinate system for           
all animation that's going on.  

245
00:11:52,145 --> 00:11:54,712
And the only requirement for    
this view, can be any view in   

246
00:11:54,781 --> 00:11:58,182
your app. It just has to be a   
super view, or a super view of  

247
00:11:58,251 --> 00:11:59,650
a super view, or                
a super view of a super view.   

248
00:11:59,719 --> 00:12:02,319
It has to be at the top of      
the view hierarchy of all       

249
00:12:02,388 --> 00:12:05,055
the views that the animator     
is going to animate.            

250
00:12:05,124 --> 00:12:07,725
But those views don't all       
have to be in the same view.    

251
00:12:07,794 --> 00:12:09,494
They could be in                
sub-views of other views.       

252
00:12:09,562 --> 00:12:12,396
As long as they all             
are eventually have this view.  

253
00:12:12,465 --> 00:12:16,367
The reference view as a super   
view. So a lot of times people  

254
00:12:16,435 --> 00:12:18,436
wanna make their whole view     
controller's view, and          

255
00:12:18,505 --> 00:12:19,970
that's what I'm                 
gonna do in my demo.            

256
00:12:20,039 --> 00:12:22,039
Be a reference view cuz I       
don't have any other views.     

257
00:12:22,108 --> 00:12:24,642
But like in your assignment     
you might just make your view   

258
00:12:24,711 --> 00:12:27,077
that contains your cards        
be your reference view.         

259
00:12:27,146 --> 00:12:29,547
Because you're only gonna       
animate the cards. So           

260
00:12:29,616 --> 00:12:33,150
you don't need to go higher     
level, all right? And in fact,  

261
00:12:33,219 --> 00:12:35,286
it's better to stay lower       
down, because it can be more    

262
00:12:35,355 --> 00:12:37,688
object oriented to have that    
animation code down where it's  

263
00:12:37,757 --> 00:12:40,057
actually happening instead of   
putting everything up in your   

264
00:12:40,126 --> 00:12:43,294
controller. But I will say by   
the way, especially when you    

265
00:12:43,363 --> 00:12:45,296
see me do demos,                
which are really lightweight,   

266
00:12:45,365 --> 00:12:48,299
there is a tendency you         
probably have as beginning iOS  

267
00:12:48,368 --> 00:12:50,902
people to put everything in     
your view controller when       

268
00:12:50,971 --> 00:12:54,038
maybe it wants to be down       
a level in a custom view.       

269
00:12:54,107 --> 00:12:55,707
So just food for                
thought there.                  

270
00:12:55,775 --> 00:12:58,576
Think about what level things   
wanna be at. All right, so      

271
00:12:58,645 --> 00:12:59,744
number one is to                
create the animator,            

272
00:12:59,812 --> 00:13:02,113
number two is to                
create behaviors.               

273
00:13:02,182 --> 00:13:06,583
So this is describing how the   
things in this view behave.     

274
00:13:06,652 --> 00:13:08,519
And so we're talking            
about gravity, and              

275
00:13:08,587 --> 00:13:11,121
whether things collide with     
each other, stuff like that.    

276
00:13:11,190 --> 00:13:13,924
Okay, those are behaviors,      
and you add the behaviors to    

277
00:13:13,993 --> 00:13:16,560
the animator, so animator       
has an add behavior method.     

278
00:13:16,629 --> 00:13:19,697
You call it after               
creating a behavior and         

279
00:13:19,766 --> 00:13:23,534
you just add it. Now as soon    
as you add that behavior.       

280
00:13:23,602 --> 00:13:26,838
That animator would start       
enforcing that behavior,        

281
00:13:26,907 --> 00:13:28,372
whatever it is gravity or       
collisions or                   

282
00:13:28,441 --> 00:13:31,175
whatever. But                   
there is no items yet           

283
00:13:31,244 --> 00:13:32,843
that are being affected         
by the behaviors.               

284
00:13:32,912 --> 00:13:36,113
So step three is to add         
items to the behaviors.         

285
00:13:36,182 --> 00:13:38,983
So it's creating an animator,   
add behaviors to the animator.  

286
00:13:39,051 --> 00:13:41,852
Now add items to the behavior.  
The instant you add             

287
00:13:41,921 --> 00:13:44,722
an item to a behavior, it will  
start being affected by that    

288
00:13:44,791 --> 00:13:48,092
behavior assuming               
it's in an animator.            

289
00:13:48,161 --> 00:13:51,863
And UIView's are the items      
here, but actually there's      

290
00:13:51,931 --> 00:13:55,433
not UIView's it's any object    
that implements the protocol    

291
00:13:55,502 --> 00:13:57,835
UIDynamicItem, which            
doesn't have to be a view.      

292
00:13:57,903 --> 00:13:59,971
I'm gonna show you that         
protocol in a second. But       

293
00:14:00,039 --> 00:14:04,008
UIViews are 99% of the time     
what we pass items to these     

294
00:14:04,077 --> 00:14:07,278
behaviors. So if I say          
gravity add item, item 1,       

295
00:14:07,347 --> 00:14:10,247
item 1 will immediately start   
feeling the pull of gravity.    

296
00:14:10,316 --> 00:14:14,518
If I say collider at item 1     
immediately item 1 will start   

297
00:14:14,587 --> 00:14:17,421
colliding with everything else  
that is added as an item in     

298
00:14:17,490 --> 00:14:21,625
collider, in the collider. You  
don't say go. It's just like    

299
00:14:21,694 --> 00:14:24,194
as soon as you add an item it   
starts being effected by that   

300
00:14:24,263 --> 00:14:26,730
behavior. And if you remove an  
item it instantly stops being   

301
00:14:26,799 --> 00:14:28,099
effected by that behavior.      

302
00:14:30,103 --> 00:14:31,602
here's that UI dynamic item     
protocol that view implements.  

303
00:14:31,603 --> 00:14:33,102
Okay, so                        

304
00:14:33,172 --> 00:14:35,973
View actually implemented       
three of them automatically.    

305
00:14:36,042 --> 00:14:39,009
It already had a bound,         
center, and transform. Okay so  

306
00:14:39,078 --> 00:14:41,979
it automatically implemented    
those. And then the other two   

307
00:14:42,048 --> 00:14:44,148
are just really simple things   
having to do with collisions.   

308
00:14:44,217 --> 00:14:45,883
I'm not even gonna              
talk about those.               

309
00:14:45,952 --> 00:14:49,987
But you can see by what's in    
the dynamic item protocol what  

310
00:14:50,056 --> 00:14:53,123
the animation system            
is Is able to animate.          

311
00:14:53,192 --> 00:14:56,227
It's able to animate            
the size through the bounds.    

312
00:14:56,296 --> 00:14:58,896
It's able to animate the        
position through the center.    

313
00:14:58,965 --> 00:15:01,766
And it's able to animate        
the transform, so               

314
00:15:01,835 --> 00:15:03,467
it can rotate and scale and     

315
00:15:03,536 --> 00:15:06,537
do anything it wants            
pretty much in that front.      

316
00:15:06,605 --> 00:15:10,041
And it tends to mostly use      
transform in center to do its   

317
00:15:10,110 --> 00:15:14,244
animation. Okay, the bound      
to be notice is read only.      

318
00:15:14,313 --> 00:15:17,214
So the bounds is just for the   
views that can obviously look   

319
00:15:17,283 --> 00:15:19,082
at their own bound from         
their drawing and stuff.        

320
00:15:19,151 --> 00:15:22,987
The animator doesn't actually   
change the bounds, as it goes.  

321
00:15:23,056 --> 00:15:26,123
Mostly doing center and         
transform. By the way,          

322
00:15:26,192 --> 00:15:29,493
if you give an object to the    
animator by making a behavior   

323
00:15:29,562 --> 00:15:32,463
operate on it, really           
animator kind of owns it.       

324
00:15:32,532 --> 00:15:33,397
It owns a center and            

325
00:15:33,466 --> 00:15:35,733
transform as it's going         
to change them around.          

326
00:15:35,801 --> 00:15:38,302
So if you wanted to change      
a standard, or transform        

327
00:15:38,371 --> 00:15:41,172
off a view you already gave to  
a behavior, then you have to    

328
00:15:41,240 --> 00:15:43,674
call this method in your        
dynamic animator which is       

329
00:15:43,743 --> 00:15:45,710
update the item to              
the current state.              

330
00:15:45,779 --> 00:15:47,945
In other words,                 
I changed the center or         

331
00:15:48,014 --> 00:15:51,015
the transform, please, Mr.      
Animator, take that.            

332
00:15:51,084 --> 00:15:53,684
And so the animator would take  
that state, move the object,    

333
00:15:53,753 --> 00:15:56,487
change its transform, and then  
start behaving on it again.     

334
00:15:57,857 --> 00:16:01,192
Keep going forward, behaving    
from there. All right, so       

335
00:16:01,260 --> 00:16:01,859
let's talk about some           

336
00:16:01,927 --> 00:16:03,828
of the behaviors you can have.  
I mentioned gravity.            

337
00:16:03,897 --> 00:16:07,598
Gravity is an easy one.         
By default, gravity is down,    

338
00:16:07,667 --> 00:16:10,100
meaning down towards            
the home button or              

339
00:16:10,169 --> 00:16:13,804
the bottom of the device. Like  
an iPhone 10, it's away from    

340
00:16:13,873 --> 00:16:17,441
the face recognition stuff at   
the top. And the magnitude,     

341
00:16:17,510 --> 00:16:22,412
we sometimes call it G,         
but it's not really G.          

342
00:16:22,481 --> 00:16:26,984
The magnitude of 1.0 is 1,000   
points per second per second.   

343
00:16:27,053 --> 00:16:28,519
Everyone knows what             
gravity is, right?              

344
00:16:28,588 --> 00:16:31,322
It's an acceleration,           
9.8 meters per second squared.  

345
00:16:31,391 --> 00:16:33,724
So, this is 1,000 points        
per second per second.          

346
00:16:33,793 --> 00:16:36,360
Now, what's incredible is       
1,000 points per second per     

347
00:16:36,429 --> 00:16:39,496
second feels a lot like 9.8     
meters per second squared.      

348
00:16:39,565 --> 00:16:42,699
In other words, if I put an     
object at the top of my screen  

349
00:16:42,768 --> 00:16:46,170
and added to it a behavior      
with that gravity, it falls     

350
00:16:46,238 --> 00:16:48,873
at about the same rate as       
a real life object would fall.  

351
00:16:48,942 --> 00:16:49,973
It's amazing that,              

352
00:16:50,042 --> 00:16:53,377
that round number ends up       
being like that. But it is.     

353
00:16:53,446 --> 00:16:56,213
And then also, gravity doesn't  
have to be down. You can make   

354
00:16:56,282 --> 00:17:00,384
gravity go up. Or off to the    
right or anywhere you want. So  

355
00:17:00,452 --> 00:17:04,088
you can completely control      
what is going on with gravity.  

356
00:17:04,157 --> 00:17:06,190
Attachment behavior,            
really cool one.                

357
00:17:06,259 --> 00:17:11,963
Think of it as                  
like an iron bar,               

358
00:17:12,031 --> 00:17:15,599
or a bar between either two     
items or between an item and    

359
00:17:15,668 --> 00:17:20,204
a fixed point, all right? And   
that bar keeps those two items  

360
00:17:20,273 --> 00:17:23,841
connected even as all the       
other behaviors work on it.     

361
00:17:23,910 --> 00:17:27,911
So, imagine you had two things  
connected with a detachment     

362
00:17:27,980 --> 00:17:30,748
behavior. So they're behaving   
as if they're attached to each  

363
00:17:30,816 --> 00:17:33,550
other. And they start to fall   
because they're both being      

364
00:17:33,619 --> 00:17:37,321
operated on by gravity. Then    
let's say one of them collides  

365
00:17:37,390 --> 00:17:40,191
with something.                 
That bark is gonna make it, so  

366
00:17:40,259 --> 00:17:42,292
the other one which             
didn't collide is gonna         

367
00:17:42,361 --> 00:17:45,129
swing like a pendulum, you      
see? Cuz this one came down,    

368
00:17:45,197 --> 00:17:47,631
it collided, and                
this one kept on going. But     

369
00:17:47,700 --> 00:17:51,068
the bar keeps them together.    
And same thing if you attached  

370
00:17:51,137 --> 00:17:54,372
it to a fixed point. And then   
you turn on gravity, it will    

371
00:17:54,440 --> 00:17:56,640
start to fall down. But then    
when it gets to the bottom,     

372
00:17:56,709 --> 00:17:59,143
it'll start swinging like a     
pendulum. And then eventually,  

373
00:17:59,212 --> 00:18:00,144
gravity will pull it so         

374
00:18:00,213 --> 00:18:03,413
that it's straight down. You    
see what I'm saying there? So   

375
00:18:03,482 --> 00:18:06,350
attachments, awesome, cool      
little things. Another thing    

376
00:18:06,419 --> 00:18:09,854
that's cool about them is you   
can change the length of this   

377
00:18:09,922 --> 00:18:13,924
bar while the animation's       
happening. So it's animating.   

378
00:18:13,993 --> 00:18:16,093
Things are falling, bouncing    
off, things are colliding with  

379
00:18:16,162 --> 00:18:18,529
things. They're attached,       
and you can make the bar get    

380
00:18:18,597 --> 00:18:20,831
closer together or farther      
apart. You can also make        

381
00:18:20,900 --> 00:18:23,400
the bar kind of springy with a  
certain amount of damping. So   

382
00:18:23,469 --> 00:18:26,036
that things hit something, and  
then it will come together,     

383
00:18:26,105 --> 00:18:28,539
and then come back up to make   
their attachment be the right   

384
00:18:28,608 --> 00:18:30,807
distance.                       
It's pretty cool behavior.      

385
00:18:30,876 --> 00:18:33,510
Then there's collision          
behavior. This is probably      

386
00:18:33,579 --> 00:18:37,014
the most common behavior.       
Okay, this is objects UIView    

387
00:18:37,083 --> 00:18:41,352
bouncing into each other or     
bouncing off bezier paths,      

388
00:18:41,421 --> 00:18:45,923
basically, in the background.   
And you set this up just by     

389
00:18:45,992 --> 00:18:48,793
adding any fix boundaries       
you want as bezier paths,       

390
00:18:48,861 --> 00:18:52,129
usually, and then adding        
items. And you can control      

391
00:18:52,197 --> 00:18:54,765
whether the items bounce off    
each other or only off these    

392
00:18:54,834 --> 00:18:57,802
boundaries as bezier paths as   
you set up. All these bezier    

393
00:18:57,870 --> 00:19:00,037
paths are in the reference      
views coordinate system,        

394
00:19:00,106 --> 00:19:02,540
by the way. They're not         
actually drawn or anything.     

395
00:19:02,608 --> 00:19:08,278
They're just conceptually       
boundaries in the space.        

396
00:19:08,347 --> 00:19:11,515
And there's a really            
cool var in there.              

397
00:19:11,584 --> 00:19:14,051
The second from the bottom      
there translates reference      

398
00:19:14,120 --> 00:19:16,053
bounds into boundary.           
If you set that to true         

399
00:19:16,121 --> 00:19:19,156
on a collision behavior,        
then your reference views       

400
00:19:19,224 --> 00:19:22,626
outer edges will become a       
boundary, which is common cuz   

401
00:19:22,695 --> 00:19:24,895
you got things bouncing around  
in your reference view.         

402
00:19:24,964 --> 00:19:28,366
They'll stay mostly inside.     
Now, one thing about collision  

403
00:19:28,434 --> 00:19:31,702
boundaries, a lot of people     
think, if I put my reference    

404
00:19:31,771 --> 00:19:34,938
bounds as collision boundary,   
then no object will ever get    

405
00:19:35,007 --> 00:19:37,941
out. Okay, it will never        
escape. But that's not true.    

406
00:19:38,010 --> 00:19:40,478
Because items can, for          
example, move so fast that in   

407
00:19:40,546 --> 00:19:43,147
one animation frame, they move  
from being on one side of       

408
00:19:43,215 --> 00:19:45,883
the boundary to the other.      
And then they just fly off in   

409
00:19:45,952 --> 00:19:48,685
the outer space,                
they're gone forever. So        

410
00:19:48,754 --> 00:19:51,655
collision boundaries,           
they only check for             

411
00:19:51,724 --> 00:19:55,059
collisions on each frame        
of the animation, and so        

412
00:19:55,127 --> 00:19:58,295
they're not a lock down         
guarantee. You keep things      

413
00:19:58,364 --> 00:20:01,164
inside if you put a collision   
boundary around everything.     

414
00:20:01,233 --> 00:20:04,268
Now, collision boundaries       
also have a delegate. Their     

415
00:20:04,336 --> 00:20:07,004
delegate allows you to find     
out when collisions happen.     

416
00:20:07,072 --> 00:20:09,673
So if you set something to      
be a collision delegate,        

417
00:20:09,741 --> 00:20:12,876
you'll get these methods like   
collision behavior, began,      

418
00:20:12,945 --> 00:20:15,412
contact for some dynamic        
item with a boundary and        

419
00:20:15,481 --> 00:20:19,050
an identifier with a name. By   
the way, notice the boundary    

420
00:20:19,118 --> 00:20:22,052
identifiers are of              
type NSCopying.                 

421
00:20:22,121 --> 00:20:24,121
That's really weird             
old Objective-C thing.          

422
00:20:24,189 --> 00:20:26,723
That just means that they're    
either an NS number or an NS    

423
00:20:26,792 --> 00:20:31,695
string. And so you can use S    
to turn them into a string or   

424
00:20:31,764 --> 00:20:34,931
a double or an int, because     
we know that NS number and      

425
00:20:35,000 --> 00:20:38,002
NS string can be like           
automatically as to their       

426
00:20:38,071 --> 00:20:42,906
Swift counterparts there.       
Collisions are cool.            

427
00:20:42,975 --> 00:20:46,043
SnapBehavior, also              
very common. This is            

428
00:20:46,111 --> 00:20:48,612
when you're using the dynamic   
animation system, how you       

429
00:20:48,681 --> 00:20:52,349
move something. So you wanna    
move something someplace else.  

430
00:20:52,418 --> 00:20:55,019
You're not doing view property  
animation here, you're using    

431
00:20:55,087 --> 00:20:58,021
dynamic animation, so           
you say snap to this point.     

432
00:20:58,090 --> 00:21:00,257
To little better than           
the view property 1,            

433
00:21:00,326 --> 00:21:02,926
because when it snaps there,    
it doesn't just jump            

434
00:21:02,995 --> 00:21:05,229
right there or even ease        
out and ease in there.          

435
00:21:05,297 --> 00:21:07,331
It actually gets there,         
and when it's there,            

436
00:21:07,399 --> 00:21:09,866
imagine it has four springs     
on the corner. So it kind of    

437
00:21:09,935 --> 00:21:13,137
comes in and vibrates a         
little. So it feels even more   

438
00:21:13,205 --> 00:21:16,607
natural flying across the       
screen and stopping. So you'll  

439
00:21:16,676 --> 00:21:19,777
probably use the snap behavior  
in your homework because you    

440
00:21:19,845 --> 00:21:22,646
have to throw matched cards     
into a discard pile. You're     

441
00:21:22,714 --> 00:21:24,448
probably gonna use snapTo       
to throw them out there,        

442
00:21:24,517 --> 00:21:25,649
cuz you're gonna                
be doing dynamic                

443
00:21:25,717 --> 00:21:29,553
animation with them otherwise.  
Then there's PushBehavior.      

444
00:21:29,622 --> 00:21:31,922
Okay, PushBehavior              
just pushes an object.          

445
00:21:31,990 --> 00:21:35,659
And it can either constantly    
push it. Or it can just push    

446
00:21:35,727 --> 00:21:39,864
it once, like punch it. And     
this is an interesting one.     

447
00:21:39,932 --> 00:21:43,633
You can specify the angle and   
the magnitude of the push.      

448
00:21:43,702 --> 00:21:46,070
The instantaneous one is kind   
of interesting, because think   

449
00:21:46,138 --> 00:21:49,573
about it. This is a behavior    
that's added to an animator,    

450
00:21:49,641 --> 00:21:53,176
and this behavior only fires    
once if it's instantaneous.     

451
00:21:53,245 --> 00:21:55,479
And then it's just sitting      
there doing nothing forever.    

452
00:21:55,547 --> 00:21:58,248
So it's just kinda croft.       
So it'd be nice if              

453
00:21:58,317 --> 00:22:00,985
there was a way that we could   
add a PushBehavior and say,     

454
00:22:01,053 --> 00:22:02,152
after you fired,                

455
00:22:02,221 --> 00:22:04,388
please delete yourself because  
you've already done your work.  

456
00:22:04,457 --> 00:22:06,123
And I'm gonna show you how      
to do that, but it's gonna      

457
00:22:07,960 --> 00:22:10,294
require me to teach you         
a little more about closures,   

458
00:22:10,362 --> 00:22:15,332
which I'll do in a little bit.  
Another one is                  

459
00:22:15,401 --> 00:22:19,470
a UIDynamicItemBehavior. This   
is like a meta behavior. So     

460
00:22:19,538 --> 00:22:22,372
this is a behavior where you    
specify things like friction    

461
00:22:22,441 --> 00:22:25,376
and elasticity and whether you  
allow rotation of the view as   

462
00:22:25,445 --> 00:22:26,944
it's bouncing off of things.    

463
00:22:27,012 --> 00:22:29,680
And this affects how all the    
other behaviors work, right?    

464
00:22:29,749 --> 00:22:33,149
If you add more friction, then  
obviously, gravity pulls on     

465
00:22:33,218 --> 00:22:35,552
things. They move slower,       
because they have friction,     

466
00:22:35,621 --> 00:22:40,457
etc. You can also ask the       
UIDynamicItemBehavior about     

467
00:22:40,526 --> 00:22:44,461
all of its items. Things like,  
what's your current velocity.   

468
00:22:44,530 --> 00:22:46,596
How fast are you moving         
across the screen, or           

469
00:22:46,665 --> 00:22:49,433
even how fast are you spinning  
if you happen to be spinning,   

470
00:22:49,502 --> 00:22:50,800
how fast is that happening?     

471
00:22:50,869 --> 00:22:54,771
So UIDynamicItemBehavior,       
we almost always have all or    

472
00:22:54,840 --> 00:22:56,640
items in                        
a UIDynamicItemBehavior,        

473
00:22:56,709 --> 00:22:59,576
because we wanna be able to     
set these various things about  

474
00:22:59,645 --> 00:23:03,481
them. Then there's              
UIDynamicBehavior,              

475
00:23:03,549 --> 00:23:06,016
which is the super class        
of all of these behaviors,      

476
00:23:06,085 --> 00:23:07,384
collision behavior,             
gravity behavior,               

477
00:23:07,453 --> 00:23:10,453
all of these things. Now,       
you could subclass this and     

478
00:23:10,522 --> 00:23:12,489
try and                         
write your own behavior,        

479
00:23:12,558 --> 00:23:16,159
but writing a gravity behavior  
is pretty hard. A lot of math   

480
00:23:16,228 --> 00:23:18,963
involved there, trying to get   
that to work. But that's not    

481
00:23:19,031 --> 00:23:21,932
why you use a subclass of       
UIDynamicBehavior. What you do  

482
00:23:22,001 --> 00:23:24,734
with UIDynamicBehavior is       
you collect other behaviors,    

483
00:23:24,803 --> 00:23:27,404
like collisions and gravity     
and all this other stuff,       

484
00:23:27,473 --> 00:23:30,240
into one behavior. So that you  
have one behavior that you add  

485
00:23:30,308 --> 00:23:32,876
your items to, and it's got     
all these children behaviors    

486
00:23:32,945 --> 00:23:34,812
that are making it              
behave in all this way.         

487
00:23:34,880 --> 00:23:36,613
We're gonna do some of          
the demo as well, and           

488
00:23:36,682 --> 00:23:39,883
the way you do this is          
you call addChildBehavior       

489
00:23:39,952 --> 00:23:43,453
on yourself if you're           
UIDynamicBehavior sublass. And  

490
00:23:43,522 --> 00:23:48,658
it now causes that behavior     
to be your behavior. So         

491
00:23:48,727 --> 00:23:52,162
very simple.                    
UIDynamicBehavior also has      

492
00:23:52,231 --> 00:23:55,232
a bar in it called              
dynamic animator.               

493
00:23:55,300 --> 00:23:58,669
That is the animator you are    
currently being animated by,    

494
00:23:58,737 --> 00:24:01,605
if any. Okay, so you can        
look at this to find out.       

495
00:24:01,674 --> 00:24:03,940
Am I currently being animated?  
This behavior or                

496
00:24:04,009 --> 00:24:07,144
is it not being animated?       
And if it is being animated,    

497
00:24:07,212 --> 00:24:09,012
who by? And it will even        
send you a message.             

498
00:24:09,081 --> 00:24:11,982
Will move to animator when      
you switch to a different       

499
00:24:12,051 --> 00:24:14,251
animator. Usually when you      
go from not being animated      

500
00:24:14,320 --> 00:24:18,221
to being animated or            
vice versa, all right?          

501
00:24:18,290 --> 00:24:21,525
Now UIDynamicBehavior           
has another awesome             

502
00:24:21,593 --> 00:24:24,094
var that you inherit when       
you create a subclass or        

503
00:24:24,163 --> 00:24:26,062
when the subclasses             
are created.                    

504
00:24:26,131 --> 00:24:29,532
Which is action. So action is   
a closure. Takes no arguments,  

505
00:24:29,601 --> 00:24:33,070
returns no arguments. This      
closure gets executed every     

506
00:24:33,139 --> 00:24:39,076
time this UIDynamicBehavior     
Acts. So like a push behavior   

507
00:24:39,145 --> 00:24:42,546
that's instantaneous, this      
gets called once. Cuz only      

508
00:24:42,614 --> 00:24:45,615
once does it act on object.     
But a collision behavior is     

509
00:24:45,684 --> 00:24:48,686
kind of always acting on the    
outer gravity behavior always.  

510
00:24:48,754 --> 00:24:50,921
So it's this thing is           
getting called a lot.           

511
00:24:50,989 --> 00:24:54,124
So never put any code in there  
that takes a long time to       

512
00:24:54,193 --> 00:24:57,327
execute because it will slow    
your animation right way down.  

513
00:24:57,396 --> 00:24:59,529
Cuz these things are being      
called all the time,            

514
00:24:59,598 --> 00:25:01,932
these action closures           
right here. But                 

515
00:25:02,000 --> 00:25:04,634
they can be kind of useful.     
For example, you might wanna    

516
00:25:04,703 --> 00:25:08,304
check in here how's my view     
left the building, right?       

517
00:25:08,373 --> 00:25:10,908
You could look at whatever      
the items of this behavior's    

518
00:25:10,976 --> 00:25:14,043
acting on and did it cause      
this thing to go outside        

519
00:25:14,112 --> 00:25:15,879
the reference bounds even?      
Or whatever,                    

520
00:25:15,948 --> 00:25:18,581
so that I have to put it        
back or maybe destroy it, or    

521
00:25:18,650 --> 00:25:21,217
something like that. So         
again, it only takes a couple   

522
00:25:21,286 --> 00:25:23,753
lines of code to check the      
bounds of your item against     

523
00:25:23,822 --> 00:25:25,890
the reference bounds and        
see if anything has happened.   

524
00:25:25,958 --> 00:25:29,526
So that would be okay           
to put in your action.          

525
00:25:29,595 --> 00:25:32,128
Now we're gonna use this        
action thing in a second to     

526
00:25:32,197 --> 00:25:36,366
fix that push behavior problem  
to, all right? Finally,         

527
00:25:36,435 --> 00:25:39,903
I'm gonna talk about stasis     
of the animator. Really,        

528
00:25:39,972 --> 00:25:43,273
most of the time we design      
these animation mechanisms,     

529
00:25:43,342 --> 00:25:45,442
with all of the gravity and     
collision boundaries and        

530
00:25:45,511 --> 00:25:47,577
physics and all that stuff,     
we design it in a way that we   

531
00:25:47,646 --> 00:25:51,248
expect it to come to a stop.    
Okay, and                       

532
00:25:51,316 --> 00:25:53,784
then maybe a push happens, and  
it goes back active again.      

533
00:25:53,852 --> 00:25:56,220
And then it eventually comes    
to a stop. Most of the time,    

534
00:25:56,288 --> 00:25:58,254
it's not required. You could    
have things just constantly     

535
00:25:58,323 --> 00:26:01,591
going around all the time.      
But usually you push,           

536
00:26:01,660 --> 00:26:04,995
whatever comes to a stop. And   
so you can find out when it     

537
00:26:05,064 --> 00:26:08,364
reaches stasis with the         
UIDynamicAnimator's delegate    

538
00:26:08,433 --> 00:26:11,602
which has these two methods.    
Did pause and will resume.      

539
00:26:11,671 --> 00:26:14,103
And it will tell you,           
I came to stasis.               

540
00:26:14,172 --> 00:26:15,873
I'm not currently               
moving anything and             

541
00:26:15,941 --> 00:26:18,975
then something happens. It'll   
say I'm resuming because I      

542
00:26:19,044 --> 00:26:24,747
have to move things. Okay,      
all right? Let's go back and    

543
00:26:24,816 --> 00:26:27,483
talk about that push behavior   
thing. So what I really wanted  

544
00:26:27,552 --> 00:26:29,920
to do something like thing. I   
got this push behavior, right?  

545
00:26:29,989 --> 00:26:33,223
I set it's magnitude and its    
angle. But I really want that   

546
00:26:33,292 --> 00:26:37,427
push behavior to get thrown     
away as soon as it pushes       

547
00:26:37,496 --> 00:26:40,630
because it's instantaneous.     
You see here, my thing here is  

548
00:26:40,699 --> 00:26:43,300
instantaneous. Push, so         
it's only going to push once.   

549
00:26:43,369 --> 00:26:45,135
And then I want it to           
get thrown away, so             

550
00:26:45,203 --> 00:26:47,537
it doesn't muck up the heap     
with a totally useless          

551
00:26:47,606 --> 00:26:48,672
behavior, all right?            

552
00:26:48,740 --> 00:26:50,440
Well, I can do that with        
this action method,             

553
00:26:50,508 --> 00:26:53,109
the yellow part right here.     
So I can just have the push     

554
00:26:53,178 --> 00:26:57,314
behaviors action all behaviors  
inherit this action closure.    

555
00:26:57,382 --> 00:27:00,951
And inside the closure I can    
tell, ask the push behaviors    

556
00:27:01,019 --> 00:27:05,055
animator, please remove me.     
Okay, remove behavior.          

557
00:27:05,124 --> 00:27:08,592
The push behavior itself.       
So that's cool, right?          

558
00:27:08,660 --> 00:27:13,029
It solves the problem. Well     
yeah, but red on the slides.    

559
00:27:13,098 --> 00:27:17,434
This creates a memory cycle.    
So we're gonna talk             

560
00:27:17,503 --> 00:27:20,737
a little bit about this memory  
cycle that this creates. And    

561
00:27:20,806 --> 00:27:23,340
the bottom line here is that    
the push behavior is pointing   

562
00:27:23,408 --> 00:27:24,274
to that closure.                

563
00:27:24,342 --> 00:27:27,010
That closure is pointing        
back to the push behavior.      

564
00:27:27,079 --> 00:27:31,381
So both of them have a pointer  
to something them in the heap.  

565
00:27:31,450 --> 00:27:33,984
And so they're both being kept  
in the heap. All right, so for  

566
00:27:34,053 --> 00:27:36,520
me to tell you how we're        
gonna fix that memory cycle,    

567
00:27:36,589 --> 00:27:38,489
I'm gonna have to take          
an aside here and go back and   

568
00:27:38,557 --> 00:27:40,224
teach you a little more         
about closures. Hopefully,      

569
00:27:40,292 --> 00:27:42,359
you've read about this in       
your homework assignment. But   

570
00:27:42,428 --> 00:27:46,429
here we go. You can define.     
When you have a closure         

571
00:27:46,498 --> 00:27:49,032
you can define some             
local variables.                

572
00:27:49,101 --> 00:27:50,400
Fun little local variables.     

573
00:27:50,468 --> 00:27:52,836
You put a little square         
brackets with these local       

574
00:27:52,905 --> 00:27:55,805
brackets in there right before  
you're in with your closure     

575
00:27:55,874 --> 00:27:57,974
and you can define any          
variables you want.             

576
00:27:58,043 --> 00:27:59,943
And you can set them to         
have some initial value. So     

577
00:28:00,012 --> 00:28:03,446
here I have variables x and y.  
And I can use x and y inside    

578
00:28:03,515 --> 00:28:06,616
my closure. And then I'll have  
whatever value I set there.     

579
00:28:06,685 --> 00:28:09,286
It doesn't seem like            
it's of very much use.          

580
00:28:09,355 --> 00:28:11,488
And you're right it's           
not because, of course,         

581
00:28:11,557 --> 00:28:13,223
I could use some                
instance of a class, or         

582
00:28:13,292 --> 00:28:15,125
I could just type hello         
inside my closure.              

583
00:28:15,193 --> 00:28:17,827
Why do I need to have the       
silly little variables there?   

584
00:28:17,896 --> 00:28:20,497
Well the reason they're not so  
silly is because they can be    

585
00:28:20,566 --> 00:28:26,170
declared weak. These x and      
y are different variables.      

586
00:28:26,238 --> 00:28:29,238
They're local variables         
just for the closure. And       

587
00:28:29,307 --> 00:28:32,176
if you were to declare one of   
them weak, then it now becomes  

588
00:28:32,244 --> 00:28:34,711
an optional, first of all.      
Because we know all weak        

589
00:28:34,780 --> 00:28:37,314
variables, they don't keep      
things in the heap. And they    

590
00:28:37,383 --> 00:28:40,116
also have to be weak because    
if the thing they're pointing   

591
00:28:40,185 --> 00:28:42,986
to goes out of the heap         
they get set to nil, right?     

592
00:28:43,055 --> 00:28:45,622
So I can now use x and          
y still inside there but        

593
00:28:45,691 --> 00:28:49,559
x is now optional and weak.     
Okay, and you're gonna see why  

594
00:28:49,628 --> 00:28:53,430
that's valuable in a second.    
I can even declare that those   

595
00:28:53,499 --> 00:28:57,033
variables be unowned. And if    
you remember back to the thing  

596
00:28:57,102 --> 00:28:58,368
when I was talking about        
memory management,              

597
00:28:58,437 --> 00:29:00,370
unowned means it's not          
reference counted.              

598
00:29:00,439 --> 00:29:02,238
It's like Swift says okay,      

599
00:29:02,307 --> 00:29:05,275
it's on you. If you are gonna   
access that thing, it better    

600
00:29:05,344 --> 00:29:08,111
be in the heap because if it's  
not, you're crashing. That's    

601
00:29:08,180 --> 00:29:11,882
basically what unowned means.   
So that means I can use x and   

602
00:29:11,950 --> 00:29:14,484
y inside the closure.           
It's not an optional, don't     

603
00:29:14,553 --> 00:29:17,620
have to worry about that.       
But if I use x in there and     

604
00:29:17,689 --> 00:29:22,091
it's not in the heap, it's      
gonna crash my app. Okay, so    

605
00:29:22,160 --> 00:29:25,361
why is it valuable to do weak   
and unowned? Well because weak  

606
00:29:25,430 --> 00:29:28,331
and unowned variables, whether  
they're these little locals or  

607
00:29:28,400 --> 00:29:31,234
not, don't keep other           
things in the heap.             

608
00:29:31,303 --> 00:29:36,006
They're not strong. They're     
weak or even unowned. So        

609
00:29:36,074 --> 00:29:37,574
we can use that to break        
these memory cycles.            

610
00:29:37,642 --> 00:29:39,810
So here's another example of    
a memory cycle that happens     

611
00:29:39,878 --> 00:29:43,413
all the time. Have a class      
here, Zerg, it's called.        

612
00:29:43,481 --> 00:29:47,784
It has a var called foo which   
whose value is a closure.       

613
00:29:47,852 --> 00:29:51,454
Inside that closure,            
I've set it to have a value of  

614
00:29:51,523 --> 00:29:54,891
a closure that calls            
another function in Zerg,       

615
00:29:54,960 --> 00:29:58,762
which is bar. This is a memory  
cycle. And this is a memory     

616
00:29:58,830 --> 00:30:02,633
cycle because foo, the          
closure, is repressing self.    

617
00:30:02,701 --> 00:30:05,301
Self is keeping the class       
Zerg, the instance              

618
00:30:05,370 --> 00:30:07,838
of the class Zerg, in memory.   
And of course, Zerg is keeping  

619
00:30:07,906 --> 00:30:10,907
the closure in memory cuz it    
has a var that points to it.    

620
00:30:10,976 --> 00:30:12,709
So they're pointing             
to each other and               

621
00:30:12,777 --> 00:30:15,545
keeping each other in memory.   
So that's bad.                  

622
00:30:15,613 --> 00:30:16,713
You got one pointing            
to the other,                   

623
00:30:16,782 --> 00:30:18,481
the other points to the other,  
so                              

624
00:30:18,550 --> 00:30:21,217
how are we going to             
break this cycle?               

625
00:30:21,286 --> 00:30:24,854
Well, we're gonna use those     
little local variable hoo-has.  

626
00:30:24,923 --> 00:30:26,990
So I'm gonna create a little    
local variable. It's weak.      

627
00:30:27,058 --> 00:30:30,360
I'm gonna call it weakSelf.     
I'm gonna say equal to Self.    

628
00:30:30,429 --> 00:30:34,131
And then inside, I'm gonna      
say weakSelf, question mark,    

629
00:30:34,199 --> 00:30:37,200
meaning optional chaining,      
.bar. So                        

630
00:30:37,269 --> 00:30:41,004
now there's nothing inside      
that closure, no variable in    

631
00:30:41,072 --> 00:30:43,640
that closure is keeping         
a strong pointer to self.       

632
00:30:43,708 --> 00:30:46,276
And so it's not keeping itself  
in the heap. Do you agree?      

633
00:30:46,345 --> 00:30:49,445
Right, the only thing that's    
even used inside that closure   

634
00:30:49,514 --> 00:30:52,616
is weakSelf, but we know that   
weak. Can't keep something in   

635
00:30:52,684 --> 00:30:54,751
the heap. Now, unfortunately,   
it's an optional, so            

636
00:30:54,820 --> 00:30:58,387
I have to optional chain,       
but I've broken the cycle.      

637
00:30:58,456 --> 00:31:01,224
So this is how we break these   
cycles using weak little local  

638
00:31:01,292 --> 00:31:04,727
variables in our closure.       
By the way, we are allowed to   

639
00:31:04,796 --> 00:31:08,031
call that weak self, self.      
In other words, it can have     

640
00:31:08,100 --> 00:31:11,902
exactly the same name as        
a variable in the outer scope.  

641
00:31:11,971 --> 00:31:14,170
So on this slide,               
there's two different selfs.    

642
00:31:14,239 --> 00:31:16,706
There's the yellow self.        
That's a local in the closure.  

643
00:31:16,775 --> 00:31:17,874
And there's the green self.     

644
00:31:17,943 --> 00:31:22,078
That's the more global self of  
the instance of this class.     

645
00:31:22,147 --> 00:31:23,246
Okay, so it's two               
different variables. But        

646
00:31:23,315 --> 00:31:25,682
I'm not using the green self    
inside the closure at all.      

647
00:31:25,750 --> 00:31:28,284
I'm only using the yellow       
self. And that one's weak. And  

648
00:31:28,353 --> 00:31:31,154
in fact, this is so common you  
don't even have to say equal    

649
00:31:31,222 --> 00:31:34,223
self. If you say weak self,     
it will automatically set it    

650
00:31:34,292 --> 00:31:36,993
equal to a variable of the      
same name in the surrounding    

651
00:31:37,062 --> 00:31:41,698
code. Okay, so this is how      
we break these cycles.          

652
00:31:41,766 --> 00:31:43,500
So now let's go back to         
UI push behavior and            

653
00:31:43,568 --> 00:31:45,602
look how we would use unowned.  
All right, so                   

654
00:31:45,670 --> 00:31:49,306
here's my push behavior code.   
If I take that same thing,      

655
00:31:49,374 --> 00:31:52,842
that action, and just say       
unowned push behavior in that,  

656
00:31:52,911 --> 00:31:56,013
I've broken this cycle.         
Because now pushBehavior is no  

657
00:31:56,081 --> 00:31:58,648
longer managed by the           
reference accounting system     

658
00:31:58,717 --> 00:32:01,584
and, but pushBehavior better    
be in the heap right here.      

659
00:32:01,653 --> 00:32:04,620
Okay, if it does it in the      
heap, we're gonna crash. But    

660
00:32:04,689 --> 00:32:07,123
of course, pushBehavior is      
gonna be in the heap there.     

661
00:32:07,192 --> 00:32:10,160
pushBehavior couldn't possibly  
even be executing here. It's    

662
00:32:10,228 --> 00:32:13,430
action could not be executed    
if it wasn't in the heap. So    

663
00:32:13,498 --> 00:32:16,266
we're guaranteed that that      
pushBehavior's gonna be there.  

664
00:32:16,335 --> 00:32:19,970
So this is a classic one where  
we would do unowned to break    

665
00:32:20,039 --> 00:32:22,605
the cycle. We could've          
also done week there and        

666
00:32:22,674 --> 00:32:25,408
maybe checked to see if it was  
nil. But it's all unnecessary   

667
00:32:25,477 --> 00:32:28,845
cuz we know that's never gonna  
be nil there. It's never gonna  

668
00:32:28,913 --> 00:32:35,051
not be in the heap.So now       
I'm going to do a demo.         

669
00:32:35,119 --> 00:32:37,520
We're gonna take the playing    
card thing we did last week.    

670
00:32:37,589 --> 00:32:39,122
And I'm gonna make              
lots of playing cards.          

671
00:32:39,191 --> 00:32:40,190
And we're gonna put             
them in motion,                 

672
00:32:40,258 --> 00:32:43,060
and have them flipping over,    
and all kinds of fun stuff.     

673
00:32:43,128 --> 00:32:44,928
Friday, I'm not gonna           
get back to the slide.          

674
00:32:44,997 --> 00:32:46,663
So let me tell                  
you that Friday,                

675
00:32:46,732 --> 00:32:50,333
we will have a Friday section.  
It's on source code control.    

676
00:32:50,402 --> 00:32:51,434
So don't miss that one,         
that's a good one.              

677
00:32:51,503 --> 00:32:54,003
That's the thing we're always   
not clicking when we create     

678
00:32:54,072 --> 00:32:56,973
new projects that say, do you   
wanna manage this? Connecting   

679
00:32:57,041 --> 00:33:00,176
your code to GitHub and all     
that stuff is part of that.     

680
00:33:00,245 --> 00:33:02,112
Next week, actually,            
I say these, but actually,      

681
00:33:02,181 --> 00:33:04,013
we'll definitely do view        
controller lifecycle.           

682
00:33:04,082 --> 00:33:06,816
But I'd probably gonna do       
multi-threading next week,      

683
00:33:06,885 --> 00:33:08,285
which is an important topic.    

684
00:33:08,353 --> 00:33:10,753
And then maybe some             
miscellaneous other UI things,  

685
00:33:10,822 --> 00:33:13,190
like scroll view, text field,   
things like that.               

686
00:33:13,258 --> 00:33:15,325
Probably do table view and      
collection view, and drag and   

687
00:33:15,394 --> 00:33:21,697
drop, even, the week            
after that. All right,          

688
00:33:21,766 --> 00:33:26,469
so I told you I would show you  
the homework animation thing,   

689
00:33:26,538 --> 00:33:31,608
so let me do that. Let's        
go do it here, where is it?     

690
00:33:31,676 --> 00:33:35,445
Okay, so again, I'm only gonna  
show you this briefly. But      

691
00:33:35,514 --> 00:33:38,114
I just wanted to give you an    
idea of what you're gonna do.   

692
00:33:38,183 --> 00:33:41,384
Your set app, when it comes     
up, is going to automatically   

693
00:33:41,453 --> 00:33:43,620
deal out the cards. You see     
how I'm dealing out the cards?  

694
00:33:43,689 --> 00:33:44,654
They're flying out, and         

695
00:33:44,723 --> 00:33:46,989
they're also flipping           
when they get there.            

696
00:33:47,058 --> 00:33:52,362
When I deal new cards, you      
see, it's smoothly animated     

697
00:33:52,431 --> 00:33:55,998
to smaller cards, you see? And  
then dealt out new cards, so    

698
00:33:56,067 --> 00:33:59,035
you're gonna have to do that.   
Notice, I only have diamonds.   

699
00:33:59,104 --> 00:34:00,737
That's cuz I wanna get closer   
to the end game faster.         

700
00:34:00,806 --> 00:34:01,938
This is debugging thing.        

701
00:34:02,007 --> 00:34:05,775
Also, any three cards are a     
set right here. So we do this.  

702
00:34:05,844 --> 00:34:07,677
Now see what happens            
when you get a set?             

703
00:34:07,746 --> 00:34:11,214
They go chaos, they just        
fly all over the place. But     

704
00:34:11,283 --> 00:34:13,983
then they eventually collect    
over here in my discard pile.   

705
00:34:14,052 --> 00:34:15,552
See, look, watch this again.    

706
00:34:15,621 --> 00:34:17,653
See them flying all over        
the place? And notice,          

707
00:34:17,722 --> 00:34:20,223
it's also dealing out new       
cards to replace them.          

708
00:34:20,292 --> 00:34:21,991
Eventually, I'll get            
towards the end here.           

709
00:34:22,060 --> 00:34:23,193
There won't be any new cards.   

710
00:34:23,261 --> 00:34:25,795
Notice that my deck nicely      
disappeared. That's not         

711
00:34:25,864 --> 00:34:28,531
a required task, but you        
probably wanna do that. And     

712
00:34:28,599 --> 00:34:32,501
then, of course, as my number   
gets smaller, you're still      

713
00:34:32,570 --> 00:34:37,540
doing the chaos animation. And  
we're rearranging the cards as  

714
00:34:37,609 --> 00:34:40,243
they go down.                   
Understand what we're doing?    

715
00:34:40,311 --> 00:34:42,511
So you're basically doing       
three animations there.         

716
00:34:42,580 --> 00:34:45,048
One is you're dealing the       
cards out and flipping them.    

717
00:34:45,116 --> 00:34:48,017
Another one is, when cards      
match, you're exploding them.   

718
00:34:48,086 --> 00:34:50,286
And then putting them in        
the discard pile. And           

719
00:34:50,355 --> 00:34:53,323
then every time the number of   
cards changes, you're smoothly  

720
00:34:53,392 --> 00:34:57,360
animating to the new number.    
You're not jumping them.        

721
00:34:57,429 --> 00:35:02,565
That's it, all right,           
that's it. So the demo for      

722
00:35:02,634 --> 00:35:07,670
today, which will hopefully     
help you, let's go here.        

723
00:35:07,739 --> 00:35:10,539
All right, so the demo          
that we're gonna do today,      

724
00:35:10,608 --> 00:35:13,810
which will help you with your   
homework, is to take our card   

725
00:35:13,879 --> 00:35:16,880
app and put these cards in      
motion. Now this is pretty      

726
00:35:16,949 --> 00:35:19,716
much the same exact card        
app we had last time.           

727
00:35:19,785 --> 00:35:21,784
Except that the difference is   
we used to have one card in     

728
00:35:21,853 --> 00:35:26,522
the middle. In this case,       
I've created 12 cards. And      

729
00:35:26,591 --> 00:35:30,360
I've used my viewDidLoad to     
make them be random cards. I'm  

730
00:35:30,429 --> 00:35:33,997
just randomly going through,    
creating these cards, face up,  

731
00:35:34,065 --> 00:35:37,267
putting the rank and suit on    
them to create random cards.    

732
00:35:37,335 --> 00:35:38,635
So let's see what               
this looks like.                

733
00:35:46,011 --> 00:35:49,679
All right, there's my random    
cards. They don't do anything.  

734
00:35:49,747 --> 00:35:50,646
I don't have any                
gestures on them.               

735
00:35:50,715 --> 00:35:53,716
So I can't tap on them or do    
anything. So the first thing I  

736
00:35:53,785 --> 00:35:56,619
wanna do is add a tap           
gesture that flips them over.   

737
00:35:56,687 --> 00:35:57,753
And we're gonna                 
start this app and              

738
00:35:57,822 --> 00:35:59,188
flip them over                  
without animation.              

739
00:35:59,257 --> 00:36:01,824
Then we'll add animation to     
have them flip, all right?      

740
00:36:01,893 --> 00:36:04,627
So let's do that. I also heard  
there was some confusion in     

741
00:36:04,696 --> 00:36:06,863
office hours about gestures.    

742
00:36:06,931 --> 00:36:10,433
So this'll be a good            
opportunity to review gestures  

743
00:36:10,502 --> 00:36:13,002
again. So what I'm gonna do     
here, first of all, I'm gonna   

744
00:36:13,071 --> 00:36:16,072
start my cards face down        
instead of face up. And then    

745
00:36:16,141 --> 00:36:18,941
I'm just gonna add a gesture    
recognizer to them all.         

746
00:36:19,010 --> 00:36:21,444
add, let's make                 
this code big so                

747
00:36:21,513 --> 00:36:24,414
you can really see what's       
going on here, right?           

748
00:36:24,483 --> 00:36:29,052
So I'm gonna                    
addGestureRecognizer, oops,     

749
00:36:29,120 --> 00:36:32,822
gotta add it to a view.         
So I'm gonna add my             

750
00:36:32,891 --> 00:36:37,994
cardView.addGestureRecognizer,  
hello. How come, there we go.   

751
00:36:38,063 --> 00:36:40,630
So I'm adding a gesture         
recognizer. The gesture         

752
00:36:40,698 --> 00:36:44,767
recognizer I'm gonna add is     
UITapGestureRecognizer. And     

753
00:36:44,836 --> 00:36:48,104
then just to review what        
the arguments are to a gesture  

754
00:36:48,173 --> 00:36:50,072
recognizer, there's             
the target.                     

755
00:36:50,141 --> 00:36:54,544
This is the object that's       
going to be sent this action    

756
00:36:54,612 --> 00:37:00,616
method when the gesture         
happens. So I'm gonna have      

757
00:37:00,685 --> 00:37:04,019
the target of this be myself,   
the view controller. But        

758
00:37:04,088 --> 00:37:07,690
it could be the view, I could   
send it to that view as well.   

759
00:37:07,759 --> 00:37:10,926
And this selector               
is just #selector.              

760
00:37:10,995 --> 00:37:15,365
And then inside here, you       
put the name of the method.     

761
00:37:15,434 --> 00:37:19,202
But only the external           
names of the arguments.         

762
00:37:19,271 --> 00:37:22,439
So, for example, I'm gonna      
do flipCard. And it's only      

763
00:37:22,507 --> 00:37:24,874
gonna have one argument,        
which is the tap gesture.       

764
00:37:24,943 --> 00:37:27,043
And I'm gonna have it           
have no external name, so       

765
00:37:27,112 --> 00:37:31,514
I'm gonna do_:. So this is      
the name of the method with     

766
00:37:31,583 --> 00:37:33,650
all the external names and      
colons in there, but            

767
00:37:33,718 --> 00:37:39,522
nothing else. That's all,       
everybody cool with that? Now,  

768
00:37:41,626 --> 00:37:44,326
This is just complaining cuz    
I haven't defined flipCard.     

769
00:37:44,395 --> 00:37:47,330
So now when I create flipCard,  
of course, it has to be objc.   

770
00:37:47,398 --> 00:37:50,499
Okay, all these things that     
do this action thing have to    

771
00:37:50,568 --> 00:37:54,570
be objc. Call it flipCard,      
has no external name.           

772
00:37:54,639 --> 00:37:58,842
It's gonna be the recognizer    
UITapGestureRecognizer.         

773
00:38:02,113 --> 00:38:06,115
Recognizer, sometimes it        
makes me type it all in.        

774
00:38:06,184 --> 00:38:10,085
See if that gets rid            
of our warning here.            

775
00:38:10,154 --> 00:38:14,958
Okay, what's it saying here?    
What do we, the objc func,      

776
00:38:15,026 --> 00:38:20,062
how about that?                 
It's rebuilding here. Okay,     

777
00:38:20,131 --> 00:38:25,501
good, that's fixed,             
are we over here?               

778
00:38:25,570 --> 00:38:29,238
Did I forget something here?    
Okay, good,                     

779
00:38:29,307 --> 00:38:33,342
code's a little slow to keep    
up with my typing today. Okay,  

780
00:38:33,411 --> 00:38:37,713
so now I have this recognizer.  
Now I want to just find         

781
00:38:37,782 --> 00:38:41,217
out which card was clicked on,  
and then flip it over.          

782
00:38:41,285 --> 00:38:44,154
And this is something that      
I think people are like,        

783
00:38:44,222 --> 00:38:46,656
how do I do that? And           
the answer here, of course,     

784
00:38:46,725 --> 00:38:50,326
I'm gonna switch on the         
recognizer.state. We almost     

785
00:38:50,395 --> 00:38:52,962
always switch on the state.     
That's the first thing we do.   

786
00:38:53,031 --> 00:38:55,899
It's a tap gesture, so I only   
care about the ended state.     

787
00:38:55,967 --> 00:38:58,968
All the other states,           
I'm just gonna break, right?    

788
00:38:59,036 --> 00:39:02,572
But if I get a tap, what I      
wanna do is get the card        

789
00:39:02,640 --> 00:39:04,640
that was tapped on.             
But I'm in my view controller.  

790
00:39:04,709 --> 00:39:07,310
Now normally, I might have the  
target have been the view so    

791
00:39:07,379 --> 00:39:10,113
it would know that it was       
itself that got tapped on.      

792
00:39:10,182 --> 00:39:11,480
But here,                       
I'm in the view controller, so  

793
00:39:11,549 --> 00:39:13,349
I have to find it.              
Well, it turns out,             

794
00:39:13,418 --> 00:39:17,019
TapGestureRecognizer, it knows  
what view it was tapped on.     

795
00:39:17,088 --> 00:39:19,922
Remember how I said each        
of the concrete gestures        

796
00:39:19,991 --> 00:39:21,791
have information about          
what happened? Well,            

797
00:39:21,860 --> 00:39:24,060
one of the things is they know  
what they were tapped on or     

798
00:39:24,129 --> 00:39:27,997
whatever. So I can say,         
for example,                    

799
00:39:28,065 --> 00:39:34,203
if let the chosenCardView       
= the recognizer's view.        

800
00:39:34,272 --> 00:39:36,272
So view is a var in             
TapGestureRecognizer,           

801
00:39:36,340 --> 00:39:38,708
which is the view that was      
tapped on. This is maybe        

802
00:39:38,776 --> 00:39:42,311
the piece some of you           
didn't get from the doc. As     

803
00:39:42,380 --> 00:39:47,049
a PlayingCardView. Now why do   
I need it as PlayingCardView?   

804
00:39:47,118 --> 00:39:49,185
Because this is just            
a UI view, of course.           

805
00:39:49,254 --> 00:39:51,220
TapGestureRecognizer doesn't    
know anything about             

806
00:39:51,289 --> 00:39:53,756
PlayingCardView. So I have      
to make sure it is, in fact,    

807
00:39:53,825 --> 00:39:55,825
a PlayingCardView. It should    
be because that's the only      

808
00:39:55,893 --> 00:39:58,595
thing that I added any of       
these tap gestures to. Then I   

809
00:39:58,663 --> 00:40:03,732
can take the chosenCardView     
here, and have it isFaceUp.     

810
00:40:03,801 --> 00:40:09,605
=not the chosenCard view        
isFaceUp. So I'm just flipping  

811
00:40:09,674 --> 00:40:14,209
the card over here, right?      
Everybody understand that?      

812
00:40:14,278 --> 00:40:16,746
Okay, so let's go ahead and     
run and see if this works.      

813
00:40:21,953 --> 00:40:23,620
Okay, so they're all            
face down, that's good.         

814
00:40:23,688 --> 00:40:25,955
See I changed them all here     
to be false. So let's click,    

815
00:40:26,023 --> 00:40:29,826
all right. Flipped it over,     
working nicely, okay.           

816
00:40:29,895 --> 00:40:33,896
But of course we want           
this to be animated. And        

817
00:40:33,964 --> 00:40:37,166
we know that that is really     
easy to do with that UI view    

818
00:40:37,235 --> 00:40:42,071
transition with a view thing.   
So how do we do that,           

819
00:40:42,140 --> 00:40:44,707
how do we get started on that?  
Let's just go right here and    

820
00:40:44,776 --> 00:40:48,644
surround this and put this      
in a closure that's in          

821
00:40:48,713 --> 00:40:52,482
a UIview transition,            
so UIView.trasition.            

822
00:40:52,550 --> 00:40:53,282
By the way be careful,          

823
00:40:53,350 --> 00:40:56,519
their is two different UIView   
transitions. There is with      

824
00:40:56,588 --> 00:40:59,522
right here, which is the one    
we want and there is from to.   

825
00:40:59,590 --> 00:41:02,491
The from to is when you're      
transitioning from one view to  

826
00:41:02,560 --> 00:41:05,194
a completely different view.    
And you're going to remove one  

827
00:41:05,263 --> 00:41:07,596
from the superview and add the  
other one in as a subview. So   

828
00:41:07,665 --> 00:41:08,831
it's a similar thing, but       

829
00:41:08,900 --> 00:41:11,267
it's like card where the back   
of the card goes one view and   

830
00:41:11,336 --> 00:41:13,436
the front of the card is        
a different view. But           

831
00:41:13,504 --> 00:41:15,070
here we're transitioning        
with the same view,             

832
00:41:15,139 --> 00:41:16,872
cuz we can turn it face up and  

833
00:41:16,941 --> 00:41:20,042
face down. Here I'll go         
ahead and spread this out so    

834
00:41:20,111 --> 00:41:23,446
you can see these arguments     
a little more clearly, right.   

835
00:41:23,514 --> 00:41:26,382
Okay, the arguments,            
it seems like there's a lot of  

836
00:41:26,450 --> 00:41:29,251
arguments here but              
they're all quite simple.       

837
00:41:29,320 --> 00:41:32,555
So the view we're flipping is   
the chosenCardView of course,   

838
00:41:32,624 --> 00:41:37,159
all right? The duration,        
I find like a half a second,    

839
00:41:37,228 --> 00:41:40,530
maybe six-tenths of a second    
is a good amount of time        

840
00:41:40,598 --> 00:41:43,399
to give it to flip over. Any    
slower and it feels kind of     

841
00:41:43,468 --> 00:41:46,001
glacial. Any faster and it's    
like, what happened there?      

842
00:41:46,070 --> 00:41:47,270
It kind of flashes at you,      

843
00:41:47,338 --> 00:41:49,838
so you know. Options, here's    
where we have to say that we    

844
00:41:49,907 --> 00:41:51,941
want to flip as opposed to      
cross dissolve or anything.     

845
00:41:52,009 --> 00:41:55,578
So I'm gonna make transition,   
flip from, let's flip from      

846
00:41:55,647 --> 00:41:58,914
the left. So we gonna flip      
from the left. Here's           

847
00:41:58,983 --> 00:42:01,717
the animation's closure, okay   
this is where we're going to    

848
00:42:01,786 --> 00:42:04,053
do whatever cause is the view   
to look totally difference.     

849
00:42:04,122 --> 00:42:07,523
So, in our case it's            
this code right here,           

850
00:42:07,592 --> 00:42:10,626
put this inside here. Don't     
need that way over there.       

851
00:42:10,695 --> 00:42:11,961
But and then completion, for    

852
00:42:12,029 --> 00:42:14,296
now we're not gonna do          
anything when it completes.     

853
00:42:14,365 --> 00:42:16,933
So I'm just gonna take the      
completion thing completely     

854
00:42:17,001 --> 00:42:20,202
out of there. And               
we'll put this down here,       

855
00:42:20,271 --> 00:42:24,974
whoops, Ctrl+I just to make     
things a bit neater there.      

856
00:42:25,042 --> 00:42:28,177
Okay, everyone got that?        
So here's our transition.       

857
00:42:28,245 --> 00:42:31,280
With this view, flip from       
left, we're just going to flip  

858
00:42:31,349 --> 00:42:41,223
the card over. Let's give it    
a try. Okay, here we go. Woo,   

859
00:42:41,292 --> 00:42:44,159
see, and look, see, how it      
kind of shades a little bit.    

860
00:42:44,228 --> 00:42:47,729
The shading, the kind of gray   
that gives it that 3D effect.   

861
00:42:47,798 --> 00:42:52,134
It feels a little more like a   
3D flip. And it flips it over.  

862
00:42:52,203 --> 00:42:56,139
Okay, so that was easy. So      
that's transition animation,    

863
00:42:56,207 --> 00:43:01,811
totally trivial. Let's we're    
not really going to make our    

864
00:43:01,879 --> 00:43:04,613
app here into                   
a concentration app.            

865
00:43:04,682 --> 00:43:07,283
We're kinda doing a little      
bit of a UI study here, but     

866
00:43:07,352 --> 00:43:10,119
what if we wanted this          
to be like concentration        

867
00:43:10,187 --> 00:43:12,855
where we're trying to find      
two matching cards? Okay, but   

868
00:43:12,923 --> 00:43:14,357
we're going to make ours        
a little bit harder.            

869
00:43:14,425 --> 00:43:16,492
We're going to make it so that  
when you flip over a card,      

870
00:43:16,560 --> 00:43:19,162
so here is this card flipped    
out. If I flip another card,    

871
00:43:19,230 --> 00:43:21,130
if they don't match it's        
gonna go like this,             

872
00:43:21,199 --> 00:43:23,632
flip and then immediately       
flip them back down.            

873
00:43:23,701 --> 00:43:25,901
Hm, so you really are going     
to have to concentrate. Okay,   

874
00:43:25,970 --> 00:43:28,504
this really is concentration    
cause they go clip, and         

875
00:43:28,573 --> 00:43:31,006
then flip,                      
didn't match. You see?          

876
00:43:31,075 --> 00:43:33,242
So we're gonna have to really   
watch what we're doing here.    

877
00:43:33,310 --> 00:43:35,744
So let's add that animation,    
that just turns cards down.     

878
00:43:35,813 --> 00:43:38,046
Any time there's two cards up,  
we're gonna turn them down.     

879
00:43:38,115 --> 00:43:41,650
So to do that, I need a little  
private var that tells me what  

880
00:43:41,719 --> 00:43:45,287
my faceUpCardViews are.         
Which is gonna be an array of   

881
00:43:45,356 --> 00:43:50,760
PlayingCardViews here. And I'm  
going to have it be computed.   

882
00:43:50,829 --> 00:43:55,931
And we know how to use filters  
and all that stuff, so          

883
00:43:56,000 --> 00:44:01,103
I'm going to have my face       
up cards be my cardViews,       

884
00:44:01,172 --> 00:44:04,339
return my cardVews              
filtered and                    

885
00:44:04,408 --> 00:44:10,445
the filter is that they         
are face up, right? Let's also  

886
00:44:10,514 --> 00:44:13,716
make sure that they're not      
hidden. Because I'm gonna be    

887
00:44:13,785 --> 00:44:16,485
hiding cards that are already   
matched a little bit later.     

888
00:44:16,554 --> 00:44:20,623
So I just don't forget          
we'll make that be hidden.      

889
00:44:22,526 --> 00:44:26,061
So now we're able to find out   
what our face up cards is.      

890
00:44:26,130 --> 00:44:30,566
So now what I'm going to do is  
after this flip over finishes,  

891
00:44:30,635 --> 00:44:33,269
I'm going to add                
a completion handler.           

892
00:44:33,338 --> 00:44:35,904
Okay, completion,               
which I didn't have before,     

893
00:44:35,973 --> 00:44:41,377
I'm adding it. This one has     
finished. It doesn't have       

894
00:44:41,445 --> 00:44:45,414
the position, end, start,       
current. It just has finished,  

895
00:44:45,483 --> 00:44:48,751
yes or no, whether this flip    
finished. Because, it doesn't   

896
00:44:48,820 --> 00:44:51,187
really make sense to move your  
flip backwards and forwards.    

897
00:44:51,255 --> 00:44:54,123
It kind of either happens or    
it doesn't. So inside here,     

898
00:44:54,192 --> 00:44:57,326
I'm gonna do another            
transition. Okay so             

899
00:44:57,395 --> 00:45:00,196
actually I'll just copy and     
paste why not. Copy, paste and  

900
00:45:00,264 --> 00:45:03,766
it's perfectly fine to have     
animations in the completion    

901
00:45:03,835 --> 00:45:08,003
handlers of other animations.   
That's perfectly fine.          

902
00:45:08,072 --> 00:45:08,871
So what am I gonna do here?     

903
00:45:08,940 --> 00:45:11,674
Here I'm gonna flip down        
all the face up cards           

904
00:45:11,742 --> 00:45:14,543
if there's two.                 
So let's go ahead and check,    

905
00:45:14,612 --> 00:45:17,413
if my faceUpCardViews.count     
== 2, so                        

906
00:45:17,482 --> 00:45:21,217
I've got 2 face up cards. Then  
I'm gonna flip them all face    

907
00:45:21,285 --> 00:45:25,154
down using another transition.  
So let me show you a cool       

908
00:45:25,222 --> 00:45:29,325
way to do for loops if you      
have an array. Watch this, and  

909
00:45:29,393 --> 00:45:32,094
see here, what it's saying?     
Let's stop and look at this.    

910
00:45:32,163 --> 00:45:35,497
I got an error here, it says    
Reference property in closure   

911
00:45:35,566 --> 00:45:40,736
requires explicit self to make  
capture semantics explicit.     

912
00:45:40,804 --> 00:45:42,405
Okay, this is awesome.          

913
00:45:42,474 --> 00:45:45,074
Swift if saying,                
wait a second here bud,         

914
00:45:45,143 --> 00:45:47,776
you are accessing               
a bar on yourself,              

915
00:45:47,845 --> 00:45:51,013
and that's gonna                
capture yourself. And           

916
00:45:51,082 --> 00:45:54,050
I want you to type,             
self., right there, so          

917
00:45:54,118 --> 00:45:57,319
that you realize that you       
might have a loop here,         

918
00:45:57,388 --> 00:46:00,923
a memory cycle. So isn't that   
cool Swift made us do that.     

919
00:46:00,992 --> 00:46:02,457
I really appreciate             
that Swift does that.           

920
00:46:02,526 --> 00:46:04,493
Cuz otherwise it could be       
really easy to forget.          

921
00:46:04,562 --> 00:46:08,030
Oops, this is self and then     
realize, I got a memory cycle.  

922
00:46:08,099 --> 00:46:10,499
But do we actually have         
a memory cycle here? No,        

923
00:46:10,568 --> 00:46:15,004
we don't, because while this    
closure does capture self.      

924
00:46:15,073 --> 00:46:19,241
Self does not in any way        
point to this closure.          

925
00:46:19,310 --> 00:46:21,910
It's not part of any var. It's  
not any part of a dictionary    

926
00:46:21,979 --> 00:46:24,080
or an array or                  
anything that self has.         

927
00:46:24,148 --> 00:46:26,882
It's a closure we're giving     
off to the animation system.    

928
00:46:26,951 --> 00:46:29,218
So only the animation system    
has a pointer to it. So         

929
00:46:29,286 --> 00:46:32,521
there's no cycle here. So       
there's no reason for us to do  

930
00:46:32,589 --> 00:46:35,791
any of those weird local        
variables that are weak or      

931
00:46:35,860 --> 00:46:39,161
any of that. All right so,      
if I have two face cards,       

932
00:46:39,229 --> 00:46:41,697
I'm gonna do a for loop of      
all the face cards, but         

933
00:46:41,766 --> 00:46:43,232
I'm going to do it like this.   

934
00:46:43,300 --> 00:46:48,804
Watch this, Face up cards,      
forEach, do a closure. So, I'm  

935
00:46:48,873 --> 00:46:52,641
going to execute a closure for  
each of these face up cards.    

936
00:46:52,710 --> 00:46:54,843
So, that is kinda a cool        
way to do for loop, and         

937
00:46:54,912 --> 00:46:58,414
inside there I'm gonna put      
this here. And of course in     

938
00:46:58,483 --> 00:47:03,618
the for each $0 is each of the  
things in this so I'm gonna     

939
00:47:03,687 --> 00:47:07,623
do this flip transition with    
each of the cards in here.      

940
00:47:07,692 --> 00:47:12,127
Same thing same thing.          
Here's it's $0 is face up and   

941
00:47:12,196 --> 00:47:18,434
it's not flipped over, it's     
false. We want them face down.  

942
00:47:18,502 --> 00:47:23,672
You got all that? Make sense?   
What do we got here?            

943
00:47:23,741 --> 00:47:28,444
Let's get rid of this           
right here also. And            

944
00:47:28,513 --> 00:47:33,883
what's happening here?          
$0 is face up.                  

945
00:47:37,654 --> 00:47:42,991
Okay, anyone see what I'm       
doing wrong there? Look at my   

946
00:47:43,060 --> 00:47:47,496
card here, cardView, maybe I    
need to do this, cardView in.   

947
00:47:49,834 --> 00:47:54,803
Oops, cardView or something     

948
00:47:54,872 --> 00:47:59,675
like that. That fix it, yeah    
that did, that's interesting.   

949
00:47:59,743 --> 00:48:01,877
So the $0, I couldn't get       
it to type right there.         

950
00:48:01,946 --> 00:48:05,747
I don't know why it couldn't    
infer that Here, if             

951
00:48:05,816 --> 00:48:09,485
we have two cards face up we    
will flip them both face down.  

952
00:48:09,553 --> 00:48:19,361
Let's see if that works. All    
right so, one card face up.     

953
00:48:19,430 --> 00:48:21,597
We can actually turn this card  
back face down, by the way.     

954
00:48:21,665 --> 00:48:25,734
Face up, here we go,            
second card. All right,         

955
00:48:25,803 --> 00:48:31,240
we're good. Excellent.          
Now what happens if two of      

956
00:48:31,308 --> 00:48:34,110
these cards match like that?    
These two cards, they match,    

957
00:48:34,178 --> 00:48:35,944
so it shouldn't do that,        
it shouldn't turn it down.      

958
00:48:36,013 --> 00:48:39,381
It needs to give us some        
animation that says woohoo you  

959
00:48:39,450 --> 00:48:42,217
matched two cards. Okay, so     
let's come up with that,        

960
00:48:42,286 --> 00:48:45,321
an animation to do that.        
So the animation I'm gonna do   

961
00:48:45,389 --> 00:48:48,524
when cards match is I'm gonna   
make the cards really big       

962
00:48:48,593 --> 00:48:50,626
to emphasize that               
you have a match,               

963
00:48:50,695 --> 00:48:52,227
then I'm gonna make             
them really small and           

964
00:48:52,296 --> 00:48:55,164
have them fade away to          
nothingness and disappear.      

965
00:48:55,233 --> 00:48:58,033
Because when cards match, of    
course I wanna take them away.  

966
00:48:58,102 --> 00:48:59,034
So that's what we're gonna do.  

967
00:48:59,103 --> 00:49:00,335
Now that's a two                
step animation.                 

968
00:49:00,404 --> 00:49:01,603
The first step is to            
make them big and               

969
00:49:01,672 --> 00:49:04,206
then the second step is         
to animation down. And          

970
00:49:04,275 --> 00:49:07,142
we can do that with the UIView  
Property Animator, of course,   

971
00:49:07,211 --> 00:49:09,712
because of the size of          
the view and it's transparency  

972
00:49:09,780 --> 00:49:12,881
are animateable properties.     
And to make it two step like    

973
00:49:12,950 --> 00:49:14,784
that, we'll use                 
the completion thing,           

974
00:49:14,852 --> 00:49:16,685
similar to how we did this,     
right.                          

975
00:49:16,753 --> 00:49:19,255
We waited till the first one    
finished and then we went to    

976
00:49:19,323 --> 00:49:22,057
do the other one. All right,    
so how are we gonna do that?    

977
00:49:22,126 --> 00:49:25,561
Well, I need another private    
var here, actually. That's      

978
00:49:25,629 --> 00:49:28,497
just gonna tell me whether      
the face up cards match.        

979
00:49:28,565 --> 00:49:31,633
So I'm gonna call that          
faceUpCardViewsMatch,           

980
00:49:31,702 --> 00:49:37,773
I think I called that.          
Is that what I called it? Yes,  

981
00:49:37,842 --> 00:49:41,777
faceUpCardViewsMatch.           
It's a bool, we're going        

982
00:49:41,846 --> 00:49:43,912
to calculate that as well,      
I'm just going to return,       

983
00:49:43,981 --> 00:49:49,518
if our                          
faceupcardviews.count=2,        

984
00:49:49,587 --> 00:49:54,423
and oops. Kind of made          
it on the fly. And              

985
00:49:54,492 --> 00:50:00,463
face up, I'm missing            
an A there, faceUpCardViews     

986
00:50:00,531 --> 00:50:04,933
[0].rank=FaceUp,                

987
00:50:05,002 --> 00:50:06,868
and you can kind of see we      
don't have a model here so      

988
00:50:06,937 --> 00:50:10,339
we're kind of looking at        
these things directly. Again,   

989
00:50:10,408 --> 00:50:12,975
this is not how you would do    
this if you were going forward  

990
00:50:13,043 --> 00:50:15,777
to turn this into a             
concentration game. You would   

991
00:50:15,846 --> 00:50:19,047
have a model and all that. I'm  
really just doing like I said,  

992
00:50:19,116 --> 00:50:24,686
kind of a UI case               
study just to see               

993
00:50:24,755 --> 00:50:27,656
what would it look like and     
then later I would go back and  

994
00:50:27,725 --> 00:50:33,228
do my actual model or           
whatever. So this is            

995
00:50:33,297 --> 00:50:36,765
just a bool to tell us whether  
two face up cards match.        

996
00:50:36,834 --> 00:50:40,403
So down here after I've         
done my first card flip,        

997
00:50:40,471 --> 00:50:45,740
I'm gonna say if my self,       
of course, face up              

998
00:50:45,809 --> 00:50:50,679
cards views match. Then, here   
I'm going to do the animation.  

999
00:50:50,748 --> 00:50:53,281
Otherwise I'll going to go on   
and check just to see if we     

1000
00:50:53,350 --> 00:50:55,884
have two face cards that don't  
match. Then we'll do that flip  

1001
00:50:55,953 --> 00:50:57,852
down thing. But here we're      
not going to flip them down.    

1002
00:50:57,921 --> 00:50:59,387
We're going to make them big    
and then make them small.       

1003
00:50:59,456 --> 00:51:01,957
So we're going to use our       
view eye view property          

1004
00:51:02,026 --> 00:51:04,993
animator here, very simple      
to do. We're just gonna say     

1005
00:51:05,062 --> 00:51:10,866
UIViewPropertyAnimator.runnin-  
gPropertyAnimator.              

1006
00:51:10,934 --> 00:51:15,137
Again I will try to make this   
a little easier to see by       

1007
00:51:15,205 --> 00:51:20,709
getting each arguments on its   
own line like that. Okay.       

1008
00:51:20,778 --> 00:51:21,877
So here is the arguments.       

1009
00:51:21,946 --> 00:51:24,179
Properties, animators           
also very simple.               

1010
00:51:24,248 --> 00:51:25,814
The arguments, seems like       
there is a lot of them and      

1011
00:51:25,882 --> 00:51:28,250
they are very complicated, but  
they are really not. Okay.      

1012
00:51:28,319 --> 00:51:29,918
So here we are going            
to make the thing big.          

1013
00:51:29,987 --> 00:51:31,953
So how long do I want           
to take to make big?            

1014
00:51:32,022 --> 00:51:36,725
Again not really more than a    
second. Maybe .6 or .7. These   

1015
00:51:36,794 --> 00:51:40,462
are blue numbers that I would   
put in a constant struct and    

1016
00:51:40,531 --> 00:51:42,798
then play with to get my        
animation to look the way I     

1017
00:51:42,867 --> 00:51:45,400
want. And I'm not gonna         
delay this animation along,     

1018
00:51:45,469 --> 00:51:47,235
gonna start it right off.       

1019
00:51:47,304 --> 00:51:52,541
Really no un-animation options  
necessary here. Just going to   

1020
00:51:52,610 --> 00:51:55,577
do the animation.               
So in here is the closure and   

1021
00:51:55,646 --> 00:51:59,882
only thing I can change inside  
here is those view properties.  

1022
00:51:59,950 --> 00:52:02,718
Okay, if I change anything      
else, it will do it, but        

1023
00:52:02,786 --> 00:52:05,721
it's not gonna affect           
the animation in any way. So    

1024
00:52:05,789 --> 00:52:07,522
what are the animations         
we want to do here?             

1025
00:52:07,591 --> 00:52:10,492
Well we want all the face       
up cards to get really big.     

1026
00:52:10,560 --> 00:52:14,263
I'm gonna do that with the      
transform. Transform is really  

1027
00:52:14,332 --> 00:52:16,865
easy to make things big or      
rotate them or whatever so      

1028
00:52:16,934 --> 00:52:23,038
I'm just going to say, my face  
up cards views for each again,  

1029
00:52:23,106 --> 00:52:28,711
for each, oops. And inside      
this 'for each' I'm just going  

1030
00:52:28,779 --> 00:52:31,346
to change the properties that   
I want to change which is       

1031
00:52:31,415 --> 00:52:36,385
$0.transform=, and              
I'm gonna get the affine        

1032
00:52:36,453 --> 00:52:39,688
transform identity which        
is no rotation. And             

1033
00:52:39,757 --> 00:52:43,492
I'm gonna scale it by let's     
say three times as big. So      

1034
00:52:43,560 --> 00:52:48,196
this is gonna make this view    
three times its normal size.    

1035
00:52:48,265 --> 00:52:52,501
Let's just do just              
this part for now.              

1036
00:52:52,569 --> 00:52:56,772
We'll do this completion        
part in a little bit here.      

1037
00:52:58,442 --> 00:53:00,442
So I just wanna make sure that  
this is working. So this is     

1038
00:53:00,511 --> 00:53:04,246
gonna force us to find a match  
just to see if it's working,    

1039
00:53:04,314 --> 00:53:10,152
but I'm sure we can do that.    
Okay,                           

1040
00:53:10,221 --> 00:53:13,122
here we go. I need a match.     

1041
00:53:13,190 --> 00:53:17,726
No, 4 and 9. No, different      
kinda 4, no good. There's a 9.  

1042
00:53:17,794 --> 00:53:20,995
Okay, so I'm gonna click this   
card. They're gonna match.      

1043
00:53:21,064 --> 00:53:22,831
And hopefully they'll get       
really big. And then they're    

1044
00:53:22,900 --> 00:53:24,833
gonna stop because we're not    
finished with this animation.   

1045
00:53:24,901 --> 00:53:30,439
But let's see. Whoo, okay,      
it worked that was easy.        

1046
00:53:30,508 --> 00:53:32,607
Now we want the next step of    
the animation we want to make   

1047
00:53:32,676 --> 00:53:34,710
it small and                    
we're going to do its alpha so  

1048
00:53:34,778 --> 00:53:37,479
that gets small and fades away  
at the same time. Okay so,      

1049
00:53:37,548 --> 00:53:40,782
we're going to do that with     
this completion thing that      

1050
00:53:40,851 --> 00:53:45,320
I commented out, put that       
back, and expand this thing.    

1051
00:53:45,389 --> 00:53:47,690
Remember this one has           
the position not finished,      

1052
00:53:47,758 --> 00:53:51,059
but position which is either    
dot end, dot start, or          

1053
00:53:51,128 --> 00:53:54,663
dot current.                    
And we don't really care        

1054
00:53:54,731 --> 00:53:57,532
what it is because we're        
not gonna have animations       

1055
00:53:57,601 --> 00:53:59,635
that are gonna be jumping       
on top of each other here.      

1056
00:53:59,703 --> 00:54:01,103
So it's not gonna               
be a problem. So                

1057
00:54:01,171 --> 00:54:03,372
here we wanna do another        
property animation.             

1058
00:54:03,440 --> 00:54:06,474
So I'm gonna copy and paste     
this whole thing right here,    

1059
00:54:06,543 --> 00:54:09,445
put it in here. Okay. And       
what are we doing with this     

1060
00:54:09,513 --> 00:54:11,846
property animation?             
Very similar to the other one.  

1061
00:54:11,915 --> 00:54:14,249
But instead of the transform    
being transform up to 3.0,      

1062
00:54:14,318 --> 00:54:18,721
I am going to make it really    
small. Down to 0.1. And         

1063
00:54:18,789 --> 00:54:25,394
the same time I am going        
to say alpha equals zero.       

1064
00:54:25,462 --> 00:54:29,398
Fully transparent. Now, This,   
remember this is going to       

1065
00:54:29,467 --> 00:54:31,166
happen immediately. It's        
going to set it to zero, but    

1066
00:54:31,235 --> 00:54:33,802
the user is going to see it,    
over the course of .6. And      

1067
00:54:33,870 --> 00:54:36,572
actually, this one might want   
to be longer, maybe .75 or      

1068
00:54:36,640 --> 00:54:40,342
something because remember I    
went from Identity Transform    

1069
00:54:40,411 --> 00:54:44,646
to 3.0 now I'm going from 3.0   
passed identify down to 0.1.    

1070
00:54:44,715 --> 00:54:46,681
So maybe I wanna give           
it a little extra time,         

1071
00:54:46,750 --> 00:54:48,650
you see what I'm saying?        
To go that extra distance, so   

1072
00:54:48,719 --> 00:54:51,319
it feels like it's coming out   
and in at about the same time.  

1073
00:54:51,388 --> 00:54:53,989
But again, these are numbers    
you tweak over time             

1074
00:54:54,058 --> 00:54:56,925
as you're working on stuff.     
All right, so                   

1075
00:54:56,994 --> 00:54:59,060
again, let's just see           
if this is working.             

1076
00:54:59,129 --> 00:55:01,130
I have our completion           
thing in there                  

1077
00:55:07,638 --> 00:55:10,372
Okay, we gotta find the other   
match again. A three,           

1078
00:55:10,440 --> 00:55:15,043
and then an eight, an ace.      
No, that was ace of clubs and   

1079
00:55:15,112 --> 00:55:17,879
ace of spaded, see?             
There's the ace of clubs.       

1080
00:55:17,948 --> 00:55:20,782
Is that the ace of clubs? No,   
ace of spades. Ace of clubs.    

1081
00:55:20,851 --> 00:55:21,683
Okay, ready, here we go.        

1082
00:55:21,752 --> 00:55:24,052
I'm gonna click on this one,    
now it should go up and         

1083
00:55:24,121 --> 00:55:26,722
then go down and                
fade to alpha zero. Let's see.  

1084
00:55:26,791 --> 00:55:31,693
Perfect, okay.                  
It worked just fine. Now,       

1085
00:55:31,761 --> 00:55:35,731
once it goes down like that,    
we want to remove this card,    

1086
00:55:35,799 --> 00:55:37,932
because it no longer can be     
involved in the matches. So     

1087
00:55:38,001 --> 00:55:41,136
we are going to implement our   
completion handler right here.  

1088
00:55:41,204 --> 00:55:42,170
And inside                      
the completion handler,         

1089
00:55:42,238 --> 00:55:43,972
we're not going to be doing     
any view property animation,    

1090
00:55:44,041 --> 00:55:45,173
we're just going to             
be doing cleanup.               

1091
00:55:45,242 --> 00:55:49,211
For example, I'm going to say   
here for all these cards, so    

1092
00:55:49,279 --> 00:55:54,182
I'm going to have this for      
loop again. But not this. For   

1093
00:55:54,251 --> 00:55:57,252
all these cards, I want to set  
each of them to be isHidden,    

1094
00:55:57,320 --> 00:56:00,789
so I'm gonna hide the cards.    
Now, I'm also gonna clean up    

1095
00:56:00,858 --> 00:56:02,591
a little bit.                   
Because I really don't like     

1096
00:56:02,660 --> 00:56:05,594
the idea of having these        
views that are really small     

1097
00:56:05,663 --> 00:56:09,698
transforms. Okay, and           
transparent, sitting around in  

1098
00:56:09,766 --> 00:56:11,866
my view hierarchy even          
if they're hidden. So           

1099
00:56:11,935 --> 00:56:15,537
I'm going to go ahead and       
make the alpha be back to 1.    

1100
00:56:15,606 --> 00:56:18,106
And I'm gonna go ahead and      
make the transform,             

1101
00:56:18,175 --> 00:56:20,875
be back to being                
the identity transform. So      

1102
00:56:20,944 --> 00:56:24,813
it's just a little clean up, I  
just don't like to have messy,  

1103
00:56:26,283 --> 00:56:27,983
weird state views               
lying around.                   

1104
00:56:28,052 --> 00:56:29,417
They're hidden though,          
so it's not really gonna        

1105
00:56:29,486 --> 00:56:32,554
hurt anything to have them      
around there. But, for me,      

1106
00:56:32,623 --> 00:56:34,356
it's just a cleanliness thing,  
to kinda clean up               

1107
00:56:34,424 --> 00:56:35,724
after your animation            
a little bit.                   

1108
00:56:35,792 --> 00:56:38,259
And since there it's hidden,    
none of this is gonna show.     

1109
00:56:38,328 --> 00:56:40,161
The fact that I'm making        
it transparent again and        

1110
00:56:40,230 --> 00:56:41,963
changing its transform,         
it doesn't matter.              

1111
00:56:42,032 --> 00:56:46,902
Cuz this view is now            
hidden from view. Okay, so      

1112
00:56:46,970 --> 00:56:50,505
that's good, we got that.       
What's the next thing we need   

1113
00:56:50,574 --> 00:56:53,875
to do, what's the next one we   
wanna do? We wanna make it so   

1114
00:56:53,944 --> 00:56:56,645
this game's a little harder.    
I've got this game, and         

1115
00:56:56,714 --> 00:56:59,448
it's actually a little harder   
than our other concentration    

1116
00:56:59,517 --> 00:57:03,518
game was because we have        
to pay more attention.          

1117
00:57:03,587 --> 00:57:05,453
Because mismatches,             
they flip over so               

1118
00:57:05,522 --> 00:57:08,489
fast that if I'm trying to      
find a match, here, phew,       

1119
00:57:08,558 --> 00:57:11,659
got lucky with a match.         
If I'm trying to find a match,  

1120
00:57:11,728 --> 00:57:15,597
it's harder to do. But I'm      
gonna make it even harder by    

1121
00:57:15,666 --> 00:57:19,067
having these cards              
be in motion.                   

1122
00:57:19,136 --> 00:57:21,370
These cards are just gonna      
be constantly moving around.    

1123
00:57:21,438 --> 00:57:24,772
So I'm gonna have to chase      
after them to flip them over.   

1124
00:57:24,841 --> 00:57:27,743
And I'm gonna do that with      
our dynamic animator.           

1125
00:57:29,179 --> 00:57:31,647
Cuz that's the kind of thing    
a dynamic animator is good.     

1126
00:57:31,715 --> 00:57:35,417
Kinda set them out there and    
it just kinda floats around.    

1127
00:57:36,854 --> 00:57:38,986
All right, so,                  
how are we gonna do that?       

1128
00:57:39,055 --> 00:57:43,958
Dynamic animator, let's go up   
here. We're gonna start, we're  

1129
00:57:44,027 --> 00:57:47,028
gonna do the 3 steps, right?    
Animator, behaviors, items, so  

1130
00:57:47,097 --> 00:57:49,764
let's start with the animator.  
I'm gonna create a lazy var,    

1131
00:57:49,833 --> 00:57:53,368
which we're gonna call          
animator. It's going to be      

1132
00:57:53,437 --> 00:57:57,572
a UIDynamicAnimator. And        
the reference view for it, I'm  

1133
00:57:57,641 --> 00:57:59,675
gonna use the referenceView     
constructor here.               

1134
00:57:59,743 --> 00:58:03,377
I'm gonna make myself.view,     
right, the top level view of    

1135
00:58:03,446 --> 00:58:05,714
my view controller, I'm gonna   
make that be my referenceView.  

1136
00:58:05,783 --> 00:58:08,483
Again, if you're writing an     
app that had like subviews and  

1137
00:58:08,552 --> 00:58:10,552
stuff, it might well be         
not be the top level.           

1138
00:58:10,620 --> 00:58:12,688
But this is a demo,             
I don't have any other views.   

1139
00:58:12,756 --> 00:58:15,157
So that's what I'm gonna        
have to do. All right, so       

1140
00:58:15,225 --> 00:58:18,226
that's gonna be my animator,    
great. Now I need behaviors,    

1141
00:58:18,295 --> 00:58:20,528
so I'm gonna create             
another lazy var here.          

1142
00:58:20,597 --> 00:58:24,199
I'm gonna call it my            
collisionBehavior.              

1143
00:58:24,268 --> 00:58:27,769
It's gonna be of type           
UICollisionBehavior.            

1144
00:58:27,838 --> 00:58:31,339
And I'm gonna initialize        
this one with a closure.        

1145
00:58:31,408 --> 00:58:32,774
We talked about                 
that in lecture but             

1146
00:58:32,843 --> 00:58:34,943
we've never actually            
done it I don't think.          

1147
00:58:35,012 --> 00:58:37,479
So how do I initialize it with  
a closure? It's really easy,    

1148
00:58:37,548 --> 00:58:40,515
I just create the behavior.     
I create a UICollisionBehavior  

1149
00:58:40,584 --> 00:58:43,719
here. No arguments to its       
initializier, configure it.     

1150
00:58:43,787 --> 00:58:46,554
So the only thing I wanna do    
with this collision behavior    

1151
00:58:46,623 --> 00:58:49,091
is have the edges of my         
referenceView keep my cards     

1152
00:58:49,159 --> 00:58:51,559
in. The only thing the cards    
are gonna bounce off is each    

1153
00:58:51,628 --> 00:58:54,329
other and the edges.            
So, I'm gonna do this           

1154
00:58:54,398 --> 00:58:57,766
translateReferenceBoundsIntoB-  
oundary = true.                 

1155
00:58:57,835 --> 00:59:02,704
It's a kinda cheap, quick way   
to get a collision boundary.    

1156
00:59:02,773 --> 00:59:07,308
Then I'm gonna add it to my     
animator, addBehavior, and      

1157
00:59:07,377 --> 00:59:11,913
then I'm gonna return behavior  
from the closure. This returns  

1158
00:59:11,982 --> 00:59:14,816
it from the closure, which      
assigns it to this var, and     

1159
00:59:14,884 --> 00:59:20,021
it's all lazy. We see how       
we use a closure there,         

1160
00:59:20,090 --> 00:59:25,160
really convenient. Now we       
have what do we have here?      

1161
00:59:25,229 --> 00:59:29,297
AddBehavior, add the behavior   
to the animator,                

1162
00:59:29,366 --> 00:59:32,166
all right? So                   
now we have this behavior.      

1163
00:59:32,235 --> 00:59:35,103
We need to do step 3,           
add the items to it.            

1164
00:59:35,171 --> 00:59:36,905
Here's where we're creating     
all of our card views.          

1165
00:59:36,974 --> 00:59:43,211
Let's just say right here       
collisionBehavior.addItem,      

1166
00:59:43,280 --> 00:59:47,849
cardView. Now that card view    
is instantly going to respect   

1167
00:59:47,918 --> 00:59:50,151
that boundary and start         
bouncing into other cards. But  

1168
00:59:50,220 --> 00:59:53,522
of course we haven't moved the  
card, it's not moving, so we    

1169
00:59:53,590 --> 00:59:57,158
need to do that. We're gonna    
do that with a pushBehavior.    

1170
00:59:57,227 --> 01:00:00,394
So I'm gonna let push           
= UIPushBehavior.               

1171
01:00:00,463 --> 01:00:03,765
Now pushBehavior's initializer  
here takes the items that you   

1172
01:00:03,834 --> 01:00:08,069
wanna push. So                  

1173
01:00:08,138 --> 01:00:11,473
So this would only be this one  
cardView right here. I could    

1174
01:00:11,541 --> 01:00:13,107
create a push behavior that     
puts all the cards in there.    

1175
01:00:13,176 --> 01:00:14,809
But then they would all get     
pushed in the same direction,   

1176
01:00:14,878 --> 01:00:16,745
I don't want that.              
And then the mode,              

1177
01:00:16,813 --> 01:00:21,216
again, can be continuous or,    
in our case, instantaneous.     

1178
01:00:21,285 --> 01:00:24,018
We're just gonna give the card  
a push and then we are done.    

1179
01:00:24,087 --> 01:00:25,453
And since it's instantaneous,   

1180
01:00:25,522 --> 01:00:27,655
we're gonna wanna               
clean up after it.              

1181
01:00:27,724 --> 01:00:30,258
So let's give it an angle,      
so I'm gonna give it a push     

1182
01:00:30,327 --> 01:00:33,327
angle, which is a random angle  
between 0 and 2 pi. This is in  

1183
01:00:33,396 --> 01:00:36,264
radians, so I am gonna say      
2 times CGFloat.pi and          

1184
01:00:36,333 --> 01:00:39,534
it's gonna be random. So I am   
gonna need to use arch4random.  

1185
01:00:39,603 --> 01:00:42,871
I added a little arch4random    
to CGFloat as well.             

1186
01:00:42,939 --> 01:00:45,006
We added it to int, but you     
already knew how to do that,    

1187
01:00:45,075 --> 01:00:46,774
but I added one for float. And  

1188
01:00:46,843 --> 01:00:50,278
then the magnitude, I don't     
really wanna push it 0. So      

1189
01:00:50,347 --> 01:00:55,583
I'm gonna do a magnitude of     
let's say at least 1.0, right?  

1190
01:00:55,652 --> 01:01:00,255
But then I'm gonna add          
a certain amount extra,         

1191
01:01:00,324 --> 01:01:04,725
let's say 2.0 arc4random. So    

1192
01:01:04,794 --> 01:01:07,795
we're gonna have the magnitude  
and this has to be a CGFloat,   

1193
01:01:07,864 --> 01:01:11,166
right? This is a double, so     
we'll go CGFloat of all this.   

1194
01:01:11,234 --> 01:01:17,973
Oops, CGFloat(1.0),             
CGFloat(2.0),                   

1195
01:01:18,041 --> 01:01:22,043
random. Probably don't need     
both of those CGFloats. But     

1196
01:01:22,112 --> 01:01:25,213
anyway, so we create a random.  
So I'm creating a random        

1197
01:01:25,281 --> 01:01:30,752
magnitude between 1 and 3.      
Pushing a random amount there.  

1198
01:01:30,821 --> 01:01:36,390
Now I just need to say to the   
animator. Add this behavior,    

1199
01:01:36,459 --> 01:01:38,894
add this pushBehavior.          
And as soon as I add it to      

1200
01:01:38,962 --> 01:01:41,763
the animator,                   
it's going to push its items,   

1201
01:01:41,831 --> 01:01:44,832
which is just that one          
cardView. Now again, we know    

1202
01:01:44,901 --> 01:01:47,368
that this is bad because it's   
done now and it's never going   

1203
01:01:47,437 --> 01:01:50,204
to get cleaned up. So           
I'm gonna use the push.action,  

1204
01:01:50,273 --> 01:01:54,342
okay, to remove it from the     
animator by just saying push.   

1205
01:01:54,411 --> 01:01:57,645
Tell me your dynamicAnimator    
if you have one, and            

1206
01:01:57,714 --> 01:02:01,182
remove yourself from it. And    

1207
01:02:01,251 --> 01:02:04,185
we know that this causes        
a memory cycle, cuz this push   

1208
01:02:04,253 --> 01:02:06,888
right here is being kept in     
memory by this closure. And     

1209
01:02:06,957 --> 01:02:09,090
of course the push's action is  
pointing to the closure, so     

1210
01:02:09,159 --> 01:02:10,959
they're keeping each            
other in memory.                

1211
01:02:11,028 --> 01:02:15,630
So we're gonna get rid of this  
by just saying unowned.push.    

1212
01:02:15,699 --> 01:02:18,733
And yes I could've said weak    
push and then had an optional   

1213
01:02:18,802 --> 01:02:21,202
chain here, and maybe even      
an exclamation point here.      

1214
01:02:21,271 --> 01:02:22,437
But if I'm gonna do             
exclamation point,              

1215
01:02:22,505 --> 01:02:23,638
you might as well               
make it unowned,                

1216
01:02:23,706 --> 01:02:28,109
because you're unwrapping       
it anyway. All right, so        

1217
01:02:28,178 --> 01:02:29,243
let's see what happened. So     

1218
01:02:29,312 --> 01:02:31,879
all we did here is we created   
an animator, a collision        

1219
01:02:31,948 --> 01:02:34,949
behavior, and a push behavior.  
Let's see what happens,         

1220
01:02:35,018 --> 01:02:41,489
see if it just animates.        
Woo-hoo, we did it Now,         

1221
01:02:41,558 --> 01:02:45,059
I'm not quite getting           
what I want here though.        

1222
01:02:45,128 --> 01:02:47,695
One thing is look how           
quickly it settles down.        

1223
01:02:47,764 --> 01:02:50,932
It kind of settles down         
too easy, too quickly.          

1224
01:02:51,001 --> 01:02:53,034
That's gonna make it too        
easy to play this game.         

1225
01:02:53,103 --> 01:02:54,736
I wanted those cards            
moving a little more.           

1226
01:02:54,805 --> 01:02:57,672
The other thing is I don't      
think I want them rotated.      

1227
01:02:57,741 --> 01:03:00,375
It's kind of fun to have        
them rotate actually.           

1228
01:03:00,444 --> 01:03:03,011
But when you flip the card,     
for example,                    

1229
01:03:03,080 --> 01:03:05,213
it doesn't flip along           
the axis of the drawing.        

1230
01:03:05,281 --> 01:03:08,283
It flips along the axis of      
the view. So watch this flip,   

1231
01:03:08,351 --> 01:03:11,052
you see how it's kinda          
flipping around the corner?     

1232
01:03:11,121 --> 01:03:13,488
Maybe that's okay, but          
I'm gonna decide it's not.      

1233
01:03:13,557 --> 01:03:16,024
Because I also wanna show       
you how to do dynamic item      

1234
01:03:16,093 --> 01:03:19,594
behavior. Also, the reason      
that it's slowing down so       

1235
01:03:19,662 --> 01:03:23,098
much is there's not enough      
elasticity in the collisions.   

1236
01:03:23,167 --> 01:03:24,933
I want those collisions         
bouncing off and                

1237
01:03:25,002 --> 01:03:28,636
keeping the energy up.          
So let's fix, and               

1238
01:03:28,705 --> 01:03:33,374
we do that with another kind    
of behavior, kind of like our   

1239
01:03:33,443 --> 01:03:37,579
collision behavior.             
It is a itemBehavior,           

1240
01:03:37,647 --> 01:03:42,250
it's a UIDynamicItemBehaviour.  
And I'm gonna do that with      

1241
01:03:42,318 --> 01:03:47,956
a closure as well. So, we just  
create the behavior here,       

1242
01:03:48,024 --> 01:03:52,293
oops, let behavior=             
UIDynamicItemBehaviour.         

1243
01:03:52,362 --> 01:03:54,696
And now we'll just              
configure this behavior.        

1244
01:03:54,764 --> 01:03:58,332
So I want                       
allowsRotation = false.         

1245
01:03:58,401 --> 01:04:01,169
I don't want those              
things rotating around.         

1246
01:04:01,237 --> 01:04:04,339
I want Elasticity and           
see and there's a lot,          

1247
01:04:04,407 --> 01:04:05,840
you're going to have to look    
in the documentation to see     

1248
01:04:05,909 --> 01:04:07,675
all of the incredible things    
that you can do here. But       

1249
01:04:07,744 --> 01:04:12,080
I want elasticity 1.0 means     
that collisions don't lose any  

1250
01:04:12,149 --> 01:04:16,384
energy or gain energy. if I     
set this to an elasticity 1.1,  

1251
01:04:16,453 --> 01:04:17,852
they would gain                 
a little energy.                

1252
01:04:17,921 --> 01:04:20,087
Those things start going        
faster and faster and faster,   

1253
01:04:20,156 --> 01:04:23,558
forget it. But if I set it to   
0.9, they're gonna slow down.   

1254
01:04:23,626 --> 01:04:26,894
Not as slowed down as much      
as they are now, but so         

1255
01:04:26,963 --> 01:04:29,797
1.0 is as kinda the most        
elasticity I can give it and    

1256
01:04:29,866 --> 01:04:33,567
not run into an accelerating    
situation. And also, I'm gonna  

1257
01:04:33,636 --> 01:04:36,537
set, I'm not sure what the      
default of this one is, but     

1258
01:04:36,606 --> 01:04:39,607
I'm gonna set resistance,       
which is how much it resists    

1259
01:04:39,675 --> 01:04:43,044
forces being applied on it.     
And I'm gonna set that to 0,    

1260
01:04:43,112 --> 01:04:45,713
I don't want any resistance.    
I want it to be kind of free    

1261
01:04:45,782 --> 01:04:49,918
flowing here in outer space     
not resisting anything. So      

1262
01:04:49,987 --> 01:04:53,688
let's add this to               
the animator, add behavior,     

1263
01:04:56,492 --> 01:05:01,996
and return the behavior. Okay,  
now is that all we need to do?  

1264
01:05:02,065 --> 01:05:05,367
No, because if we don't         
add any items to this           

1265
01:05:05,435 --> 01:05:08,236
item behavior, then it's        
not going to do anything.       

1266
01:05:08,304 --> 01:05:10,738
So same way that we added       
the cardView to the collision   

1267
01:05:10,807 --> 01:05:13,073
behavior, we have to add        
it to the item behavior.        

1268
01:05:13,142 --> 01:05:17,044
And as soon as we do that, as   
soon as we add this thing in,   

1269
01:05:17,113 --> 01:05:20,648
it's gonna be having all those  
settings allows rotation        

1270
01:05:20,716 --> 01:05:23,317
and all that business. So       
let's see if that makes things  

1271
01:05:23,386 --> 01:05:31,759
better. Okay,                   
it did make it better.          

1272
01:05:31,828 --> 01:05:35,263
Okay, it's still slowing down,  
which I kind of want a little   

1273
01:05:35,332 --> 01:05:37,298
bit because I want              
the person to have              

1274
01:05:37,367 --> 01:05:40,201
a chance to by they're off.     
They're going too fast,         

1275
01:05:40,269 --> 01:05:41,836
you're just gonna be            
grabbing after them and         

1276
01:05:41,904 --> 01:05:44,238
then you'll never remember      
where the other ones went. So   

1277
01:05:44,307 --> 01:05:45,973
I do want it to slow            
down a little bit.              

1278
01:05:46,042 --> 01:05:48,642
Maybe not all the way to here,  
I can play with this.           

1279
01:05:48,711 --> 01:05:51,145
Actually have a kind of         
an idea for how to keep         

1280
01:05:51,214 --> 01:05:54,582
things in motion as the game    
goes on, but still give people  

1281
01:05:54,650 --> 01:05:58,786
a chance by letting it slow     
down. But before we do that,    

1282
01:05:58,855 --> 01:06:01,722
I wanna talk a little           
bit about that creating         

1283
01:06:01,791 --> 01:06:05,994
a UIDynamicBehavior subclass,   
where we combine other ones.    

1284
01:06:06,062 --> 01:06:08,429
Because look, we've got three   
different behaviors here.       

1285
01:06:08,497 --> 01:06:10,031
We've got the collision         
behavior,                       

1286
01:06:10,099 --> 01:06:12,767
we got the item behavior,       
we got the push behavior. And   

1287
01:06:12,835 --> 01:06:15,636
we're having to do all three    
different pieces of code for    

1288
01:06:15,705 --> 01:06:18,739
that in our view controller.    
It'd be a lot nicer if we had   

1289
01:06:18,808 --> 01:06:22,676
another behavior called the     
card behavior. And it had all   

1290
01:06:22,745 --> 01:06:25,246
those as part of it. And then   
we just add the card the card   

1291
01:06:25,315 --> 01:06:27,481
behavior, and then we'd get     
the collision and the item and  

1292
01:06:27,550 --> 01:06:30,718
the push automatically.         
So that's what we're gonna do.  

1293
01:06:30,786 --> 01:06:33,688
Let's go up here                
to File>New>File.               

1294
01:06:33,757 --> 01:06:35,523
I'm gonna create                
a Cocoa Touch Class,            

1295
01:06:35,592 --> 01:06:37,992
a UIDynamicBehavior as          
a Cocoa Touch Class.            

1296
01:06:38,061 --> 01:06:39,994
Here it is subclass             
of UIDynamicBehavior.           

1297
01:06:40,063 --> 01:06:44,365
I'm gonna call it               
CardBehavior. I'm gonna put it  

1298
01:06:44,434 --> 01:06:48,302
where all the rest of my files  
are there, don't forget that.   

1299
01:06:48,371 --> 01:06:52,139
Here it is, CardBehavior, a     
subclass of UIDynamicBehavior.  

1300
01:06:52,208 --> 01:06:55,175
And all I'm gonna do is go      
over here and grab all this     

1301
01:06:55,244 --> 01:06:59,848
stuff, and take it outta here   
and put it over here. Okay, so  

1302
01:06:59,916 --> 01:07:01,448
I'm just putting those          
behaviors over there,           

1303
01:07:01,517 --> 01:07:04,519
even the push. I'm gonna take   
the push out of here as well,   

1304
01:07:04,588 --> 01:07:05,420
put it over here.               

1305
01:07:05,488 --> 01:07:07,154
The push I'm gonna put          
in a little function,           

1306
01:07:07,223 --> 01:07:11,960
a private func called push,     
which pushes an item. This can  

1307
01:07:12,028 --> 01:07:15,296
all work on UIDynamicItem,      
I have UIViews but              

1308
01:07:15,365 --> 01:07:17,732
there's nothing in my code      
that's specific to UIView,      

1309
01:07:17,801 --> 01:07:21,068
it's all just dynamic items     
being animated here. So         

1310
01:07:21,137 --> 01:07:24,572
we'll put all that push stuff   
in there. Now we're gonna have  

1311
01:07:24,641 --> 01:07:26,374
to fix some of these little     
copy and paste problems.        

1312
01:07:26,442 --> 01:07:29,277
But this is essentially         
how you create your             

1313
01:07:29,346 --> 01:07:34,148
own dynamic behaviors by doing  
these. But these have to be     

1314
01:07:34,216 --> 01:07:38,953
added as children and we add    
them as children in an init.    

1315
01:07:39,021 --> 01:07:43,625
So 99.9% of the time, when you  
create a dynamic behavior,      

1316
01:07:43,693 --> 01:07:47,127
you're gonna override           
init with no argument.          

1317
01:07:47,196 --> 01:07:49,898
You're gonna call super.init,   
and then you're gonna add your  

1318
01:07:49,966 --> 01:07:53,067
children. So I've got           
my collision behavior,          

1319
01:07:53,135 --> 01:07:58,139
I'm gonna add, I've got my      
item behavior, I'm gonna add.   

1320
01:07:58,208 --> 01:08:00,241
Now, I can't really add         
my push behavior here,          

1321
01:08:00,309 --> 01:08:03,811
because the push behaviors,     
I need to know the item. So     

1322
01:08:03,880 --> 01:08:08,182
I can't quite do that yet. So   
and obviously I don't need to   

1323
01:08:08,251 --> 01:08:10,384
be adding them to               
animator right in here,         

1324
01:08:10,453 --> 01:08:13,187
cuz there somebody's gonna      
add me to an animator and       

1325
01:08:13,256 --> 01:08:14,788
that's how these things will    

1326
01:08:14,857 --> 01:08:17,291
all get put in an animator.     
Same thing here. So             

1327
01:08:17,360 --> 01:08:20,894
how am I gonna deal with        
this fact of push? Well,        

1328
01:08:20,963 --> 01:08:25,700
I'm also gonna add a func       
add item which adds an item,    

1329
01:08:25,768 --> 01:08:28,636
a UIDynamicItem.                
And when I add it,              

1330
01:08:28,705 --> 01:08:31,506
I'm gonna add it to             
all my children. So             

1331
01:08:31,575 --> 01:08:35,676
I'm gonna add it to             
collisionBehavior.addItem,      

1332
01:08:35,745 --> 01:08:42,283
I'm gonna add it to             
my itemBehavior, And            

1333
01:08:42,352 --> 01:08:44,952
I'm gonna push, so              
I'm gonna push the item too,    

1334
01:08:45,021 --> 01:08:48,322
which is essentially adding     
it to the push behavior here.   

1335
01:08:48,391 --> 01:08:51,259
So let's fix this one up, this  
needs to be item not cardView   

1336
01:08:51,328 --> 01:08:52,894
right here you see              
that argument, right?           

1337
01:08:54,364 --> 01:08:57,398
The push action here,           
notice that we're removing      

1338
01:08:57,467 --> 01:09:00,033
the behavior directly from      
the dynamic animator.           

1339
01:09:00,102 --> 01:09:03,904
Actually what I wanna do here   
instead is make it a child, so  

1340
01:09:03,973 --> 01:09:10,878
I'm gonna add a child behavior  
which is the push. And          

1341
01:09:10,947 --> 01:09:13,914
then when I remove, instead     
of removing behavior directly   

1342
01:09:13,983 --> 01:09:18,953
from the animator, I'm gonna    
remove my child behavior.       

1343
01:09:21,958 --> 01:09:24,692
See, now there's a little       
thing going on here,            

1344
01:09:24,761 --> 01:09:27,528
it's gonna complain             
once it compiles here.          

1345
01:09:27,597 --> 01:09:31,332
Implicitly use of 'self' in     
closure, use 'self'. In fact,   

1346
01:09:31,401 --> 01:09:36,270
I'm gonna do this if I can      
by just typing self., and       

1347
01:09:36,339 --> 01:09:38,505
this is now capturing self,     

1348
01:09:38,574 --> 01:09:42,943
which is the dynamic behavior.  
Yikes, okay, we don't wanna do  

1349
01:09:43,012 --> 01:09:45,512
that because the dynamic        
behavior definitely has         

1350
01:09:45,581 --> 01:09:48,215
a pointer to this closure,      
because it has a pointer to     

1351
01:09:48,284 --> 01:09:51,886
its own child behaviors of one  
which is the push behavior.     

1352
01:09:51,955 --> 01:09:53,221
And the push behavior           
points to it.                   

1353
01:09:53,289 --> 01:09:56,190
So I'm gonna get rid of         
this by saying, weak            

1354
01:09:56,258 --> 01:10:01,328
self. Okay, phew, broke that    
thing. I still need unowned     

1355
01:10:01,397 --> 01:10:04,999
push because I'm also passing   
push right there. Now I don't   

1356
01:10:05,068 --> 01:10:07,968
wanna do unowned self there,    
because just in case for some   

1357
01:10:08,037 --> 01:10:10,738
reason this whole behavior      
got removed from the heap,      

1358
01:10:10,807 --> 01:10:12,573
I don't wanna be                
crashing here.                  

1359
01:10:12,642 --> 01:10:14,508
So I'm just gonna do a weak     
to be a little bit safe.        

1360
01:10:14,577 --> 01:10:17,078
It's not the same case where I  
know for a fact that this push  

1361
01:10:17,147 --> 01:10:19,046
has to be in the heap cuz       
I wouldn't have got here.       

1362
01:10:19,115 --> 01:10:24,618
That's not necessarily true of  
self. So we are push there so,  

1363
01:10:24,687 --> 01:10:27,621
now that we've collected        
all of our code right here,     

1364
01:10:27,690 --> 01:10:29,557
actually I'm gonna              
add one more thing,             

1365
01:10:29,625 --> 01:10:31,926
cuz we haven't seen this        
as convenient init.             

1366
01:10:31,995 --> 01:10:34,495
Okay, I'm gonna add a           
convenience initializer here,   

1367
01:10:34,564 --> 01:10:37,832
that let's me specify the       
animator that I wanna be in.    

1368
01:10:37,901 --> 01:10:39,299
I just wanna show               
what it looks like              

1369
01:10:39,368 --> 01:10:42,737
to create a convenience init.   
And all you do when you         

1370
01:10:42,805 --> 01:10:46,073
create a convenience init is    
you can all a self.init only    

1371
01:10:46,142 --> 01:10:49,076
on yourself, then you can       
do what you wanna do.           

1372
01:10:49,145 --> 01:10:52,112
In this case, I'm just going    
to tell that animator to        

1373
01:10:52,181 --> 01:10:56,851
add behavior myself. See how    
that's like a convenience for   

1374
01:10:56,920 --> 01:10:58,886
me to be able to create         
one of these and                

1375
01:10:58,955 --> 01:11:02,390
have it automatically added.    
So let's use that convenience   

1376
01:11:02,458 --> 01:11:06,827
initiator, initializer back     
in our view controller here,    

1377
01:11:06,896 --> 01:11:10,164
actually we can go back.        
Here it is,                     

1378
01:11:10,233 --> 01:11:13,700
and instead of adding each      
item to both collision and      

1379
01:11:13,769 --> 01:11:16,437
item, we just add it            
to a cardBehavior,              

1380
01:11:16,506 --> 01:11:20,240
which we'll have to create. So  
I'm gonna have cardBehavior,    

1381
01:11:20,309 --> 01:11:23,343
add the item to cardView, and   
then I'm gonna create a var up  

1382
01:11:23,412 --> 01:11:26,079
here, a lazy var. It probably   
doesn't even need to be lazy,   

1383
01:11:26,148 --> 01:11:29,684
yeah, it probably does.         
Lazy var, which I'm gonna call  

1384
01:11:29,752 --> 01:11:33,754
cardBehavior, which is just     
gonna be a cardBehavior. And    

1385
01:11:33,823 --> 01:11:37,224
I'm gonna use my nice           
convenience initializer to say  

1386
01:11:37,293 --> 01:11:41,795
in my animator.                 
Okay, so this really            

1387
01:11:41,864 --> 01:11:45,165
cleaned up our code here in     
our view controller. In fact,   

1388
01:11:45,234 --> 01:11:48,803
there's only two lines of       
code at all that have to do     

1389
01:11:48,872 --> 01:11:51,339
with our dynamic                
animation in this thing.        

1390
01:11:51,407 --> 01:11:54,442
We've moved it all to that      
nice thing. Let's make sure we  

1391
01:11:54,511 --> 01:12:00,882
didn't break anything by        
doing that. We didn't. Okay,    

1392
01:12:00,950 --> 01:12:04,151
it's still working. And we can  
still flip out cards over.      

1393
01:12:04,219 --> 01:12:07,921
Those are separate animations   
going on over there. Now,       

1394
01:12:07,990 --> 01:12:10,224
I wanna do a couple             
of other things here.           

1395
01:12:10,293 --> 01:12:14,662
One is ,when you pick           
a card I want it to stop.       

1396
01:12:14,731 --> 01:12:18,298
I want it to stop being         
animated. You picked a card     

1397
01:12:18,367 --> 01:12:21,302
you get to take a breath,       
and look at your card.          

1398
01:12:21,371 --> 01:12:24,438
And then, if you flip the card  
back over or if it match it,    

1399
01:12:24,507 --> 01:12:27,375
or if doesn't match and         
it gets flipped over for you,   

1400
01:12:27,444 --> 01:12:29,944
then I'm gonna give it a push.  
Because see how                 

1401
01:12:30,013 --> 01:12:33,747
everything's stopping, so now,  
choosing cards, we'll start     

1402
01:12:33,816 --> 01:12:35,883
pushing them a little bit and   
getting them going again. So,   

1403
01:12:35,952 --> 01:12:37,751
yeah, you can wait for the      
whole thing to slow down and    

1404
01:12:37,820 --> 01:12:40,354
stop and then you can pick a    
card. But once you pick them,   

1405
01:12:40,423 --> 01:12:42,056
they're gonna all               
move around again and           

1406
01:12:42,125 --> 01:12:44,257
be shuffled up again,           
make it hard on you. So         

1407
01:12:44,326 --> 01:12:44,925
that's seemed like a good       

1408
01:12:44,994 --> 01:12:48,295
compromise to me between        
constant movement and           

1409
01:12:48,364 --> 01:12:50,565
all sitting completely          
still like this. So             

1410
01:12:50,633 --> 01:12:53,367
how am I gonna do that? Well    
that's super easy to do now     

1411
01:12:53,435 --> 01:12:56,237
because I have that one         
behavior. And if I remove       

1412
01:12:56,305 --> 01:12:59,006
an item from that behavior,     
it's going to automatically     

1413
01:12:59,074 --> 01:13:01,242
stop animating. Because         
nothing will be behaving.       

1414
01:13:01,311 --> 01:13:04,178
There will be no behaviors      
operating on it. Okay, so       

1415
01:13:04,247 --> 01:13:05,112
how do I do that? Well,         

1416
01:13:05,180 --> 01:13:07,648
I'm just gonna do this right    
in my flip card right here.     

1417
01:13:07,717 --> 01:13:11,419
As soon as I get a touch        
that's gonna flip a card over,  

1418
01:13:11,487 --> 01:13:14,622
I am just gonna say             
cardBehavior, not that.         

1419
01:13:14,690 --> 01:13:17,624
CardBehavior with               
a lower case C,                 

1420
01:13:17,693 --> 01:13:22,797
cardBehavior remove             
this chosenCard. Okay,          

1421
01:13:22,865 --> 01:13:25,532
but I do wanna add it           
back to the behaviors.          

1422
01:13:25,601 --> 01:13:30,003
When do I want to add it back   
to the behaviors? Either when,  

1423
01:13:30,072 --> 01:13:33,374
I didn't add remove item,       
let's make sure we do that,     

1424
01:13:33,443 --> 01:13:38,312
sorry. Where is our behavior?   
Yeah, sorry,                    

1425
01:13:38,380 --> 01:13:41,582
we have add item, we need       
remove item as well, okay. And  

1426
01:13:41,650 --> 01:13:44,585
removeItem is exactly the same  
kind of thing, except for       

1427
01:13:44,654 --> 01:13:49,690
that we are removing things     
from all of the behaviors.      

1428
01:13:49,759 --> 01:13:53,460
Remove, Sorry about that,       
forgot about that. Remove,      

1429
01:13:53,529 --> 01:13:54,661
and, we don't have              
to remove the push              

1430
01:13:54,730 --> 01:13:57,064
because we automatically        
remove the push as soon as it   

1431
01:13:57,132 --> 01:14:00,868
happens, right? Here's where    
we're removing the push. So     

1432
01:14:00,937 --> 01:14:03,737
since we removed the entire     
push behavior we don't have to  

1433
01:14:03,806 --> 01:14:06,907
remove the items from it.       
So there's removeItem,          

1434
01:14:06,976 --> 01:14:12,012
sorry about that. Okay, clear,  
all right let's go back to our  

1435
01:14:12,081 --> 01:14:14,982
thing here. So now we can do    
a removeItem, but we wanna put  

1436
01:14:15,051 --> 01:14:17,118
them back in, when do we        
wanna put them back in?         

1437
01:14:17,186 --> 01:14:19,286
Well if you just flipped the    
card face down, we wanna put    

1438
01:14:19,355 --> 01:14:22,122
it back in then, or if the two  
cards gets flipped down for     

1439
01:14:22,191 --> 01:14:24,658
you automatically because       
you had a mismatch, then we     

1440
01:14:24,727 --> 01:14:27,294
also wanna do that. So, let's   
go put that, and we're just     

1441
01:14:27,362 --> 01:14:30,263
gonna put add item to put       
them back in those cases. So,   

1442
01:14:30,332 --> 01:14:33,968
where are those in here?        
Let's see if I can find them.   

1443
01:14:34,036 --> 01:14:37,672
Okay, so here is the one where  
two cards don't match and       

1444
01:14:37,740 --> 01:14:40,240
we're automatically flipping    
it face down right here, so     

1445
01:14:40,309 --> 01:14:43,410
I'm just gonna have             
this cardBehavior,              

1446
01:14:43,479 --> 01:14:48,049
add item, the card view.        
Okay, let's put it back in.     

1447
01:14:48,117 --> 01:14:51,118
It got flipped face             
down automatically, and         

1448
01:14:51,187 --> 01:14:55,088
then here's the else,           
oops and of course self.        

1449
01:14:55,157 --> 01:14:57,958
Does that cause a memory        
cycle? No because these         

1450
01:14:58,027 --> 01:15:01,361
are animation system closures.  
We're okay, all right?          

1451
01:15:01,430 --> 01:15:04,331
So here, this is in the case    
where there weren't two cards.  

1452
01:15:04,399 --> 01:15:07,701
There was only one card. And    
if you flipped the card face    

1453
01:15:07,770 --> 01:15:13,941
down, if the chosenCardView,    

1454
01:15:14,009 --> 01:15:17,645
it's face down, so              
not face up. So                 

1455
01:15:17,713 --> 01:15:21,782
you pick the card, it's face    
up then you picked it again,    

1456
01:15:21,851 --> 01:15:24,551
it went face down, then here I  
need to have the CardBehavior   

1457
01:15:24,620 --> 01:15:28,188
right on itself there, because  
I'm not in a closure add item,  

1458
01:15:28,257 --> 01:15:30,257
put that cardView back.         

1459
01:15:30,326 --> 01:15:32,693
Now what about cases            
were the cards match?           

1460
01:15:32,761 --> 01:15:35,262
Don't need to put them back     
because they go away, right?    

1461
01:15:35,331 --> 01:15:36,731
We remove the areas hidden,     

1462
01:15:36,799 --> 01:15:39,466
so there's no reason to         
put them back, right? And       

1463
01:15:39,535 --> 01:15:43,704
it's not cardVew,               
it's chosenCardView. Okay, so   

1464
01:15:43,773 --> 01:15:49,510
let's see if this works.        
Oops cardBehavior, it's right   

1465
01:15:49,578 --> 01:15:52,579
in it's in the completion       
handler. This is in a closure,  

1466
01:15:52,648 --> 01:15:56,784
it's in the completion handler  
up here of this initial flip.   

1467
01:15:56,853 --> 01:15:59,386
So does this cause...           
every time you have to,         

1468
01:15:59,455 --> 01:16:01,922
any time it says this to you    
and you put self in there       

1469
01:16:01,990 --> 01:16:05,225
you wanna go, hmm, does         
this cause a memory cycle?      

1470
01:16:05,294 --> 01:16:06,494
No, it doesn't here,            
we're okay.                     

1471
01:16:06,562 --> 01:16:12,866
It's just a completion handler  
closure, we're fine. Okay,      

1472
01:16:12,935 --> 01:16:15,536
so now when I click one,        
if I can get one, there it is.  

1473
01:16:15,605 --> 01:16:18,171
It stopped, see,                
it's not being bounced into or  

1474
01:16:18,240 --> 01:16:20,641
moving in any way.              
And now if I pick another one,  

1475
01:16:20,710 --> 01:16:24,344
they don't match. Now, they     
both get a push. Because every  

1476
01:16:24,413 --> 01:16:28,683
time I add an item back to my   
cardBehavior, it gets a push    

1477
01:16:28,751 --> 01:16:31,084
that's kind of cool,            
kind of a nice little feature.  

1478
01:16:31,153 --> 01:16:33,654
Same thing here, oop they       
don't match they got pushed.    

1479
01:16:33,722 --> 01:16:36,156
Okay, these don't match         
they get pushed and             

1480
01:16:36,225 --> 01:16:38,759
hopefully if we find two        
that match somewhere,           

1481
01:16:38,828 --> 01:16:41,462
somebody help me how do         
they know where one is.         

1482
01:16:41,530 --> 01:16:44,865
There we go, we gotta match,    
okay, anyhow. So                

1483
01:16:44,934 --> 01:16:46,567
this is kinda nice,             
it plays kinda nicer. But       

1484
01:16:46,636 --> 01:16:49,770
there's still some things I     
don't really like about this.   

1485
01:16:49,838 --> 01:16:52,173
One is, I really don't like     
things on the edges so          

1486
01:16:52,241 --> 01:16:55,476
much. I don't mind if things    
stop, but I'd really rather     

1487
01:16:55,545 --> 01:16:58,378
they be towards the middle.     
And so, I have a little         

1488
01:16:58,447 --> 01:17:03,317
fix for that, which is over     
here in my cardBehavior here.   

1489
01:17:03,385 --> 01:17:06,720
When I push, instead of         
pushing at a random angle,      

1490
01:17:06,789 --> 01:17:09,957
instead, I'm going to push,     
and we don't have time for      

1491
01:17:10,025 --> 01:17:13,594
me to type it all in. I'm       
gonna push towards the center.  

1492
01:17:13,663 --> 01:17:17,164
So depending on where the card  
is in its reference bounds,     

1493
01:17:17,233 --> 01:17:18,999
the reference views bounds,     

1494
01:17:19,067 --> 01:17:22,803
I'm gonna push towards the      
center. So this is the process  

1495
01:17:22,871 --> 01:17:25,906
when you do animation of kind   
of tuning your animation.       

1496
01:17:25,975 --> 01:17:27,875
Seeing what makes sense,        
what doesn't make sense.        

1497
01:17:27,944 --> 01:17:30,845
So this is a nice tuning thing  
to push towards the center.     

1498
01:17:30,913 --> 01:17:35,949
Another way that we can         
tune our animations             

1499
01:17:36,018 --> 01:17:39,252
here is to slow them way down.  
Because when they're going so   

1500
01:17:39,321 --> 01:17:41,821
quickly sometimes they're       
not quite working and           

1501
01:17:41,890 --> 01:17:44,858
we can't really tell. So let's  
go back and slow down a couple  

1502
01:17:44,927 --> 01:17:48,361
of our animations to see how    
they're doing. So, for example  

1503
01:17:48,430 --> 01:17:52,799
let's load down our animations  
of the matching cards. So when  

1504
01:17:52,868 --> 01:17:55,903
the cards match that to right   
here remember we're scaling it  

1505
01:17:55,972 --> 01:17:59,173
up to three times and we scale  
it back down. And we had out    

1506
01:17:59,242 --> 01:18:01,608
alpha to zero. So instead       
of this taking, you know,       

1507
01:18:01,677 --> 01:18:03,944
about a little half a second,   
three quarters of a second,     

1508
01:18:04,012 --> 01:18:06,546
let's slow it way down to       
take six total seconds,         

1509
01:18:06,615 --> 01:18:07,614
three seconds.                  

1510
01:18:07,683 --> 01:18:12,352
For each part of the animation  
and see if our app is           

1511
01:18:12,421 --> 01:18:16,357
working well doing that, so     
we're gonna find any problems.  

1512
01:18:18,627 --> 01:18:21,262
Okay, it's gonna require me to  
find a match. Let's see we got  

1513
01:18:21,330 --> 01:18:26,333
here search around from cards   
til we can find, I think,       

1514
01:18:26,402 --> 01:18:31,138
nope, no well, there we go.     
So it's going so slow, but      

1515
01:18:31,206 --> 01:18:33,173
look what happens if I          
click on other cards.           

1516
01:18:33,242 --> 01:18:34,140
They're still able to match,    

1517
01:18:34,209 --> 01:18:36,476
in fact I can select            
more than two and               

1518
01:18:36,545 --> 01:18:40,581
then they disappear.            
Okay why do those disappear?    

1519
01:18:40,650 --> 01:18:43,784
Well that's because this        
second animation that comes     

1520
01:18:43,853 --> 01:18:45,719
along sets their                
alpha to zero,                  

1521
01:18:45,787 --> 01:18:49,155
picks them up along the way     
while this long animation is    

1522
01:18:49,224 --> 01:18:52,326
happening. So we really need    
to more careful when we're      

1523
01:18:52,395 --> 01:18:55,028
doing this second half          
especially of this animation,   

1524
01:18:55,097 --> 01:18:57,898
that we're only working on the  
cards that were involved in     

1525
01:18:57,967 --> 01:19:01,635
the match. And there's a        
couple of ways we can do that,  

1526
01:19:01,704 --> 01:19:05,138
one for example here where      
we're deciding whether we       

1527
01:19:05,207 --> 01:19:08,909
wanna do this animation or not  
we could just make sure that    

1528
01:19:08,978 --> 01:19:12,813
are faceUpcardViews count is    
always less than 2. Because if  

1529
01:19:12,881 --> 01:19:16,951
we already have two matching    
cards that are expanding and    

1530
01:19:17,019 --> 01:19:21,021
growing out, then we obviously  
can't match anymore.            

1531
01:19:21,090 --> 01:19:23,190
So that would kind              
of work except for              

1532
01:19:23,259 --> 01:19:25,625
that you can imagine            
if I had a match and            

1533
01:19:25,694 --> 01:19:28,395
the cards are expanding out     
that it might actually want to  

1534
01:19:28,464 --> 01:19:32,666
start working on my next pair.  
And so for that to work,        

1535
01:19:32,734 --> 01:19:35,469
we really wanna have those      
two matching cards not really   

1536
01:19:35,538 --> 01:19:39,139
count as face up cards at all.  
And we can do that up here.     

1537
01:19:39,207 --> 01:19:42,476
Here's where we decide what     
a face up card is. Currently    

1538
01:19:42,544 --> 01:19:46,713
it's a card that is face up     
and obviously is not hidden.    

1539
01:19:46,782 --> 01:19:49,449
And we could just enhance this  
a little bit here because we    

1540
01:19:49,518 --> 01:19:52,786
know that those cards that are  
expanding are either scaled up  

1541
01:19:52,855 --> 01:19:57,891
to 3.0 in their transform, or   
their alpha is not 1, right?    

1542
01:19:57,960 --> 01:20:01,395
It's 0, in fact So we can       
just put those on here. So      

1543
01:20:01,464 --> 01:20:06,266
lets say a face up card also    
has to have a transformed that  

1544
01:20:06,335 --> 01:20:11,505
does not equal the identity     
transform scaled by 3.0, 3.0.   

1545
01:20:11,574 --> 01:20:15,742
By the way you can              
see the terror and              

1546
01:20:15,811 --> 01:20:19,612
danger of blue numbers because  
if I were to ever change        

1547
01:20:19,681 --> 01:20:22,782
this number and forget to       
change the same thing here,     

1548
01:20:22,851 --> 01:20:25,185
then this would not work.       
My animation would be out of    

1549
01:20:25,254 --> 01:20:28,088
sync with what I consider to    
be a face-up card. So this is   

1550
01:20:28,157 --> 01:20:31,158
where we'd wanna create         
a struct, a private struct and  

1551
01:20:31,227 --> 01:20:35,829
use statics to have those be    
constants. So we also want to   

1552
01:20:35,898 --> 01:20:39,333
make sure that our alpha        
here is equal to one,           

1553
01:20:39,401 --> 01:20:41,935
in other words, we're only      
going to consider card face up  

1554
01:20:42,003 --> 01:20:46,006
if it's fully visible. The      
last thing we're going to need  

1555
01:20:46,074 --> 01:20:50,210
to do here also though is when  
we go into our animations,      

1556
01:20:50,279 --> 01:20:53,647
notice that we look for         
which cards are face up.        

1557
01:20:53,716 --> 01:20:57,551
By calling this self.face       
up card views, all right?       

1558
01:20:57,620 --> 01:21:01,221
And that is this thing right    
here. Well this is dynamically  

1559
01:21:01,290 --> 01:21:04,091
always calculating the cards    
that are face up, so            

1560
01:21:04,159 --> 01:21:06,560
if we have an animation         
here and it starts off and      

1561
01:21:06,629 --> 01:21:09,696
is going and then it tries to   
do its second part, it looks    

1562
01:21:09,764 --> 01:21:12,866
for the face drop cards again.  
When in fact, we just want      

1563
01:21:12,935 --> 01:21:16,870
this entire animation to apply  
to the original two cards that  

1564
01:21:16,938 --> 01:21:20,874
were chosen. So we can          
capture that by just having     

1565
01:21:20,943 --> 01:21:24,277
a little local variable. Here   
I am going to call it cards     

1566
01:21:24,346 --> 01:21:29,049
to animate that equal           
the face of cards at the time   

1567
01:21:29,117 --> 01:21:31,552
we start the animation. Okay    
so we are sort of capturing     

1568
01:21:31,620 --> 01:21:34,254
them here. And then going       
through and using this.         

1569
01:21:34,323 --> 01:21:38,324
So everywhere we're re-looking  
up these face up cards instead  

1570
01:21:38,393 --> 01:21:40,127
we want to use the cards        
to animate. So                  

1571
01:21:40,196 --> 01:21:44,131
let's go down here, this one,   
this one, this one, I'm just    

1572
01:21:44,200 --> 01:21:48,168
searching and replacing here    
all of those cards to animate.  

1573
01:21:48,237 --> 01:21:52,773
So let's try all of that and    
see if that has made it so      

1574
01:21:52,841 --> 01:21:57,577
that our nice, winning          
animation doesn't have that     

1575
01:21:57,646 --> 01:22:01,681
same problem. So, I've gotta    
find our matches again,         

1576
01:22:01,750 --> 01:22:03,851
whoops, let's see.              
There we go, there's a match.   

1577
01:22:03,919 --> 01:22:06,653
Now I'm gonna click on other    
cards and it's able to match    

1578
01:22:06,722 --> 01:22:11,158
them. And that long animation   
was still continuing. So        

1579
01:22:11,227 --> 01:22:14,027
that's much better UI. Now of   
course we're not gonna have     

1580
01:22:14,096 --> 01:22:17,698
our matching animation take so  
long, but by making it take so  

1581
01:22:17,766 --> 01:22:20,334
long we are able to find that   
problem. So let's put that      

1582
01:22:20,403 --> 01:22:25,472
back to what it was.            
I think we had like .6 and      

1583
01:22:25,541 --> 01:22:28,475
.75. Let's take another         
animation and slow it down,     

1584
01:22:28,543 --> 01:22:30,877
how about the animation where   
the cards don't match and       

1585
01:22:30,946 --> 01:22:32,679
we flip them back over? Okay,   

1586
01:22:32,748 --> 01:22:34,948
that's this animation           
of it flipping over and         

1587
01:22:35,017 --> 01:22:37,651
then here is where it           
flips the two mismatching       

1588
01:22:37,719 --> 01:22:39,520
cards over. So                  
lets slow both of those down.   

1589
01:22:39,588 --> 01:22:43,023
So that one down and            
slow this one down here.        

1590
01:22:46,695 --> 01:22:48,394
This was the matching           
animation.                      

1591
01:22:48,463 --> 01:22:52,599
I want the, the original flip   
animation there. All right, so  

1592
01:22:52,668 --> 01:22:54,868
we click, okay our              
original flip animation.        

1593
01:22:54,937 --> 01:22:57,370
Okay, it's going real slow,     
nothing seems to be a problem.  

1594
01:22:57,439 --> 01:23:00,574
Let's try another one           
that goes slow. And             

1595
01:23:00,642 --> 01:23:02,676
they both, okay.                
It all looks okay.              

1596
01:23:02,745 --> 01:23:05,411
Let's try clicking a little     
faster. How about this one and  

1597
01:23:05,480 --> 01:23:08,581
this one? All right,            
they both go slow.              

1598
01:23:08,650 --> 01:23:11,852
Wow, what's happening? Okay,    
what happened to that ten,      

1599
01:23:11,920 --> 01:23:15,221
that second card? It kind of,   
it didn't flip over.            

1600
01:23:15,290 --> 01:23:16,990
It kind of jumped, and          
then it flew around.            

1601
01:23:17,059 --> 01:23:18,726
Let's try it again to see       
what's happening here.          

1602
01:23:18,794 --> 01:23:20,928
Let's try this one and          
this one, here we go,           

1603
01:23:20,996 --> 01:23:23,796
whoa. Okay, so something        
is clearly wrong here. So       

1604
01:23:23,865 --> 01:23:28,301
what is happening here that's   
making that card go so wacky?   

1605
01:23:28,370 --> 01:23:31,972
Well, what's happening here is  
both the original card, that    

1606
01:23:32,041 --> 01:23:36,309
we flipped up, and the second   
card are both trying to flip    

1607
01:23:36,378 --> 01:23:40,614
the two cards face down. Okay,  
and so those two transforms,    

1608
01:23:40,682 --> 01:23:44,083
those two modifications         
here via transition,            

1609
01:23:44,152 --> 01:23:47,320
they're both trying to operate  
on the cards at the same time.  

1610
01:23:47,389 --> 01:23:49,823
And when you have something in  
the middle of transforming and  

1611
01:23:49,892 --> 01:23:51,258
another transform comes along,  

1612
01:23:51,327 --> 01:23:54,561
it's basically messing up       
the whole transform. Now,       

1613
01:23:54,630 --> 01:23:57,397
an easy fix for this one too    
which is let's just always      

1614
01:23:57,466 --> 01:23:59,933
let the latest card             
that was chosen                 

1615
01:24:00,001 --> 01:24:03,003
control the animation. That     
way they'll never interfere     

1616
01:24:03,072 --> 01:24:05,205
with each other because when    
the second one comes along and  

1617
01:24:05,273 --> 01:24:08,341
chooses it gets to do the       
animation. So let's do that by  

1618
01:24:08,410 --> 01:24:11,811
just creating a little var      
here, to keep track of our      

1619
01:24:11,880 --> 01:24:15,882
last chosen card view which     
will be a playing card view of  

1620
01:24:15,951 --> 01:24:19,686
course. And it'll start out     
nil, that's fine cuz we         

1621
01:24:19,755 --> 01:24:24,658
don't have a last chosen card   
view when we start out. And     

1622
01:24:24,726 --> 01:24:27,294
so every time that we go        
through and choose a card,      

1623
01:24:27,363 --> 01:24:29,529
okay right here,                
this is where we choose card.   

1624
01:24:29,597 --> 01:24:32,932
We're just gonna remember       
that our lastChosenCardView =   

1625
01:24:33,001 --> 01:24:37,203
chosenCardView. And then when   
we get down here to this        

1626
01:24:37,272 --> 01:24:40,841
animation of them closing down  
here, we're only gonna do this  

1627
01:24:40,909 --> 01:24:45,612
if the chosenCardView           
equals the last chosen card     

1628
01:24:49,551 --> 01:24:54,554
view. So,                       

1629
01:24:54,623 --> 01:24:56,990
that way, this animation        
right here can only happen,     

1630
01:24:57,059 --> 01:24:58,826
can only be controlled,         
by the last card.               

1631
01:24:58,894 --> 01:25:01,161
And they won't interfere        
with each other. So             

1632
01:25:01,230 --> 01:25:04,998
we need a self right here and   
let's try this.                 

1633
01:25:10,539 --> 01:25:13,940
All right so here's this one,   
it started animating,           

1634
01:25:14,009 --> 01:25:16,643
start this one and it worked.   

1635
01:25:16,711 --> 01:25:18,911
Okay it let the first one       
finish its animation and        

1636
01:25:18,980 --> 01:25:21,814
then it didn't do it, didn't    
do the flip and waited for      

1637
01:25:21,883 --> 01:25:26,353
the second one to do it.        
Okay, so these                  

1638
01:25:26,422 --> 01:25:29,556
are the kind of things when     
you're tuning your animation,   

1639
01:25:29,625 --> 01:25:32,059
that slowing them down          
will help you find these        

1640
01:25:32,127 --> 01:25:34,094
overlapped things.              
And you might think well,       

1641
01:25:34,163 --> 01:25:34,961
these cards are flipping so     

1642
01:25:35,030 --> 01:25:37,430
fast, users would never         
be able to do this, but         

1643
01:25:37,499 --> 01:25:40,701
they absolutely can. Users      
tend to click, click, click,    

1644
01:25:40,769 --> 01:25:43,403
click, click. Oops, they're     
clicking quickly to try and     

1645
01:25:43,471 --> 01:25:46,473
make things happen, so you      
wanna be prepared for that. So  

1646
01:25:46,541 --> 01:25:49,242
I'm gonna put these back        
to where they were.             

1647
01:25:49,311 --> 01:25:54,080
What do I have,                 
I don't know, 0.5 or            

1648
01:25:54,149 --> 01:25:59,653
something, 0.6,                 
something like that.            

1649
01:26:02,925 --> 01:26:06,025
Okay so, here we got            
this guy and that guy.          

1650
01:26:06,094 --> 01:26:08,495
Let's see if we can find        
a match here somewhere.         

1651
01:26:09,865 --> 01:26:14,334
This one. No, it's hard to      
find a match at this game.      

1652
01:26:14,403 --> 01:26:15,368
It's quite a difficult game.    

1653
01:26:15,437 --> 01:26:20,440
I found that I'm not really     
very good at it. There's        

1654
01:26:20,509 --> 01:26:23,210
that jack, I think that one     
there. Yeah, there's a match.   

1655
01:26:23,279 --> 01:26:27,681
No that moved.                  
King over here? There we,       

1656
01:26:27,750 --> 01:26:31,351
that was king of clubs, or      
king of spades. All right,      

1657
01:26:31,420 --> 01:26:35,955
well anyway, there we go,       
there's a match. Alright,       

1658
01:26:36,024 --> 01:26:39,092
I believe that's all I have     
time to show you. I think I've  

1659
01:26:39,161 --> 01:26:41,762
got through most of the stuff   
I want to show you, so your     

1660
01:26:41,830 --> 01:26:44,998
homework is just to animate     
your set. In very predefined    

1661
01:26:45,067 --> 01:26:50,404
ways. So you'll be using these  
exact same three mechanisms.    

1662
01:26:50,472 --> 01:26:52,271
Transitions, view properties,   
and                             

1663
01:26:52,340 --> 01:26:55,075
the dynamic animator.           
All right?                      

1664
01:26:55,143 --> 01:26:57,543
I'll see you all next week.     
>> For                          

1665
01:26:57,612 --> 01:27:07,019
more, please visit              
us at stanford.edu.             
