1
00:00:01,080 --> 00:00:05,670
This in this area, we're going to learn about the animation speed curve, which would actually just

2
00:00:05,670 --> 00:00:11,070
specify the speed curve of the animation, what what this really means.

3
00:00:11,100 --> 00:00:13,160
I'm going to show you actually no success.

4
00:00:13,560 --> 00:00:19,290
So let's jump back in here and type in a comment of animation.

5
00:00:24,990 --> 00:00:26,100
Speed curve.

6
00:00:31,040 --> 00:00:36,620
Now, let's, first of all, create a new keyframe that's called the Swans at Keyframe, and we call

7
00:00:36,620 --> 00:00:41,990
this motion timing on the score and timing.

8
00:00:46,070 --> 00:00:51,560
This is going to go from a left zero pixels.

9
00:00:54,620 --> 00:00:59,180
I can also leave it at zero because, well, zero, no matter what you wanted to report after zero is

10
00:00:59,180 --> 00:00:59,860
still zero.

11
00:00:59,870 --> 00:01:01,370
So let's just leave it at zero.

12
00:01:02,510 --> 00:01:08,900
Then it's going to go to and it's going to go to left six hundred pixels.

13
00:01:10,010 --> 00:01:11,810
But also I'm going to change the color.

14
00:01:12,950 --> 00:01:15,300
So background color on same blue.

15
00:01:16,460 --> 00:01:21,680
Now you can see I don't I'm not specifying here starting color this because we're going to specify it

16
00:01:21,680 --> 00:01:22,870
actually in our depth.

17
00:01:23,300 --> 00:01:29,570
So let's take our div and with a class of animation.

18
00:01:33,570 --> 00:01:35,160
The timing function.

19
00:01:36,460 --> 00:01:37,630
The function.

20
00:01:41,570 --> 00:01:43,390
This is how I called it, isn't it?

21
00:01:43,420 --> 00:01:45,040
So let me just really quickly check it.

22
00:01:46,080 --> 00:01:48,420
Animation therapy function, there it is, so.

23
00:01:49,940 --> 00:01:54,760
Let's go back into CNN, so animation, timing, function, everything here again, we're going to the

24
00:01:54,970 --> 00:01:55,510
IT with.

25
00:01:58,630 --> 00:02:05,050
Of one hundred pixels and a hundred, but this isn't going to go with the height of 50 pixels is going

26
00:02:05,050 --> 00:02:09,290
to look like a rectangle X like this one right here.

27
00:02:09,340 --> 00:02:12,640
We just need Morio to jump around on this and hate that.

28
00:02:12,640 --> 00:02:15,680
We thought we would have an animation, but this is our real documents.

29
00:02:15,680 --> 00:02:18,770
So we are that threat to them here.

30
00:02:20,420 --> 00:02:27,580
OK, now let's also give it a background, color, background, color of of red.

31
00:02:30,120 --> 00:02:31,770
The position, it's a position relative.

32
00:02:32,070 --> 00:02:34,260
OK, we are done with this part.

33
00:02:37,420 --> 00:02:40,730
We should now see our Dodi's there's a square.

34
00:02:41,000 --> 00:02:42,390
Now let's start moving it.

35
00:02:43,210 --> 00:02:45,030
We want to move our square.

36
00:02:45,730 --> 00:02:51,970
That's we need our animation name, which we named animation, emotion, timing.

37
00:02:53,560 --> 00:02:58,270
Then we need our animation duration, let's say five seconds.

38
00:02:59,940 --> 00:03:04,860
And animation iteration count going to go with Infinite.

39
00:03:05,760 --> 00:03:08,160
OK, so this was just loop infinitely.

40
00:03:11,680 --> 00:03:18,470
The pressure, so it's going to change and translate now, we don't want this to see how this looks

41
00:03:18,510 --> 00:03:20,730
back, it jumps over there.

42
00:03:21,280 --> 00:03:25,240
So how can we fix it where we need our animation timing function?

43
00:03:26,830 --> 00:03:34,090
So let's go back into animation and we're going to use our animation timing function, and first we

44
00:03:34,090 --> 00:03:42,920
will see what is does and this will actually this was specify the animation with a slow start, then

45
00:03:42,950 --> 00:03:47,400
it fast and then a slow end game.

46
00:03:47,710 --> 00:03:50,230
And it's actually the default value also.

47
00:03:50,230 --> 00:03:50,650
So.

48
00:03:51,220 --> 00:03:54,010
Oh, yeah, you do need to specify here pixels.

49
00:03:56,370 --> 00:03:57,450
So let's do this again.

50
00:03:59,690 --> 00:04:00,110
No.

51
00:04:02,620 --> 00:04:06,010
They're just typing Formiga from.

52
00:04:08,320 --> 00:04:09,200
OK.

53
00:04:14,170 --> 00:04:21,130
So let's refer to this again, is going to go from red and blue is the next step will be linear.

54
00:04:22,630 --> 00:04:28,360
So here, animation, timing, function, you need to choose linear.

55
00:04:31,360 --> 00:04:36,410
And this is just specify animation with the same speed from start to end.

56
00:04:36,820 --> 00:04:39,670
This would be a linear animation.

57
00:04:40,690 --> 00:04:48,690
It is refresh to refresh again, he starts linear, and it's the same speed throughout the entire animation.

58
00:04:49,100 --> 00:04:53,990
Now, next up, we have is in we should have a slow start.

59
00:04:54,010 --> 00:05:00,580
So let me just copy this and ease in kids with a slow start.

60
00:05:00,580 --> 00:05:02,800
And then we have big mo quicker today and.

61
00:05:06,720 --> 00:05:16,380
Next up, we have is out, which is actually the opposite, so we will have a slow and oh out there

62
00:05:16,380 --> 00:05:16,630
we go.

63
00:05:16,650 --> 00:05:18,030
So let's refresh it again.

64
00:05:20,550 --> 00:05:23,300
And start to be quicker and then go slowly to the end.

65
00:05:26,430 --> 00:05:36,970
OK, and then we have is in out, which exact, as the name says, it's going to have a slow start than

66
00:05:37,080 --> 00:05:40,200
a normal bell and then go slowly to the end.

67
00:05:41,170 --> 00:05:41,970
The save.

68
00:05:43,450 --> 00:05:51,800
OK, so let's refresh does again, slow start going a bit quicker and then slowly and not the last one.

69
00:05:51,820 --> 00:05:55,360
I want to show you and you can play a lot along with this on this Kubic.

70
00:05:57,370 --> 00:06:03,890
Is the Kubic bizarre and this will let you define your own value in a cubic function?

71
00:06:04,930 --> 00:06:11,590
No, it is a bit more complex and I would suggest that you if you want to go more deeper into this,

72
00:06:12,130 --> 00:06:14,600
then, well, need to learn about this a bit.

73
00:06:14,980 --> 00:06:17,020
So let's go with some crazy ideas.

74
00:06:17,020 --> 00:06:28,360
Let's say six point one seven five comma zero point one eight five.

75
00:06:28,480 --> 00:06:32,100
This is just a few values that I that I tried out.

76
00:06:32,110 --> 00:06:33,810
We could do a lot of values here.

77
00:06:33,820 --> 00:06:36,790
So then zero point thirty two.

78
00:06:36,790 --> 00:06:39,490
And the last one is, let's say free.

79
00:06:39,790 --> 00:06:41,380
This is these are speed.

80
00:06:41,380 --> 00:06:48,940
So it at each specific speed at this specific time in the animation, the animation will have this speed

81
00:06:49,420 --> 00:06:51,250
to seven high.

82
00:06:51,620 --> 00:06:53,530
Okay, so let's try this out.

83
00:06:53,540 --> 00:06:55,520
Let's check out the animation as it refresh.

84
00:06:56,260 --> 00:06:59,310
So it's going to be quick, then slow, then quick.

85
00:06:59,320 --> 00:07:02,560
Again, this is also a bit of Jidda.

86
00:07:02,560 --> 00:07:04,870
Within it you can see two to two.

87
00:07:06,950 --> 00:07:13,580
OK, I would suggest to try it out for yourself and see what's best for you or, well, which kind of

88
00:07:13,580 --> 00:07:16,940
cubic Beziers you will need for a different kind of animation's.

89
00:07:17,400 --> 00:07:20,090
OK, so that's pretty much it for the speed curvature.