1
00:00:00,000 --> 00:00:04,660
[MUSIC]

2
00:00:04,660 --> 00:00:09,853
Hãy để chúng tôi có được một cái nhìn tổng quan ngắn gọn về hỗ trợ hoạt hình trong góc cạnh trước khi chúng tôi đi và

3
00:00:09,853 --> 00:00:15,820
thử tay của chúng tôi thực sự thực hiện một số hình ảnh động trong ứng dụng góc cạnh của chúng tôi.

4
00:00:17,010 --> 00:00:18,290
Như bạn nhận ra,

5
00:00:18,290 --> 00:00:23,800
bản thân hình ảnh động không thêm vào chức năng của ứng dụng Angular của bạn.

6
00:00:23,800 --> 00:00:27,210
Sau đó, câu hỏi đặt ra, tại sao sử dụng hình ảnh động?

7
00:00:27,210 --> 00:00:31,420
Bây giờ nếu bạn nhìn vào nó từ trải nghiệm người dùng, hoặc

8
00:00:31,420 --> 00:00:36,250
quan điểm thiết kế giao diện người dùng, sau đó bạn bắt đầu thấy rằng hình ảnh động

9
00:00:36,250 --> 00:00:40,860
có một ý nghĩa và một mục đích cho việc sử dụng chúng trong một ứng dụng.

10
00:00:41,860 --> 00:00:46,360
Việc đưa ra phản hồi trực quan cho người dùng về

11
00:00:46,360 --> 00:00:49,560
những điều đang xảy ra trong ứng dụng góc cạnh của bạn.

12
00:00:49,560 --> 00:00:54,920
Vì vậy, bạn có thể có một ứng dụng hoàn toàn bereft của hình ảnh động và

13
00:00:54,920 --> 00:00:58,050
rằng nó vẫn cung cấp cùng một tập hợp các chức năng.

14
00:00:58,050 --> 00:01:00,710
Vì vậy, đó là một cái gì đó mà chúng ta cần phải ghi nhớ

15
00:01:00,710 --> 00:01:05,280
khi chúng tôi đang giới thiệu hình ảnh động vào ứng dụng góc cạnh của chúng tôi.

16
00:01:05,280 --> 00:01:12,150
Hình ảnh động là không cần thiết hoặc cần thiết nhưng

17
00:01:12,150 --> 00:01:18,940
họ thêm rằng ít gia vị để ứng dụng góc cạnh của bạn, nếu bạn đang giữ quan điểm đó trong

18
00:01:18,940 --> 00:01:24,090
tâm trí của bạn sau đó bạn sẽ tiếp cận hình ảnh động từ một quan điểm hoàn toàn khác nhau.

19
00:01:25,380 --> 00:01:31,890
Nó giống như không thêm quá nhiều muối vào các món ăn của bạn chỉ vì muối thêm hương vị.

20
00:01:33,030 --> 00:01:36,340
Để nhiều muối cũng làm hỏng món ăn của bạn.

21
00:01:36,340 --> 00:01:38,630
Điều tương tự với hình ảnh động quá.

22
00:01:38,630 --> 00:01:42,370
Quá nhiều hình ảnh động và bạn kết thúc với một người dùng bối rối.

23
00:01:43,400 --> 00:01:48,790
Nhưng hình ảnh động, được thêm vào một cách tinh tế để đưa ra gợi ý cho người dùng, hoặc

24
00:01:48,790 --> 00:01:55,545
đưa ra phản hồi trực quan cho người dùng, thêm rất nhiều giá trị cho ứng dụng góc cạnh của bạn.

25
00:01:55,545 --> 00:02:00,295
Bây giờ may mắn thay, khung vật liệu góc cạnh mà chúng tôi đã sử dụng trong

26
00:02:00,295 --> 00:02:05,825
ứng dụng góc cạnh của chúng tôi, đi kèm với riêng nó được xây dựng trong bộ hình ảnh động.

27
00:02:05,825 --> 00:02:10,074
Thật vậy, đó là lý do tại sao chúng tôi bao gồm mô-đun hoạt hình trình duyệt.

28
00:02:10,074 --> 00:02:15,060
Vào ứng dụng góc cạnh của chúng tôi ngay từ đầu bởi vì

29
00:02:15,060 --> 00:02:19,950
vật liệu góc cạnh đã tận dụng sự hỗ trợ hoạt

30
00:02:21,350 --> 00:02:25,445
hình mà góc cung cấp thông qua hoặc nó là hoạt hình.

31
00:02:25,445 --> 00:02:30,135
Vì vậy, thư viện vật liệu góc

32
00:02:30,135 --> 00:02:35,840
sử dụng các hình ảnh động được đề xuất đi kèm với thiết kế vật liệu.

33
00:02:35,840 --> 00:02:38,700
Những thứ như, ví dụ, khi bạn nhấp vào một nút,

34
00:02:38,700 --> 00:02:43,980
các hiệu ứng gợn sóng mà bạn thấy trên nút và mở rộng tinh tế,

35
00:02:43,980 --> 00:02:50,220
và thu nhỏ các phần khác nhau của chế độ xem của bạn, v.v.

36
00:02:50,220 --> 00:02:55,010
Những

37
00:02:55,010 --> 00:02:58,840
điều này đã được đề xuất bởi cách tiếp cận thiết kế vật liệu, và vì vậy vật liệu góc cạnh đã áp dụng nhiều trong số đó.

38
00:02:58,840 --> 00:03:03,140
Vì vậy, ngay cả khi không đặt một cách rõ ràng trong nỗ lực,

39
00:03:03,140 --> 00:03:08,100
bạn tự động nhận được một số hình ảnh động cần thiết vào

40
00:03:08,100 --> 00:03:11,950
ứng dụng góc cạnh của bạn chỉ bằng cách sử dụng vật liệu góc cạnh.

41
00:03:11,950 --> 00:03:17,640
Nhưng giả sử bạn muốn thêm gia vị của riêng bạn vào hỗn hợp.

42
00:03:17,640 --> 00:03:21,030
Sau đó, làm thế nào để bạn tiếp cận hình ảnh động trong góc cạnh?

43
00:03:21,030 --> 00:03:25,510
Đây là những gì chúng ta sẽ nhanh chóng xem xét trong bài giảng này.

44
00:03:25,510 --> 00:03:31,091
Và sau đó chuyển sang tập thể dục nơi chúng tôi sẽ thực hiện fu và xem nếu chúng ta có

45
00:03:31,091 --> 00:03:37,402
ý nghĩa hoặc nếu họ làm cho một sự khác biệt để cách bạn cảm nhận ứng dụng Angular của bạn.

46
00:03:39,145 --> 00:03:42,053
Ý tưởng đằng sau sự hỗ trợ của Angular cho

47
00:03:42,053 --> 00:03:46,723
hình ảnh động là nó cho phép bạn xây dựng hình ảnh động với

48
00:03:46,723 --> 00:03:52,270
hiệu suất gần bản địa của những gì bạn sẽ nhận được với hình ảnh động CSS thuần túy.

49
00:03:52,270 --> 00:03:55,300
Bây giờ bạn có thể ngay lập tức tự hỏi trong tâm trí của bạn,

50
00:03:55,300 --> 00:03:57,690
tại sao không chỉ sử dụng hình ảnh động CSS tinh khiết?

51
00:03:57,690 --> 00:04:01,810
Thật vậy, bạn cũng có thể làm điều đó, nhưng không có gì ngăn cản bạn sử dụng

52
00:04:01,810 --> 00:04:04,930
hoạt hình CSS thuần túy trong ứng dụng Angular của bạn.

53
00:04:04,930 --> 00:04:09,880
Nhưng lợi thế của việc sử dụng

54
00:04:09,880 --> 00:04:14,660
phương pháp tiếp cận góc để giới thiệu hình ảnh động là góc cạnh,

55
00:04:14,660 --> 00:04:19,280
trước hết, tận dụng sự hỗ trợ từ API hình ảnh động web được

56
00:04:19,280 --> 00:04:24,620
hỗ trợ trong các phiên bản hiện đại hơn của tất cả các trình duyệt đó.

57
00:04:24,620 --> 00:04:29,540
Bây giờ, vì vậy nếu phiên bản trình duyệt của bạn đã hỗ trợ Web Animations API,

58
00:04:29,540 --> 00:04:32,380
sau đó Angular chỉ cần tận dụng một sự khởi đầu để

59
00:04:32,380 --> 00:04:36,640
hỗ trợ các hoạt hình mà bạn sẽ bao gồm trong ứng dụng Angular của bạn.

60
00:04:36,640 --> 00:04:39,970
Nếu không thì bạn cần phải sử dụng một polyfill

61
00:04:39,970 --> 00:04:45,270
gọi là web-animations.min.js vào ứng dụng Angular của bạn.

62
00:04:45,270 --> 00:04:49,190
Trong các bài tập, chúng ta sẽ bắt đầu với giả định rằng chúng ta đang nhắm mục tiêu các

63
00:04:49,190 --> 00:04:53,355
trình duyệt hiện đại, vì vậy tôi không bao gồm một cách rõ ràng polyfill.

64
00:04:53,355 --> 00:04:59,625
Nếu bạn quyết định làm điều đó, tài liệu hình ảnh động góc cạnh

65
00:04:59,625 --> 00:05:05,395
rõ ràng cho bạn biết làm thế nào để điền vào đó để nhắm mục tiêu các trình duyệt cũ hơn.

66
00:05:05,395 --> 00:05:07,425
Vì vậy, một lần nữa, trở lại với câu hỏi,

67
00:05:07,425 --> 00:05:13,440
tại sao không sử dụng hoạt hình CSS thuần túy hơn là sử dụng hoạt hình góc?

68
00:05:13,440 --> 00:05:15,850
Bây giờ đây là nơi

69
00:05:15,850 --> 00:05:20,560
lợi thế của việc sử dụng hoạt hình Angular trong ứng dụng của bạn đi đầu.

70
00:05:20,560 --> 00:05:24,710
Thực tế là hình ảnh động Angular được kết hợp chặt chẽ

71
00:05:24,710 --> 00:05:28,710
với mã của bạn mà bạn viết cho ứng dụng Angular của bạn.

72
00:05:28,710 --> 00:05:32,740
Và do đó, bạn có thể kích hoạt nhiều trong số những hình ảnh động gắn

73
00:05:32,740 --> 00:05:37,330
trực tiếp vào cách ứng dụng góc cạnh của bạn đang phát triển, và

74
00:05:37,330 --> 00:05:40,560
những gì đang xảy ra trong ứng dụng góc cạnh của bạn.

75
00:05:40,560 --> 00:05:45,610
Vì vậy, bạn có thể buộc nó vào vòng đời của các thành phần của bạn.

76
00:05:45,610 --> 00:05:50,356
Bạn có thể buộc nó vào các giai đoạn khác nhau của cách hình chiếu thay đổi chính nó

77
00:05:50,356 --> 00:05:53,290
trong khi bạn đang kết xuất hình chiếu.

78
00:05:53,290 --> 00:06:00,130
Và vì vậy lợi thế mà bạn nhận được từ việc sử dụng thư viện hình ảnh động Angular,

79
00:06:00,130 --> 00:06:05,870
thay vì hoạt hình CSS thuần túy, là một cái gì đó đáng xem xét.

80
00:06:05,870 --> 00:06:09,140
Làm thế nào để chúng ta tiếp cận hình ảnh động trong Angular?

81
00:06:09,140 --> 00:06:12,730
Bản thân các hoạt hình được xây dựng xung quanh các trạng thái và

82
00:06:12,730 --> 00:06:17,850
sự chuyển tiếp giữa các trạng thái trong khuôn khổ Angular, vì vậy

83
00:06:17,850 --> 00:06:22,440
chúng ta định nghĩa các trạng thái khác nhau, trạng thái có thể là bất cứ điều gì nhưng

84
00:06:22,440 --> 00:06:27,500
bạn muốn định nghĩa như là một trạng thái từ góc nhìn của hoạt hình.

85
00:06:27,500 --> 00:06:31,290
Bất kỳ thay đổi trạng thái nào mà bạn muốn gây ra đều

86
00:06:31,290 --> 00:06:35,330
có thể kích hoạt hiệu ứng hoạt hình đi vào hình ảnh.

87
00:06:35,330 --> 00:06:39,840
Vì vậy, chuyển tiếp dọc theo các trạng thái sẽ kích hoạt hành vi hoạt hình

88
00:06:39,840 --> 00:06:41,550
trong ứng dụng góc cạnh của bạn.

89
00:06:41,550 --> 00:06:46,080
Như chúng ta sẽ thấy trong slide tiếp theo, nơi tôi sẽ chỉ cho bạn một ví dụ về

90
00:06:46,080 --> 00:06:50,468
cách bạn có thể sử dụng băng và chuyển tiếp để kích hoạt hoạt hình.

91
00:06:50,468 --> 00:06:56,260
Vì vậy, các khía cạnh hoạt hình của ứng dụng góc cạnh của bạn

92
00:06:56,260 --> 00:07:01,420
được xác định bên trong trang trí thành phần mà bạn sử dụng trong các thành phần của bạn.

93
00:07:01,420 --> 00:07:06,140
Vì vậy, trang trí thành phần có một màu sắc động sản mà bạn

94
00:07:06,140 --> 00:07:11,600
sẽ sử dụng để xác định các giá trị gây nên cho hình ảnh động của bạn.

95
00:07:11,600 --> 00:07:13,650
Vì vậy, tôi đã sử dụng từ kích hoạt.

96
00:07:13,650 --> 00:07:17,400
Trong các bài tập, bạn sẽ thấy làm thế nào chúng ta sẽ thực hiện các trigger cho

97
00:07:17,400 --> 00:07:22,370
hình ảnh động và làm thế nào chúng ta sẽ áp dụng các trigger cho các yếu tố mẫu khác nhau,

98
00:07:22,370 --> 00:07:27,520
và sau đó kích hoạt những hình ảnh động trong một số trường hợp nhất định.

99
00:07:27,520 --> 00:07:31,680
Và ngoài ra, khi bạn cần sử dụng hình ảnh động trong

100
00:07:31,680 --> 00:07:36,550
ứng dụng Angular của bạn, trước hết, bạn cần phải nhập mô-đun hình ảnh động của trình duyệt.

101
00:07:36,550 --> 00:07:41,330
Chúng tôi đã thực hiện điều đó trong bài tập đầu tiên của chúng tôi vì

102
00:07:41,330 --> 00:07:45,840
mô-đun hoạt hình của trình duyệt được yêu cầu để hỗ trợ tài liệu góc cạnh.

103
00:07:45,840 --> 00:07:50,269
Bây giờ, ngoài ra, khi bạn đang triển khai hoạt hình trong các thành phần của bạn.

104
00:07:51,280 --> 00:07:55,840
Sau đó, bạn sẽ cần sự giúp đỡ của các lớp bán kính như kích hoạt, trạng thái

105
00:07:55,840 --> 00:07:56,610
, phong cách, animate,

106
00:07:56,610 --> 00:08:01,550
transition, mà phải được nhập khẩu từ thư viện hình ảnh động Angular.

107
00:08:01,550 --> 00:08:08,010
Và chúng tôi sẽ làm điều đó trong mỗi thành phần đòi hỏi phải sử dụng hình ảnh động.

108
00:08:08,010 --> 00:08:12,930
Như tôi đã đề cập trong slide trước, hành vi hoạt hình trong

109
00:08:12,930 --> 00:08:17,960
ứng dụng Angular của bạn xoay quanh trạng thái và chuyển tiếp giữa các trạng thái. Tiểu

110
00:08:17,960 --> 00:08:21,470
bang có thể là bất cứ điều gì mà bạn định nghĩa là một tiểu bang.

111
00:08:21,470 --> 00:08:26,280
Như bạn sẽ thấy trong ví dụ sau trong bài tập đầu tiên sau bài

112
00:08:26,280 --> 00:08:30,650
giảng này, bạn đã được xác định 2 trạng thái được gọi là hiển thị và ẩn.

113
00:08:30,650 --> 00:08:33,600
Từ tên của tiểu bang, bạn sẽ tự động

114
00:08:33,600 --> 00:08:37,920
bắt đầu đoán những gì hai tiểu bang này ngụ ý.

115
00:08:37,920 --> 00:08:42,800
Bây giờ khi bạn di chuyển từ trạng thái hiển thị sang trạng thái ẩn thì quá trình chuyển đổi

116
00:08:42,800 --> 00:08:46,970
từ trạng thái hiển thị sang trạng thái ẩn sẽ kích hoạt một loại hình ảnh động.

117
00:08:46,970 --> 00:08:50,780
Vì vậy, có lẽ bạn sẽ ẩn một phần tử trong

118
00:08:52,170 --> 00:08:56,360
tầm nhìn của bạn bằng cách thay đổi độ mờ đục của phần tử,

119
00:08:56,360 --> 00:09:00,240
độ mờ đục có nghĩa là phần tử trong suốt như thế nào và độ mờ đục của

120
00:09:00,240 --> 00:09:05,260
một có nghĩa là phần tử hoàn toàn mờ đục và có thể nhìn thấy trên màn hình.

121
00:09:05,260 --> 00:09:10,360
Nếu bạn đặt độ mờ bằng 0 phần tử hoàn toàn biến mất khỏi màn hình.

122
00:09:10,360 --> 00:09:13,260
Chúng tôi không loại bỏ phần tử đó từ

123
00:09:13,260 --> 00:09:18,110
bằng cách đơn giản ẩn phần tử đó bằng cách thay đổi độ mờ của nó.

124
00:09:18,110 --> 00:09:21,350
Vì vậy, cách đó sẽ là thứ mà bạn có thể kích hoạt.

125
00:09:21,350 --> 00:09:24,070
Tương tự, bạn có thể thay đổi kích thước của một phần tử.

126
00:09:24,070 --> 00:09:30,740
Bạn có thể mở rộng hoặc co lại kích thước của một phần tử bằng cách áp dụng một biến đổi cho

127
00:09:30,740 --> 00:09:36,470
thuộc tính phần tử đó bằng cách sử dụng biến đổi tỷ lệ cho phần tử.

128
00:09:36,470 --> 00:09:41,190
Chúng ta sẽ thấy các ví dụ như tôi đã nói trong bài tập sau.

129
00:09:41,190 --> 00:09:45,670
Vì vậy, tất cả các hình ảnh động mà bạn mô tả

130
00:09:45,670 --> 00:09:49,590
trong ứng dụng Angular của bạn trong chỉ thị thành phần bằng cách sử dụng các thuộc tính hoạt hình

131
00:09:49,590 --> 00:09:54,620
sẽ xoay quanh trạng thái và chuyển tiếp giữa các trạng thái.

132
00:09:54,620 --> 00:09:58,350
Khi bạn nói về các trạng thái và sự chuyển tiếp, có một vài

133
00:09:58,350 --> 00:10:03,400
trạng thái đặc biệt mà chúng ta cần cân nhắc khi chúng ta định nghĩa những chuyển tiếp này.

134
00:10:03,400 --> 00:10:06,810
Một trong những trạng thái đó được gọi là trạng thái vô hiệu.

135
00:10:06,810 --> 00:10:09,580
Và yếu tố đó không phải là trên màn hình. M@@

136
00:10:09,580 --> 00:10:13,240
ột phần tử hoặc hình chiếu hạt không được gắn vào hình chiếu

137
00:10:13,240 --> 00:10:15,880
sẽ được coi là ở trạng thái vô hiệu.

138
00:10:15,880 --> 00:10:18,510
Vì vậy, khi các yếu tố xuất hiện vào quan điểm,

139
00:10:18,510 --> 00:10:23,940
rằng nếu nó được gắn vào ví dụ, sau đó các yếu tố chuyển từ

140
00:10:23,940 --> 00:10:29,590
trạng thái void thành một trong các trạng thái hiện có của phần tử đó.

141
00:10:29,590 --> 00:10:30,410
Vì vậy, trong trường hợp đó,

142
00:10:30,410 --> 00:10:35,680
bạn có thể xác định một sự chuyển tiếp xung quanh từ đi từ void sang một trạng thái nhất định.

143
00:10:35,680 --> 00:10:40,580
Tương tự, bạn cũng có một Tiểu bang khác gọi là tiểu bang ký tự đại diện hoặc

144
00:10:40,580 --> 00:10:45,870
nó được định nghĩa bởi ngôi sao, nghĩa là bạn không quan tâm nó là trạng thái nào.

145
00:10:45,870 --> 00:10:48,464
Vì vậy, nếu bạn cần phải xác định một chuyển tiếp bạn có thể nói,

146
00:10:48,464 --> 00:10:52,832
nếu bạn đang đi từ một trạng thái void sang trạng thái sao, có nghĩa là từ trạng thái void sang bất kỳ

147
00:10:52,832 --> 00:10:58,260
trạng thái nào khác mà bạn đang chuyển tiếp thì bạn có thể áp dụng một biến đổi cụ thể.

148
00:10:58,260 --> 00:11:02,970
Vì vậy, đây là hai cách đặc biệt để xác định các trạng thái nhất định

149
00:11:02,970 --> 00:11:07,130
khi bạn xác định hoạt hình của bạn trong trang trí thành phần.

150
00:11:08,570 --> 00:11:13,430
Vì vậy, đặc biệt, có một vài cách để

151
00:11:13,430 --> 00:11:18,410
mô tả quá trình chuyển đổi được đặc biệt quan tâm đến khóa học.

152
00:11:18,410 --> 00:11:23,050
Một sự chuyển đổi từ trạng thái void sang trạng thái bất kỳ có thể được mô tả bằng cách sử dụng

153
00:11:23,050 --> 00:11:27,876
dấu hai chấm nhập, thay vì nói sao mũi tên void.

154
00:11:27,876 --> 00:11:32,520
Vì vậy, bạn sẽ thấy rằng chúng ta sẽ sử dụng mũi tên

155
00:11:32,520 --> 00:11:34,610
để mô tả sự chuyển tiếp giữa nhà nước.

156
00:11:34,610 --> 00:11:40,540
Vì vậy, đó là cú pháp mà bạn sẽ thấy tôi sử dụng khi tôi xây dựng quá trình chuyển đổi.

157
00:11:40,540 --> 00:11:41,260
Tương tự như vậy,

158
00:11:41,260 --> 00:11:46,700
một khoảng trống cho bất kỳ trạng thái nào khác có thể được mô tả bằng cách sử dụng dấu hai chấm nhập.

159
00:11:46,700 --> 00:11:50,060
Vì vậy, có nghĩa là chế độ xem này đang nhập

160
00:11:50,060 --> 00:11:52,760
vào chế độ xem đang được đặt ra trên màn hình.

161
00:11:52,760 --> 00:11:56,190
Tương tự, một sự chuyển tiếp từ bất kỳ trạng thái nào sang trạng thái void,

162
00:11:56,190 --> 00:12:00,130
có nghĩa là bạn đang loại bỏ phần tử đó khỏi chế độ xem.

163
00:12:00,130 --> 00:12:05,510
Đó cũng sẽ là, có thể được xác định như là dấu hai chấm để lại, có

164
00:12:05,510 --> 00:12:09,400
nghĩa là yếu tố này là để lại từ quan điểm cụ thể đó.

165
00:12:09,400 --> 00:12:13,860
Vì vậy, bạn sẽ thấy tôi sử dụng đại tràng nhập và đại tràng để lại cũng nơi tôi mô tả

166
00:12:14,970 --> 00:12:21,130
sự chuyển tiếp trong bài tập thứ hai mà bạn sẽ thấy trong bài học này.

167
00:12:21,130 --> 00:12:26,945
Vì vậy, với sự hiểu biết nhanh chóng về hình ảnh động trong góc cạnh.

168
00:12:26,945 --> 00:12:29,935
Hãy nhìn vào cách chúng ta thực sự viết mã.

169
00:12:29,935 --> 00:12:35,873
Và để làm điều đó, chúng tôi sẽ chuyển sang các bài tập mà chúng tôi minh họa

170
00:12:40,494 --> 00:12:45,777
cho bạn, làm thế nào chúng tôi sử dụng kiến thức này mà chúng tôi đã đạt được về cách hình ảnh động được mô tả trong góc cạnh để viết các loại bỏ qua mã để

171
00:12:45,777 --> 00:12:49,458
xây dựng và áp dụng các hình ảnh động cho

172
00:12:49,458 --> 00:12:53,830
các yếu tố khác nhau trong quan điểm của chúng tôi các thành phần của chúng tôi.

173
00:12:53,830 --> 00:13:00,309
[ NHẠC]