1
00:00:03,680 --> 00:00:09,920
Tiếp tục với bài tập hoạt hình của chúng tôi từ phần trước.

2
00:00:09,920 --> 00:00:15,470
Chúng tôi sẽ thêm vào một số hình ảnh động hơn để ứng dụng góc cạnh của chúng tôi.

3
00:00:15,470 --> 00:00:19,515
Đặc biệt, chúng tôi sẽ thêm vào một hình ảnh động sẽ được kích hoạt

4
00:00:19,515 --> 00:00:24,440
khi các thay đổi tuyến đường xảy ra trong ứng dụng đơn trang của chúng tôi.

5
00:00:24,440 --> 00:00:28,125
Chúng tôi cũng sẽ thêm vào một hình ảnh động cho phép

6
00:00:28,125 --> 00:00:32,595
một chế độ xem được hiển thị khi dữ liệu được lấy từ phía máy chủ,

7
00:00:32,595 --> 00:00:39,535
vì vậy khi bạn đang loại bỏ các spinner trong chế độ xem của bạn và sau đó render chế độ xem,

8
00:00:39,535 --> 00:00:42,395
chúng tôi muốn chế độ xem được chiếu lên màn hình

9
00:00:42,395 --> 00:00:45,710
chứ không chỉ đơn giản là chỉ xuất hiện tất cả các đột ngột.

10
00:00:45,710 --> 00:00:49,774
Vì vậy, một vài hình ảnh động mới mà chúng ta sẽ thêm vào trong bài tập này.

11
00:00:49,774 --> 00:00:54,440
Trên đường đi khi bạn có nhiều hình ảnh động trong ứng dụng của bạn,

12
00:00:54,440 --> 00:00:57,800
nó có thể là tốt hơn để cấu trúc lại mã theo một cách mà là

13
00:00:57,800 --> 00:01:01,190
quản lý hơn chứ không phải là bao gồm piecemeal

14
00:01:01,190 --> 00:01:05,210
mỗi chút của một kích hoạt vào mỗi tập tin

15
00:01:05,210 --> 00:01:09,460
trong các thành phần của chúng tôi ứng dụng góc cạnh của chúng tôi.

16
00:01:09,460 --> 00:01:15,880
Vì vậy, chúng ta hãy thực hiện tất cả các bước này như là phần hai của bài tập hoạt hình.

17
00:01:15,880 --> 00:01:20,750
Điều đầu tiên mà tôi sẽ làm là chúng tôi sẽ cấu trúc lại

18
00:01:20,750 --> 00:01:26,705
mã mà chúng tôi đã thực hiện như là một phần của bài tập hình ảnh động này.

19
00:01:26,705 --> 00:01:32,790
Cách tiếp cận mà tôi đang minh họa cho các bạn ở đây chỉ là cách tiếp cận được đề xuất của tôi.

20
00:01:32,790 --> 00:01:36,080
Bạn không nhất thiết phải làm theo chính xác theo cách này,

21
00:01:36,080 --> 00:01:40,460
nhưng tôi cảm thấy rằng điều này giúp tổ chức mã tốt hơn nhiều.

22
00:01:40,460 --> 00:01:45,050
Vì vậy, những gì tôi sẽ làm là giống như chúng tôi đã có một thư mục riêng biệt cho các dịch vụ,

23
00:01:45,050 --> 00:01:49,040
chúng tôi đã có một thư mục riêng biệt cho các tài nguyên được chia sẻ và như vậy,

24
00:01:49,040 --> 00:01:51,975
tôi sẽ tạo ra một thư mục mới có tên là hình ảnh động.

25
00:01:51,975 --> 00:01:57,200
Chúng tôi sẽ lưu trữ tất cả các mã hoạt hình liên quan đến đó và sau đó sử dụng nó bằng cách nhập khẩu nó

26
00:01:57,200 --> 00:02:03,065
bất cứ nơi nào cần thiết trong các thành phần của chúng tôi trong ứng dụng góc cạnh của chúng tôi.

27
00:02:03,065 --> 00:02:05,865
Vì vậy, đi đến mã của chúng tôi,

28
00:02:05,865 --> 00:02:12,615
trong thư mục ứng dụng tôi sẽ tạo ra một thư mục mới và đặt tên cho nó Hình động.

29
00:02:12,615 --> 00:02:15,115
Bên trong thư mục Animations này,

30
00:02:15,115 --> 00:02:20,540
tôi sẽ tạo ra một tập tin mới và cho thiếu một từ tốt hơn tôi

31
00:02:20,540 --> 00:02:26,940
sẽ gọi nó là tập tin app.animation.ts.

32
00:02:27,060 --> 00:02:31,915
Sau đó, bên trong này, tôi sẽ nhập khẩu

33
00:02:31,915 --> 00:02:38,865
các lớp khác nhau từ hình ảnh động góc mà tôi đã làm trong thành phần DishDetail.

34
00:02:38,865 --> 00:02:41,135
Vì vậy, đi đến thành phần DishDetail,

35
00:02:41,135 --> 00:02:43,700
bạn sẽ nhớ lại rằng điều đầu tiên mà tôi

36
00:02:43,700 --> 00:02:46,640
đã làm là tôi thêm dòng này vào thành phần DishDetail.

37
00:02:46,640 --> 00:02:49,685
Tôi sẽ cắt nó ra khỏi thành phần DishDetail và

38
00:02:49,685 --> 00:02:53,035
thay vào đó dán nó vào các hình ảnh động ứng dụng,

39
00:02:53,035 --> 00:02:57,765
do đó bất cứ nơi nào ứng dụng này hình ảnh động được

40
00:02:57,765 --> 00:03:03,090
bao gồm bằng cách nhập khẩu nó vào các thành phần khác của chúng tôi,

41
00:03:03,090 --> 00:03:05,640
điều này sẽ tự động đến cho đúng ở đó.

42
00:03:05,640 --> 00:03:07,750
Bây giờ, trong hình ảnh động ứng dụng này,

43
00:03:07,750 --> 00:03:12,000
tôi sẽ tạo ra một số chức năng nhà máy sẽ xuất khẩu các trigger khác nhau.

44
00:03:12,000 --> 00:03:14,495
Chức năng nhà máy đầu tiên mà tôi sẽ tạo ra

45
00:03:14,495 --> 00:03:22,660
chức năng xuất khẩu này và gọi nó là khả năng hiển thị.

46
00:03:23,000 --> 00:03:27,290
Chức năng hiển thị này sẽ trả về mã

47
00:03:27,290 --> 00:03:32,070
tương ứng với kích hoạt mà chúng tôi đã thực hiện trong thành phần DishDetail.

48
00:03:32,070 --> 00:03:34,455
Vì vậy, quay trở lại thành phần DishDetail,

49
00:03:34,455 --> 00:03:44,520
tôi chỉ sẽ cắt ra toàn bộ mã này cho kích hoạt từ đây và sau đó quay trở lại

50
00:03:44,520 --> 00:03:48,800
ứng dụng animation.t tập tin và sau đó dán nó vào

51
00:03:48,800 --> 00:03:55,825
vị trí ngay tại đó trong chức năng ở đây.

52
00:03:55,825 --> 00:04:02,530
Điều này bây giờ trở thành một chức năng có sẵn để nhập khẩu từ thành phần DishDetail của tôi.

53
00:04:02,530 --> 00:04:06,840
Vì vậy, quay trở lại thành phần DishDetail.

54
00:04:06,840 --> 00:04:12,640
Bây giờ, ở vị trí mà tôi nhập khẩu kích hoạt và các lớp học khác,

55
00:04:12,640 --> 00:04:19,030
tôi sẽ bây giờ nhập khẩu tầm nhìn

56
00:04:19,030 --> 00:04:30,475
từ ứng dụng hoạt hình, hoạt hình,

57
00:04:30,475 --> 00:04:35,300
và do đó chức năng đó bây giờ sẽ trở nên có sẵn cho tôi trong mã của tôi ở đây.

58
00:04:35,300 --> 00:04:38,164
Vì vậy, một khi tôi làm điều đó bên trong hình ảnh động của

59
00:04:38,164 --> 00:04:42,560
tôi, tôi chỉ có thể gọi chức năng đó để tôi có thể nói

60
00:04:42,560 --> 00:04:49,515
khả năng hiển thị và sau đó mã kích hoạt bây giờ trở thành một phần của thành phần của tôi ở đây.

61
00:04:49,515 --> 00:04:55,360
Bây giờ, điều này tôi tìm thấy là một cách tốt hơn để tổ chức mã cho hình ảnh động của tôi.

62
00:04:55,360 --> 00:04:59,400
Bây giờ, nếu tôi cần sử dụng cùng một kích hoạt trong một thành phần khác,

63
00:04:59,400 --> 00:05:07,545
tôi chỉ có thể làm theo cách tiếp cận này để bao gồm nó vào các thành phần khác của tôi là tốt.

64
00:05:07,545 --> 00:05:09,800
Hãy lưu các thay đổi và sau đó đi và

65
00:05:09,800 --> 00:05:13,020
xem nhanh ứng dụng của chúng tôi trong trình duyệt.

66
00:05:13,020 --> 00:05:18,460
Đi vào trình duyệt, bạn thấy rằng khi tôi đi đến thành phần đĩa, thành

67
00:05:18,460 --> 00:05:21,215
phần đĩa là ngay ở đó và sau đó

68
00:05:21,215 --> 00:05:24,810
nó sẽ có hành vi hoạt hình tương tự như trước đây.

69
00:05:24,810 --> 00:05:26,640
Vì vậy, bằng cách refactoring mã,

70
00:05:26,640 --> 00:05:31,085
tôi đã quản lý để có được mã tổ chức tốt hơn và

71
00:05:31,085 --> 00:05:36,385
vẫn làm việc chính xác giống như một phần của bài tập này.

72
00:05:36,385 --> 00:05:41,875
Nếu bạn chỉ có một hoạt hình duy nhất được sử dụng ở một nơi duy nhất,

73
00:05:41,875 --> 00:05:44,870
sau đó phương pháp tiếp cận trước đó hoạt động tốt nhưng nếu bạn có

74
00:05:44,870 --> 00:05:48,800
nhiều và đặc biệt là nếu bạn đang sử dụng lại mã trong nhiều thành phần,

75
00:05:48,800 --> 00:05:55,160
sau đó cách tiếp cận refactored này là một cách tốt hơn nhiều để thực hiện các giải pháp.

76
00:05:55,160 --> 00:06:00,250
Các bản cập nhật tiếp theo mà tôi sẽ làm là để thêm hình ảnh động trên tuyến đường thay đổi.

77
00:06:00,250 --> 00:06:04,670
Vì vậy, khi tôi đi từ một chế độ xem khác, vì vậy, ví dụ,

78
00:06:04,670 --> 00:06:11,145
từ nhà đến khoảng hoặc sắp đến menu hoặc menu để liên hệ hoặc ngược lại,

79
00:06:11,145 --> 00:06:15,350
sau đó tôi muốn có thể hoạt hình những thay đổi này trong ứng dụng của tôi.

80
00:06:15,350 --> 00:06:16,430
Vì vậy, để làm điều đó,

81
00:06:16,430 --> 00:06:22,480
tôi sẽ giới thiệu một chức năng khác vào các ứng dụng animation.t tập tin.

82
00:06:22,480 --> 00:06:24,980
Vì vậy, đi vào các ứng dụng animation.t tập tin,

83
00:06:24,980 --> 00:06:33,210
tôi sẽ xuất khẩu một chức năng mà tôi gọi là FlyInout,

84
00:06:34,570 --> 00:06:39,325
bạn sẽ thấy lý do tại sao tôi sử dụng tên này ở đây.

85
00:06:39,325 --> 00:06:49,150
Sau đó, điều này sẽ trả về một chức năng mà là một kích hoạt với tên FlyInout.

86
00:06:49,820 --> 00:06:52,380
Vì vậy, bên trong là kích hoạt,

87
00:06:52,380 --> 00:06:58,710
tôi sẽ xác định mã cho những gì kích hoạt này sẽ làm.

88
00:06:59,620 --> 00:07:10,015
Vì vậy, ở đây, tôi sẽ xác định một trạng thái ở đây với tên ngôi sao,

89
00:07:10,015 --> 00:07:12,445
vì vậy nó không quan trọng trạng thái đó là gì,

90
00:07:12,445 --> 00:07:16,820
điều này được áp dụng cho bất kỳ trạng thái và sau đó tôi sẽ xác định

91
00:07:16,820 --> 00:07:22,610
một số phong cách ở đây và hai phong cách mà tôi

92
00:07:22,610 --> 00:07:26,600
sẽ xác định là mờ là một

93
00:07:26,600 --> 00:07:36,915
và biến đổi là TranslaTeX (0),

94
00:07:36,915 --> 00:07:41,355
do đó có nghĩa là nó ở vị trí bình thường của nó trong trường hợp này.

95
00:07:41,355 --> 00:07:45,270
Bây giờ, khi tôi định nghĩa chuyển tiếp,

96
00:07:45,270 --> 00:07:50,880
tôi cũng có thể định nghĩa chuyển tiếp theo cách này.

97
00:07:50,990 --> 00:07:55,090
Vì vậy, nếu tôi nói nhập chuyển tiếp,

98
00:07:55,090 --> 00:07:59,240
chuyển tiếp nhập là một chữ viết tắt cho nói đi từ

99
00:07:59,240 --> 00:08:03,190
trạng thái vô hiệu đến một trong những trạng thái hiện có.

100
00:08:03,190 --> 00:08:06,890
Vì vậy, có nghĩa là quan điểm đang đi vào ứng dụng của tôi.

101
00:08:06,890 --> 00:08:10,655
Vì vậy, nhập, có nghĩa là bây giờ khi tôi định tuyến vào

102
00:08:10,655 --> 00:08:15,450
một chế độ xem cụ thể trong ứng dụng trang duy nhất của tôi,

103
00:08:15,450 --> 00:08:18,500
chế độ xem đó sẽ được nhập vào chế độ xem.

104
00:08:18,500 --> 00:08:24,325
Vì vậy, đó là lý do tại sao tôi có thể áp dụng dấu hai chấm nhập chuyển tiếp trong trường hợp đó.

105
00:08:24,325 --> 00:08:27,725
Bây giờ tương tự, có một quá trình chuyển đổi được gọi là dấu hai chấm

106
00:08:27,725 --> 00:08:31,790
để lại mà tôi có thể áp dụng khi bạn chuyển ra khỏi

107
00:08:31,790 --> 00:08:40,580
chế độ xem này và sau đó bạn đang lấy cái nhìn ra từ ổ cắm router của ứng dụng của bạn.

108
00:08:40,580 --> 00:08:46,950
Vì vậy, chúng tôi sẽ làm cả hai vào và một trong đó là để lại.

109
00:08:52,760 --> 00:08:56,555
Vì vậy, hai chức năng mà tôi sẽ xác định ở đây,

110
00:08:56,555 --> 00:09:00,155
chuyển tiếp nhập và chuyển tiếp rời khỏi đây.

111
00:09:00,155 --> 00:09:01,730
Vì vậy, đối với nhập,

112
00:09:01,730 --> 00:09:04,150
tôi muốn xác định những gì?

113
00:09:04,150 --> 00:09:09,330
Để nhập, hãy để tôi xác định các chức năng ở đây,

114
00:09:09,330 --> 00:09:11,800
và tương tự như vậy, để lại cũng,

115
00:09:11,800 --> 00:09:15,815
tôi sẽ xác định các chức năng ở đây.

116
00:09:15,815 --> 00:09:18,955
Vì vậy, tạo ra cái giàn giáo này ở đây.

117
00:09:18,955 --> 00:09:25,810
Bây giờ, tôi có thể nhập thông tin mà tôi muốn trong những quá trình chuyển đổi này.

118
00:09:25,810 --> 00:09:28,025
Vì vậy, khi quá trình chuyển đổi này xảy ra,

119
00:09:28,025 --> 00:09:35,590
tôi sẽ bắt đầu với một phong cách biến đổi,

120
00:09:36,920 --> 00:09:42,495
TransLaTeX trừ đi 100 phần trăm

121
00:09:42,495 --> 00:09:47,680
, có nghĩa là quan điểm hoàn toàn ra khỏi quan điểm ở đây.

122
00:09:47,680 --> 00:09:52,205
Vì vậy, bạn bắt đầu từ đó từ âm 100 phần trăm tại thời điểm này.

123
00:09:52,205 --> 00:09:53,930
Vì vậy, khi bạn đang bước vào,

124
00:09:53,930 --> 00:09:55,590
bạn sẽ bắt đầu với điều đó,

125
00:09:55,590 --> 00:09:58,710
và sau đó cũng vào thời điểm này,

126
00:09:58,710 --> 00:10:03,530
tôi sẽ hoạt hình, và hoạt hình trong 500.

127
00:10:03,530 --> 00:10:05,710
Vì vậy, khi tôi chỉ định 500 như thế này,

128
00:10:05,710 --> 00:10:07,960
bạn thậm chí có thể làm theo cách này.

129
00:10:07,960 --> 00:10:10,995
Cách khác, bạn có thể nói, trong dấu ngoặc kép,

130
00:10:10,995 --> 00:10:16,900
“500ms”, và sau đó bạn thậm chí có thể sử dụng dễ dàng hoặc dễ dàng.

131
00:10:16,900 --> 00:10:19,400
Vì vậy, hãy để tôi sửa đổi điều này thành

132
00:10:19,400 --> 00:10:28,980
500ms dễ dàng trong bởi vì quan điểm này đang đến.

133
00:10:28,980 --> 00:10:30,790
Vì vậy, chúng tôi sẽ dễ dàng trong quan điểm.

134
00:10:30,790 --> 00:10:37,610
Vì vậy, để nghỉ phép, tôi sẽ áp dụng quá trình chuyển đổi như animate,

135
00:10:37,610 --> 00:10:45,640
và sau đó tôi sẽ nói 500 mili giây, một lần nữa, ease-out.

136
00:10:45,640 --> 00:10:47,740
Vì vậy, quan điểm này đang rời đi.

137
00:10:47,740 --> 00:10:50,350
Vì vậy, chúng tôi muốn giải phóng tầm nhìn đó.

138
00:10:50,350 --> 00:10:52,365
Sau đó, trong trường hợp này,

139
00:10:52,365 --> 00:10:55,115
phong cách mà tôi áp dụng

140
00:10:55,115 --> 00:11:03,880
là biến đổi,

141
00:11:04,670 --> 00:11:09,590
TransLaTeX 100%.

142
00:11:09,590 --> 00:11:15,370
Vì vậy, chế độ xem này sẽ hoàn toàn biến mất khỏi màn hình ở đó.

143
00:11:15,370 --> 00:11:18,055
TranslaTeX 100 phần trăm.

144
00:11:18,055 --> 00:11:23,000
Ngoài ra, tôi sẽ đặt độ mờ bằng không.

145
00:11:23,000 --> 00:11:25,615
Vì vậy, hoàn toàn biến mất khỏi màn hình.

146
00:11:25,615 --> 00:11:31,140
Vì vậy, hoạt hình này sẽ thêm vào một tính năng mới tốt ở đây.

147
00:11:31,140 --> 00:11:33,570
Bây giờ, với cái này,

148
00:11:33,570 --> 00:11:40,825
tôi có thể thêm vào, bắt đầu với độ mờ bằng 0, nếu bạn thích.

149
00:11:40,825 --> 00:11:43,730
Hãy thêm vào đó và xem nó trông như thế nào.

150
00:11:43,730 --> 00:11:48,895
Vì vậy, đây là kích hoạt FlyInout mà tôi đã định nghĩa ở đây.

151
00:11:48,895 --> 00:11:50,910
Bây giờ, bạn đang rõ ràng tự hỏi,

152
00:11:50,910 --> 00:11:53,690
làm thế nào để tôi sử dụng FlyInout này và sau đó áp dụng

153
00:11:53,690 --> 00:11:56,650
điều này để định tuyến chuyển tiếp trong ứng dụng của tôi?

154
00:11:56,650 --> 00:11:59,815
Vì vậy, để làm điều đó, chúng ta sẽ đi đến, trước tiên,

155
00:11:59,815 --> 00:12:03,055
bắt đầu với thành phần trình đơn tệp.s.

156
00:12:03,055 --> 00:12:04,810
Tôi sẽ nhập

157
00:12:04,810 --> 00:12:13,220
FlyInout

158
00:12:14,730 --> 00:12:25,820
từ hoạt hình ứng dụng.

159
00:12:27,090 --> 00:12:31,230
Sau đó, đi đến thành phần,

160
00:12:31,230 --> 00:12:35,425
bây giờ tôi sẽ giới thiệu một tài sản mới được gọi là host.

161
00:12:35,425 --> 00:12:39,445
Tôi sẽ cho bạn biết những gì đi vào máy chủ trong một thời gian ngắn.

162
00:12:39,445 --> 00:12:42,939
Sau đó, chúng tôi cũng sẽ bao gồm các động sản,

163
00:12:42,939 --> 00:12:45,470
mà là một mảng ở đây.

164
00:12:45,470 --> 00:12:50,980
Sau đó, bên trong đây, tôi sẽ sử dụng FlyInout mà chúng tôi vừa nhập khẩu.

165
00:12:50,980 --> 00:12:59,325
Vì vậy, kích hoạt hoạt hình này sẽ được áp dụng cho thành phần phương tiện này.

166
00:12:59,325 --> 00:13:00,660
Bây giờ, trong máy chủ,

167
00:13:00,660 --> 00:13:07,975
vì vậy đây là cách tôi đảm bảo rằng hình ảnh động đặc biệt này xảy ra khi thay đổi tuyến đường xảy ra.

168
00:13:07,975 --> 00:13:11,215
Vì vậy, trong máy chủ này ở đây,

169
00:13:11,215 --> 00:13:15,560
tôi cung cấp điều này như nói,

170
00:13:17,070 --> 00:13:22,705
@flyInOut và nói đúng,

171
00:13:22,705 --> 00:13:28,730
và điều này nên được kèm theo trong dấu ngoặc kép cũng,

172
00:13:29,370 --> 00:13:41,660
@flyInOut, đúng, và sau đó phong cách,

173
00:13:42,000 --> 00:13:45,595
hiển thị khối.

174
00:13:45,595 --> 00:13:52,330
Vì vậy, hai điều này nên được áp dụng bên trong tài sản máy chủ ở đây.

175
00:13:52,330 --> 00:13:56,410
Bây giờ, khi chúng tôi làm điều này, thành phần menu của tôi bây giờ sẽ bắt đầu hoạt hình

176
00:13:56,410 --> 00:14:00,440
khi tôi định tuyến vào thành phần menu,

177
00:14:00,440 --> 00:14:02,965
và sau đó cũng khi tôi rời khỏi thành phần menu.

178
00:14:02,965 --> 00:14:10,705
Bây giờ, tôi sẽ áp dụng điều tương tự cho các thành phần còn lại của ứng dụng Angular của tôi.

179
00:14:10,705 --> 00:14:12,720
Vì vậy, những gì tôi sẽ làm là,

180
00:14:12,720 --> 00:14:15,260
tôi sẽ chỉ sao chép này,

181
00:14:15,850 --> 00:14:20,910
và sau đó chúng tôi sẽ áp dụng điều này cho các thành phần về.

182
00:14:20,910 --> 00:14:23,545
Vì vậy, tôi sẽ đi đến thành phần về.

183
00:14:23,545 --> 00:14:25,555
Trong trang trí thành phần,

184
00:14:25,555 --> 00:14:28,650
tôi đã bao gồm các thông tin ở đây,

185
00:14:28,650 --> 00:14:34,070
và bạn thấy dòng squiggly màu đỏ nhắc nhở tôi rằng tôi cần phải nhập khẩu

186
00:14:34,080 --> 00:14:42,255
FlyInout từ hình ảnh động, ứng dụng hoạt hình.

187
00:14:42,255 --> 00:14:46,410
Vì vậy, cách tiếp cận tương tự, về thành phần,

188
00:14:46,410 --> 00:14:52,080
sau đó trong thành phần tiếp xúc cũng, cùng một điều,

189
00:15:08,840 --> 00:15:17,980
và sau đó áp dụng các thuộc tính máy chủ và hoạt hình cho trang trí thành phần,

190
00:15:17,980 --> 00:15:21,660
và sau đó những gì khác chúng ta có?

191
00:15:21,660 --> 00:15:28,040
Thành phần nhà. Hãy đi đến thành phần nhà và lặp lại cùng một điều ở đây.

192
00:15:28,040 --> 00:15:33,385
Tôi sẽ thêm vào máy chủ và tài sản hình ảnh động,

193
00:15:33,385 --> 00:15:36,210
và sau đó đi trước và nhập

194
00:15:36,210 --> 00:15:50,210
FlyInout, từ hoạt hình ứng dụng.

195
00:15:50,350 --> 00:15:56,235
Chúng ta có bỏ lỡ gì không? Oh, chúng ta cũng cần phải cập nhật thành phần chi tiết món ăn.

196
00:15:56,235 --> 00:15:58,360
Vì vậy, để tôi đi đến thành phần chi tiết món ăn.

197
00:15:58,360 --> 00:16:00,840
Vì chúng ta đã có khả năng hiển thị ở đó,

198
00:16:00,840 --> 00:16:04,435
tôi chỉ cần nhập FlyInout.

199
00:16:04,435 --> 00:16:08,920
Sau đó, kể từ khi chúng tôi đã thiết lập các phần còn lại ở đây,

200
00:16:08,920 --> 00:16:12,665
tôi sẽ đi vào và dán mã đó,

201
00:16:12,665 --> 00:16:17,125
và rõ ràng, tôi có hai hình ảnh động ở đây.

202
00:16:17,125 --> 00:16:20,860
Hãy để tôi cắt tầm nhìn ra từ đây và sau đó thêm

203
00:16:20,860 --> 00:16:29,420
nó vào các hoạt hình khác,

204
00:16:29,420 --> 00:16:35,040
và sau đó cắt này ra để tôi có tài sản hoạt hình duy nhất với

205
00:16:35,040 --> 00:16:40,780
cả FlyInout và chức năng hiển thị cả hai được bao gồm và gọi là có,

206
00:16:40,780 --> 00:16:42,630
và sau đó là tài sản máy chủ.

207
00:16:42,630 --> 00:16:45,625
Bây giờ, chúng ta hãy lưu các thay đổi và sau đó xem

208
00:16:45,625 --> 00:16:51,370
hoạt hình mới mà chúng tôi chỉ áp dụng cho các thành phần của chúng tôi.

209
00:16:51,370 --> 00:16:56,475
Bắt đầu với cái nhìn nhà.

210
00:16:56,475 --> 00:16:59,000
Vì vậy, chúng tôi có chế độ xem nhà được hiển thị ở đây.

211
00:16:59,000 --> 00:17:02,500
Bây giờ hãy để tôi nhanh chóng đi đến chế độ xem Giới thiệu,

212
00:17:02,500 --> 00:17:05,800
và sau đó bạn thấy rằng chế độ xem Giới thiệu chỉ trượt

213
00:17:05,800 --> 00:17:09,780
vào trong khi chế độ xem Trang chủ trượt ra màn hình ở đây.

214
00:17:09,780 --> 00:17:11,810
Tương tự, khi tôi vào menu,

215
00:17:11,810 --> 00:17:16,190
bạn sẽ thấy rằng chế độ xem Menu trượt vào trong khi chế độ xem Giới thiệu trượt ra ngoài.

216
00:17:16,190 --> 00:17:20,240
Nó nhanh đến mức bạn không nhận thấy nó như vậy.

217
00:17:20,240 --> 00:17:22,740
Tương tự, đối với dạng xem Liên hệ,

218
00:17:22,740 --> 00:17:24,710
bạn sẽ thấy dạng xem liên hệ trượt vào.

219
00:17:24,710 --> 00:17:28,940
Vì vậy, loại hình ảnh động này có thể được thêm vào bằng cách sử dụng

220
00:17:28,940 --> 00:17:34,170
cách tiếp cận này mà chúng tôi chỉ minh họa cho ứng dụng Angular của bạn.

221
00:17:34,170 --> 00:17:40,375
Chúng ta vẫn chưa xong. Chúng tôi sẽ làm thêm một hoạt hình trong ứng dụng của chúng tôi.

222
00:17:40,375 --> 00:17:44,955
Để minh họa những gì tôi muốn làm trong hoạt hình tiếp theo,

223
00:17:44,955 --> 00:17:48,495
chúng ta hãy xem nhanh thành phần menu.

224
00:17:48,495 --> 00:17:50,780
Vì vậy, bạn thấy rằng khi thành phần menu,

225
00:17:50,780 --> 00:17:54,830
khi spinner đang quay và sau đó được thay thế bằng chế độ xem,

226
00:17:54,830 --> 00:17:57,180
chế độ xem đột nhiên xuất hiện trên màn hình,

227
00:17:57,180 --> 00:17:59,740
và nó là một chút sợ hãi cho mắt.

228
00:17:59,740 --> 00:18:01,230
Bạn có thể không nhận thấy nó.

229
00:18:01,230 --> 00:18:03,725
Bạn có thể khá hài lòng với điều đó.

230
00:18:03,725 --> 00:18:07,340
Nhưng chúng ta có thể thêm vào một cách nới lỏng trong

231
00:18:07,340 --> 00:18:12,235
chế độ xem đó khi dữ liệu được lấy từ máy chủ và chế độ xem đang được kết xuất trong.

232
00:18:12,235 --> 00:18:20,625
Vì vậy, khi biến của món ăn trong tập tin thành phần menu của tôi không trở nên vô hiệu,

233
00:18:20,625 --> 00:18:27,290
sau đó spinner sẽ được ẩn và sau đó xem của món ăn,

234
00:18:27,290 --> 00:18:30,320
trình đơn được xây dựng và sau đó đặt ra.

235
00:18:30,320 --> 00:18:33,060
Vì vậy, chúng tôi muốn điều đó để dễ dàng vào màn hình.

236
00:18:33,060 --> 00:18:38,820
Vì vậy, chúng ta hãy thêm vào một hình ảnh động nữa để thực hiện cả hai trong thành phần menu.

237
00:18:38,820 --> 00:18:42,055
Chúng tôi cũng sẽ áp dụng cùng một điều trong thành phần chi tiết món ăn.

238
00:18:42,055 --> 00:18:46,540
Chúng tôi cũng sẽ sử dụng cùng trong thành phần Trang chủ cũng và thành phần Giới thiệu,

239
00:18:46,540 --> 00:18:51,550
nơi chúng tôi đang lấy dữ liệu để hiển thị danh sách các nhà lãnh đạo.

240
00:18:51,550 --> 00:18:56,145
Vì vậy, bất cứ nơi nào bạn đang lấy dữ liệu từ máy chủ và sau đó đặt ra chế độ xem,

241
00:18:56,145 --> 00:18:57,740
khi chế độ xem xuất hiện,

242
00:18:57,740 --> 00:19:03,275
chúng tôi muốn giảm bớt chế độ xem bằng cách sử dụng hình ảnh động mới này mà tôi sẽ tạo tiếp theo.

243
00:19:03,275 --> 00:19:06,230
Đi đến các ứng dụng animation.t tập tin,

244
00:19:06,230 --> 00:19:08,615
tôi sẽ thêm vào một chức năng khác ở đây,

245
00:19:08,615 --> 00:19:14,750
và để tôi gọi nó là mở rộng.

246
00:19:14,750 --> 00:19:18,200
Chức năng này sẽ mở rộng chế độ xem đang được đặt

247
00:19:18,200 --> 00:19:22,370
ra sau khi dữ liệu được lấy từ phía máy chủ.

248
00:19:22,370 --> 00:19:24,885
Vì vậy, quan điểm này, một lần nữa,

249
00:19:24,885 --> 00:19:28,370
tôi sẽ trả lại một cò súng ở đây.

250
00:19:28,370 --> 00:19:32,280
Tôi sẽ đặt tên kích hoạt là mở rộng,

251
00:19:32,280 --> 00:19:37,690
và kích hoạt này sẽ tạo ra.

252
00:19:37,890 --> 00:19:40,590
Làm thế nào để xác định kích hoạt này.

253
00:19:40,590 --> 00:19:49,870
Vì vậy, bên trong kích hoạt này, chúng ta sẽ bao gồm một trạng thái với ngôi sao trong đó.

254
00:19:49,870 --> 00:19:51,920
Vì vậy, nó không quan trọng nó là trạng thái gì.

255
00:19:51,920 --> 00:20:00,580
Tất cả các trạng thái sẽ được kết xuất với phong cách như

256
00:20:00,580 --> 00:20:10,420
mờ một biến đổi dịch x 0.

257
00:20:10,420 --> 00:20:16,430
Vì vậy, nó được hiển thị ngay và trung tâm trong ứng dụng của tôi.

258
00:20:17,520 --> 00:20:20,990
Đó phải là một cú đúp ở đó.

259
00:20:20,990 --> 00:20:23,250
Tôi nhìn nó và nói rằng:

260
00:20:23,250 --> 00:20:25,735
Tại sao nó lại cho thấy một đường kẻ lén lút đỏ.

261
00:20:25,735 --> 00:20:29,560
Vì vậy, khi bạn gõ rất nhanh, bạn thường mắc lỗi ở đó.

262
00:20:29,560 --> 00:20:31,070
Vì vậy, thay vì một khung vuông,

263
00:20:31,070 --> 00:20:34,205
đó phải là một cú đúp ở đó.

264
00:20:34,205 --> 00:20:35,915
Vì vậy, đó là nhà nước.

265
00:20:35,915 --> 00:20:44,925
Vì vậy, bất kỳ trạng thái nào mà nó sẽ được nhìn thấy hoàn toàn và tập trung nơi nó nên được tập trung.

266
00:20:44,925 --> 00:20:49,180
Bây giờ, để tôi kích hoạt một quá trình chuyển đổi.

267
00:20:49,180 --> 00:20:51,730
Bây giờ, quá trình chuyển đổi này sẽ được kích hoạt chỉ

268
00:20:51,730 --> 00:20:55,465
khi nhập khi chế độ xem được đặt trên màn hình.

269
00:20:55,465 --> 00:21:00,740
Phần thoát ra chúng tôi đã làm điều đó trong hoạt hình tuyến đường, vì vậy chúng tôi không cần điều đó.

270
00:21:00,740 --> 00:21:03,060
Chúng ta chỉ cần phần giữa cho chế độ xem này bởi vì chế

271
00:21:03,060 --> 00:21:06,575
độ xem được hiển thị lên màn hình này ở đó.

272
00:21:06,575 --> 00:21:08,435
Vì vậy, trong nhập,

273
00:21:08,435 --> 00:21:14,625
tôi sẽ xác định quá trình chuyển đổi một cách thích hợp.

274
00:21:14,625 --> 00:21:18,860
Vì vậy, trong quá trình chuyển đổi tôi muốn làm gì?

275
00:21:18,860 --> 00:21:27,260
Tôi muốn áp dụng cách tiếp cận tương tự mà tôi đã sử dụng với quá trình chuyển đổi nhập ở đây.

276
00:21:27,260 --> 00:21:32,600
Vì vậy, tôi sẽ chỉ sao chép điều này và sau đó thực hiện một số điều chỉnh nhỏ để mã ở đó.

277
00:21:32,600 --> 00:21:36,335
Vì vậy, đối với quá trình chuyển đổi nhập ở đây cũng,

278
00:21:36,335 --> 00:21:38,490
tôi muốn áp dụng cùng một điều.

279
00:21:38,490 --> 00:21:42,040
Tôi sẽ nói dịch Insta từ 100 phần trăm.

280
00:21:42,040 --> 00:21:46,630
Tôi sẽ chỉ sử dụng 50 phần trăm và sau đó tôi sẽ làm dịch Y

281
00:21:46,630 --> 00:21:52,460
Vì vậy, có nghĩa là quan điểm này sẽ thả xuống từ đầu 50 precent bắt đầu với

282
00:21:52,460 --> 00:21:58,655
độ mờ không và sau đó tôi sẽ giảm bớt nó trong một thời gian nhanh hơn một chút,

283
00:21:58,655 --> 00:22:04,200
200 mili giây và sẽ giảm bớt nó vào ứng dụng của chúng tôi.

284
00:22:04,200 --> 00:22:09,640
Bây giờ, vì vậy, bạn thấy điều chỉnh nhỏ để mã ở đây.

285
00:22:09,640 --> 00:22:14,845
Vì vậy, dịch trừ đi 50 phần trăm và độ mờ không và

286
00:22:14,845 --> 00:22:21,025
nó được nới lỏng trong 200 mili giây và sau đó tại thời điểm đó,

287
00:22:21,025 --> 00:22:27,105
tôi có thể áp dụng phong cách này như cùng một phong cách.

288
00:22:27,105 --> 00:22:32,240
Tôi sẽ nộp đơn ở đó. Vì vậy, tôi sẽ chỉ sao chép phong cách đó và sau đó áp dụng phong cách đó ở đó.

289
00:22:32,240 --> 00:22:34,440
Vì vậy, khi nó được nới lỏng,

290
00:22:34,440 --> 00:22:40,115
nó sẽ đi vào và được hoàn toàn nhìn thấy nơi nó nên được.

291
00:22:40,115 --> 00:22:43,735
Vì vậy, đây là chức năng mở rộng mà tôi đã định nghĩa ở đây.

292
00:22:43,735 --> 00:22:45,950
Vì vậy, tôi muốn sử dụng chức năng này ở đâu?

293
00:22:45,950 --> 00:22:52,060
Chúng tôi sẽ đi đầu tiên để thành phần menu và trong thành phần menu,

294
00:22:52,060 --> 00:22:55,530
bây giờ tôi cũng sẽ nhập khẩu mà,

295
00:22:55,530 --> 00:23:04,595
mở rộng và sau đó thêm nó vào vào hình ảnh động của tôi và sau đó làm thế nào để tôi áp dụng mở rộng này?

296
00:23:04,595 --> 00:23:08,160
Vì vậy, đi đến tập tin mẫu thành phần trình đơn đó.

297
00:23:08,160 --> 00:23:09,925
Trong tập tin mẫu,

298
00:23:09,925 --> 00:23:12,840
tôi sẽ áp dụng mở rộng danh

299
00:23:12,840 --> 00:23:20,435
sách lưới mà tôi đang áp dụng này.

300
00:23:20,435 --> 00:23:24,960
Vì vậy, hãy để tôi sao chép điều đó và sau đó chúng tôi cũng sẽ đi

301
00:23:24,960 --> 00:23:32,230
đến các thành phần nhà và trong các thành phần nhà cũng,

302
00:23:32,230 --> 00:23:42,590
tôi sẽ bao gồm mở rộng và sau đó thêm mở rộng để hoạt hình,

303
00:23:43,430 --> 00:23:49,475
và sau đó đi đến các thành phần nhà tập tin mẫu và sau đó tôi sẽ áp dụng

304
00:23:49,475 --> 00:23:57,060
mở rộng để các thành phần món ăn MD thẻ,

305
00:23:57,060 --> 00:24:02,695
để các thành phần khuyến mãi thẻ MD và cũng cho các

306
00:24:02,695 --> 00:24:05,580
thành phần lãnh đạo thẻ MD ở đây bởi vì tất cả

307
00:24:05,580 --> 00:24:09,880
ba sẽ được lấy trong tương lai từ máy chủ và sau đó trả lại.

308
00:24:09,880 --> 00:24:15,075
Vì vậy, dữ liệu thành phần món ăn đã được lấy từ máy chủ.

309
00:24:15,075 --> 00:24:20,080
Bây giờ, điều tương tự sẽ đến thành phần DishDetail.

310
00:24:20,080 --> 00:24:27,000
Tôi sẽ thêm vào mở rộng để nhập khẩu và sau đó thêm

311
00:24:27,000 --> 00:24:35,530
một mở rộng vào hoạt hình sẽ để xem thành phần DishDetail.

312
00:24:35,530 --> 00:24:37,415
Cùng với một tầm nhìn,

313
00:24:37,415 --> 00:24:40,095
Tôi cũng sẽ áp dụng mở rộng để

314
00:24:40,095 --> 00:24:47,705
div thẻ ở đó và sau đó để ý kiến div cũng ở đây.

315
00:24:47,705 --> 00:24:50,720
Điều này nằm trong thành phần DishDetail.

316
00:24:50,720 --> 00:24:54,530
Thành phần liên hệ không có bất cứ điều gì đang được lấy từ máy chủ.

317
00:24:54,530 --> 00:25:00,265
Vì vậy, tôi sẽ chỉ đi qua các thành phần về và trong các thành phần về cũng,

318
00:25:00,265 --> 00:25:08,680
tôi sẽ bao gồm mở rộng và cũng trong các hình ảnh động.

319
00:25:08,680 --> 00:25:12,870
Đi đến tập tin mẫu về thành phần ở đây thử nghiệm này

320
00:25:12,870 --> 00:25:17,190
ở đây cho thấy các nhà lãnh đạo đang được lấy từ phía máy chủ.

321
00:25:17,190 --> 00:25:20,310
Vì vậy, tôi sẽ áp dụng việc mở rộng này.

322
00:25:20,310 --> 00:25:23,250
Hãy lưu các thay đổi và sau đó đi và

323
00:25:23,250 --> 00:25:26,960
xem ứng dụng góc cạnh của chúng tôi trong trình duyệt.

324
00:25:26,960 --> 00:25:29,235
Đi đến ứng dụng góc cạnh của chúng tôi.

325
00:25:29,235 --> 00:25:31,665
Bây giờ, khi bạn đi vào mẫu nhà,

326
00:25:31,665 --> 00:25:34,700
bạn có thể thấy rằng các thẻ khi chúng được lấy,

327
00:25:34,700 --> 00:25:38,070
chúng trượt vào tầm nhìn của tôi ở đó.

328
00:25:38,070 --> 00:25:40,970
Bây giờ, tương tự như khi bạn đi đến thành phần về,

329
00:25:40,970 --> 00:25:45,050
bạn thấy rằng một khi dữ liệu được lấy từ máy chủ,

330
00:25:45,050 --> 00:25:50,470
sau đó kết xuất của các nhà lãnh đạo khác nhau đang được

331
00:25:50,470 --> 00:25:56,590
trượt trong bao giờ quá chậm vào vị trí trong quan điểm này ở đây.

332
00:25:56,590 --> 00:25:58,905
Tương tự, đi đến thành phần menu,

333
00:25:58,905 --> 00:26:01,270
chúng ta sẽ thấy một hành vi tương tự ở đây.

334
00:26:01,270 --> 00:26:03,595
Vì vậy, một khi dữ liệu menu đã sẵn sàng,

335
00:26:03,595 --> 00:26:07,065
thành phần menu sẽ trượt vào vị trí ngay tại đó.

336
00:26:07,065 --> 00:26:09,980
Cùng một điều với các thành phần chi tiết món ăn.

337
00:26:09,980 --> 00:26:12,490
Vì vậy, hãy để tôi đi đến thành phần DishDetail và bạn sẽ thấy rằng

338
00:26:12,490 --> 00:26:15,250
chế độ xem trượt vào vị trí

339
00:26:15,250 --> 00:26:18,495
đó nhưng các hoạt hình khác đã

340
00:26:18,495 --> 00:26:22,625
biến mất và tái xuất hiện phần đó vẫn hoạt động giống như trước đây.

341
00:26:22,625 --> 00:26:32,755
Vì vậy, bạn thấy rằng chúng tôi đã giới thiệu một hình ảnh động khác vào ứng dụng Angular của chúng tôi.

342
00:26:32,755 --> 00:26:38,555
Bây giờ, cho dù bạn thích điều này hay bạn muốn làm một cách phức tạp hơn để làm hoạt hình,

343
00:26:38,555 --> 00:26:41,605
chắc chắn, bạn có thể phát điên với

344
00:26:41,605 --> 00:26:45,395
việc làm nhiều thứ khác nhau với hoạt hình của bạn.

345
00:26:45,395 --> 00:26:52,395
Thay đổi nhiều thuộc tính khác nhau trong các kiểu như theo cách bạn thích và vân vân.

346
00:26:52,395 --> 00:26:57,060
Nhưng tôi cảm thấy rằng một vài hình ảnh động tinh tế ở đây và ở đó sẽ

347
00:26:57,060 --> 00:27:02,390
giúp tăng cường giao diện người dùng cho ứng dụng góc cạnh của tôi.

348
00:27:02,390 --> 00:27:08,195
Vì vậy, tôi đã thêm vào hai hình ảnh động mới để ứng dụng Angular của tôi.

349
00:27:08,195 --> 00:27:14,535
Với điều này, chúng tôi hoàn thành phần thứ hai của bài tập hình ảnh động của chúng tôi.

350
00:27:14,535 --> 00:27:18,240
Tôi hy vọng rằng với hai phần tập thể dục này,

351
00:27:18,240 --> 00:27:21,280
bạn đã hiểu rõ hơn về cách sử dụng

352
00:27:21,280 --> 00:27:24,555
hình ảnh động trong ứng dụng Angular của bạn.

353
00:27:24,555 --> 00:27:32,040
Đây là thời điểm tốt để bạn thực hiện một cam kết git với thông điệp, hình ảnh động phần hai.