1
00:00:01,790 --> 00:00:07,180
Come back in this very first lesson of this section we're going to talk about view animations.

2
00:00:07,180 --> 00:00:10,760
And these are the most basic types of animations we can use.

3
00:00:10,870 --> 00:00:14,800
And even though they are basic they still get quite a lot done for us.

4
00:00:14,950 --> 00:00:21,650
So let's go out into school and I'm going to start a new project I'm going to call it view animations

5
00:00:25,490 --> 00:00:30,490
and for many of you animations I'm going to have two little blocks in my storyboard something I can

6
00:00:30,490 --> 00:00:32,640
actually see in our morning meeting.

7
00:00:32,810 --> 00:00:38,050
So I'm going to have a you I view this one

8
00:00:41,010 --> 00:00:51,700
and another top down one maybe make it a little different color maybe red on this one the same an orange

9
00:00:51,700 --> 00:00:52,240
one.

10
00:00:52,240 --> 00:00:54,560
Let me add that two outlets for them.

11
00:01:03,080 --> 00:01:06,370
The red box

12
00:01:08,820 --> 00:01:12,300
and the other one is called the Orange Box.

13
00:01:13,720 --> 00:01:17,720
And go back to my storyboard connect all of them properly.

14
00:01:18,830 --> 00:01:23,320
That's my orange box and this is my red box.

15
00:01:23,460 --> 00:01:27,560
And I also need to have a little action that's going to do my animation.

16
00:01:27,750 --> 00:01:39,460
So action function animate and in my storyboard I'm going to go ahead and buy them.

17
00:01:40,430 --> 00:01:42,570
This is going to be up here.

18
00:01:43,300 --> 00:01:50,110
I'm not really worried about the graphical representation of my app because this app is meant to do

19
00:01:50,170 --> 00:01:51,910
something else.

20
00:01:51,910 --> 00:01:59,900
And in here it's as animate my animate has a white text color.

21
00:02:00,060 --> 00:02:06,790
It also is connected to that action that we just made animate touch up inside.

22
00:02:07,030 --> 00:02:08,590
That's about that.

23
00:02:08,590 --> 00:02:12,520
Now let's go ahead and worry about all this action.

24
00:02:12,520 --> 00:02:18,160
Once again I should mention that I speed through these parts because I know you already know how to

25
00:02:18,160 --> 00:02:19,020
do them.

26
00:02:19,030 --> 00:02:25,000
It might be a bit of a repetitious task for some of you might be still useful but I think for most of

27
00:02:25,000 --> 00:02:27,400
us we don't really need to go to these anymore.

28
00:02:27,700 --> 00:02:29,860
So here's the first thing I'm going to do.

29
00:02:29,860 --> 00:02:37,970
I'm going to say you I view art begin animation and you can actually have an animation idea or a context

30
00:02:38,230 --> 00:02:42,330
if you want to perhaps pause it or do something with an animation.

31
00:02:42,490 --> 00:02:47,510
But I don't need to have any of those right now so I'm going to say both of these aren't.

32
00:02:47,800 --> 00:02:54,680
And then the only really important animation property that you have to define is the animation duration.

33
00:02:54,700 --> 00:03:08,140
So set animation duration too let's say to science and then you do all of your animations whatever you

34
00:03:08,140 --> 00:03:15,250
want to happen between that and then I'm going to say you live you dot com it's animations and that's

35
00:03:15,310 --> 00:03:16,650
all you have to do in here.

36
00:03:16,660 --> 00:03:18,030
As simple as that.

37
00:03:18,190 --> 00:03:23,210
So for me I'm going to go ahead and say let's go ahead and do some stuff in here.

38
00:03:23,440 --> 00:03:36,030
First of all I'm going to go and say Redbox box center should become a new C.G. point which is not to

39
00:03:36,100 --> 00:03:37,910
change it's X..

40
00:03:38,020 --> 00:03:49,260
So X is going to be a red box data center that x y y value is going to be red box data center that Y

41
00:03:49,660 --> 00:03:52,310
plus 400.

42
00:03:52,510 --> 00:03:57,020
So wherever it used to be Pushit 400 points down.

43
00:03:57,490 --> 00:04:05,390
And I'm going to do a very similar thing with the other one then I say Orange Box is going to be wherever

44
00:04:05,430 --> 00:04:06,480
it used to be.

45
00:04:06,490 --> 00:04:08,980
Maybe this time we go as much as 300.

46
00:04:09,010 --> 00:04:12,910
A little bit less and let's see the animation.

47
00:04:12,910 --> 00:04:17,150
Up until this point I'm going to run it on iPhone 8.

48
00:04:17,330 --> 00:04:20,050
I should get rid of that simulator at some point.

49
00:04:20,110 --> 00:04:28,290
I had to do a test for something totally different than I added a new simulator.

50
00:04:28,310 --> 00:04:39,900
So here we should be able to press that button as an animation for both the red and the Orange Box animate.

51
00:04:40,220 --> 00:04:41,600
Yes.

52
00:04:41,660 --> 00:04:44,270
So they both end up getting that animation.

53
00:04:44,270 --> 00:04:49,460
And of course every time we press it they're going to do the same thing because we haven't told it to

54
00:04:49,460 --> 00:04:51,790
go to a specific place.

55
00:04:51,920 --> 00:04:53,660
You have just told him to go.

56
00:04:54,050 --> 00:04:57,000
And on top of the existing values.

57
00:04:57,140 --> 00:05:04,750
Now here's a very interesting thing that you have to be mindful of you can't sit different animation

58
00:05:04,750 --> 00:05:07,990
durations for different pieces of animation.

59
00:05:08,140 --> 00:05:14,460
So you could essentially go ahead and select this one thing here and say Make it eight.

60
00:05:14,470 --> 00:05:19,960
So if you're on this animation now as you can imagine the first piece of animation will happen within

61
00:05:19,960 --> 00:05:20,950
two seconds.

62
00:05:21,100 --> 00:05:24,440
The last the second one will happen within eight seconds.

63
00:05:25,460 --> 00:05:28,650
And the red one has already landed in two seconds.

64
00:05:28,820 --> 00:05:31,500
The orange one is taking its sweet time.

65
00:05:33,040 --> 00:05:34,060
And that's about that.

66
00:05:34,060 --> 00:05:37,570
So we managed to have a very basic animation.

67
00:05:37,630 --> 00:05:43,950
There are so many options you can out for instance I could add an option for the animation pair of.

68
00:05:44,170 --> 00:05:55,750
So you guys you got set animation curve which has you I view that animation curve Dot and I could go

69
00:05:55,750 --> 00:05:58,080
on and say for instance it's linear.

70
00:05:58,530 --> 00:06:03,550
For those of you who might have you know this might be the first time you are noticing something like

71
00:06:03,550 --> 00:06:09,760
that animation colors essentially they refer to the way the animation plays out at the beginning or

72
00:06:09,810 --> 00:06:10,810
at the end.

73
00:06:10,810 --> 00:06:14,020
So linear means they goes with the same speed.

74
00:06:14,050 --> 00:06:17,370
There is no acceleration or deceleration.

75
00:06:17,380 --> 00:06:23,250
Essentially something like ease in it means whenever it's about to reach a keyframe.

76
00:06:23,290 --> 00:06:31,120
In the Funimation let it ease into it or ease in and out means from both sides you have to have to do

77
00:06:31,120 --> 00:06:31,960
the same thing.

78
00:06:32,100 --> 00:06:37,900
I'm actually going to make most of these to be one of them to be actually ease in I'm going to make

79
00:06:37,990 --> 00:06:46,000
use of them to have the same animation and the same duration but I'm going to make a UI of you animation

80
00:06:46,000 --> 00:06:52,210
for that orange box to be linear hoping that we can actually see the difference between them.

81
00:06:52,410 --> 00:06:58,810
So Lovatt I press to animate by then we will not it's not the red box will have an ease into animation

82
00:06:59,260 --> 00:07:02,440
while the orange box will do everything in a linear mode.

83
00:07:02,740 --> 00:07:06,260
So just do it yes.

84
00:07:06,530 --> 00:07:11,810
As you can notice the orange one immediately starts moving one the red one takes a little while to get

85
00:07:11,810 --> 00:07:12,490
the start.

86
00:07:13,440 --> 00:07:13,860
OK.

87
00:07:14,000 --> 00:07:21,910
So with that this is essentially a beginning and a very basic introduction on how to use you eye view

88
00:07:21,920 --> 00:07:24,000
animations in the next lesson.

89
00:07:24,010 --> 00:07:29,920
We'll talk about you or view animation blocks even like you mentioned but also a more advanced way of

90
00:07:29,920 --> 00:07:31,570
doing things that is still a lot.

91
00:07:31,570 --> 00:07:35,450
You can get done videos of these animations.

92
00:07:35,620 --> 00:07:38,490
So give them a shot and then move on to the next lesson.