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

2
00:00:04,763 --> 00:00:07,931
Như chúng ta đã học được trong bài giảng trước,

3
00:00:07,931 --> 00:00:12,927
hình ảnh động thêm rất nhiều giá trị nội tại cho ứng dụng của bạn.

4
00:00:12,927 --> 00:00:16,080
Nó thêm vào một trải nghiệm người dùng tốt hơn.

5
00:00:16,080 --> 00:00:19,990
Bây giờ rõ ràng điều đó không có nghĩa là bạn ném hình ảnh động khắp nơi

6
00:00:19,990 --> 00:00:22,730
chỉ vì lợi ích của việc làm hình ảnh động.

7
00:00:22,730 --> 00:00:29,480
Bạn đặt hình ảnh động tại chỗ vì lợi ích của việc làm cho trải nghiệm người dùng tốt hơn.

8
00:00:30,680 --> 00:00:34,130
Trong bài tập này, chúng tôi sẽ làm hoạt hình đầu tiên của chúng

9
00:00:34,130 --> 00:00:37,006
tôi trong ứng dụng Angular của chúng tôi mà chúng tôi đã phát triển cho đến nay.

10
00:00:37,006 --> 00:00:38,425
Và trên đường đi,

11
00:00:38,425 --> 00:00:44,190
tìm hiểu làm thế nào hình ảnh động có thể được thực hiện trong một ứng dụng Angular.

12
00:00:44,190 --> 00:00:49,127
Chúng tôi sẽ tiếp tục chủ đề này trong phần thứ hai của bài tập, nơi

13
00:00:49,127 --> 00:00:53,206
chúng tôi sẽ thêm hình ảnh động vào ứng dụng Angular của chúng tôi.

14
00:00:53,206 --> 00:00:58,720
Khi chúng tôi bắt đầu khóa học này, trong bài tập đầu tiên với Angular,

15
00:00:58,720 --> 00:01:04,147
chúng tôi đã thêm vào mô-đun hoạt hình vào ứng dụng Angular của chúng tôi

16
00:01:04,147 --> 00:01:10,299
trong app.module.ts5, vì vậy chúng tôi đã nhập mô-đun hoạt hình ngay tại đó.

17
00:01:10,299 --> 00:01:13,551
Bây giờ bước tiếp theo là đi đến các thành phần và

18
00:01:13,551 --> 00:01:17,240
sau đó thêm vào hoạt hình bất cứ nơi nào nó được yêu cầu.

19
00:01:17,240 --> 00:01:24,336
Hoạt hình đầu tiên mà chúng ta sẽ thêm vào là trong thành phần dishdetail ở đây.

20
00:01:24,336 --> 00:01:28,758
Vì vậy, đi đến thành phần dishdetail,

21
00:01:28,758 --> 00:01:32,790
hãy để tôi nhập một vài lớp học ở đây.

22
00:01:32,790 --> 00:01:38,271
Tôi sẽ nhập kích hoạt, trạng thái,

23
00:01:38,271 --> 00:01:45,382
kiểu, hoạt hình và chuyển tiếp từ.

24
00:01:50,250 --> 00:01:53,120
@angular /hoạt hình.

25
00:01:56,695 --> 00:02:02,460
Bây giờ, một khi chúng tôi nhập chúng, chúng tôi có thể sử dụng chúng trong việc xây dựng hoạt hình của chúng tôi.

26
00:02:02,460 --> 00:02:06,390
Vì vậy, làm thế nào để bạn thêm hoạt hình vào một thành phần?

27
00:02:06,390 --> 00:02:12,360
Chúng tôi sẽ thêm các trigger hoạt hình vào trang trí thành phần ở đây.

28
00:02:12,360 --> 00:02:19,247
Vì vậy, đi vào trang trí thành phần sau các URL phong cách,

29
00:02:19,247 --> 00:02:25,217
và thêm vào các hình ảnh động như một tài sản bên trong đó.

30
00:02:25,217 --> 00:02:30,140
Và rồi ở đây, tôi sẽ định nghĩa một kích hoạt,

31
00:02:30,140 --> 00:02:34,126
mà tôi gọi là kích hoạt khả năng hiển thị, và

32
00:02:34,126 --> 00:02:39,888
tôi sẽ định nghĩa kích hoạt khả năng hiển thị bên trong đây.

33
00:02:39,888 --> 00:02:43,942
Bây giờ cho kích hoạt tầm nhìn này,

34
00:02:43,942 --> 00:02:48,972
tôi sẽ xác định hai trạng thái, tôi sẽ xác định một

35
00:02:48,972 --> 00:02:54,282
trạng thái như được hiển thị và tôi sẽ xác định một trạng thái thứ hai

36
00:02:54,282 --> 00:03:00,932
như, Ẩn.

37
00:03:00,932 --> 00:03:04,930
Vì vậy, tôi có sự linh hoạt trong việc xác định trạng thái của mình như thế này.

38
00:03:04,930 --> 00:03:09,670
Vì vậy, đối với trạng thái được hiển thị, nó là gì mà tôi muốn áp dụng?

39
00:03:09,670 --> 00:03:16,565
Vì vậy, đối với trạng thái hiển thị, tôi sẽ áp dụng phong cách như sau,

40
00:03:16,565 --> 00:03:21,350
vì vậy các phong cách mà tôi sẽ áp dụng cho

41
00:03:21,350 --> 00:03:26,416
trạng thái hiển thị, tôi sẽ làm biến đổi, và

42
00:03:26,416 --> 00:03:33,240
biến đổi mà tôi sẽ áp dụng là một quy mô 1.0.

43
00:03:33,240 --> 00:03:38,170
Vì vậy, tôi muốn hiển thị

44
00:03:38,170 --> 00:03:42,810
nó trong kích thước bình thường của nó và

45
00:03:42,810 --> 00:03:47,167
độ mờ của 0.

46
00:03:47,167 --> 00:03:50,929
Vì vậy, đây là cách tôi xác định phong cách hiển thị.

47
00:03:50,929 --> 00:03:57,884
Vì vậy, và trạng thái ẩn tôi xác định phong cách như,

48
00:04:03,816 --> 00:04:09,659
Biến đổi, tôi sẽ nói quy mô (0.5).

49
00:04:09,659 --> 00:04:13,002
Bạn có thể chơi xung quanh với những con số này

50
00:04:13,002 --> 00:04:17,294
để xem liệu hoạt hình có phải là những gì bạn mong muốn hay không.

51
00:04:17,294 --> 00:04:21,194
Tôi cũng chơi xung quanh với những con số này cho đến khi tôi nhận được một cái gì đó mà tôi đã

52
00:04:21,194 --> 00:04:22,194
hài lòng với.

53
00:04:22,194 --> 00:04:29,457
Và 0, hoặc cho trạng thái hiển thị thêm của họ, tôi sẽ đặt độ mờ như 1.

54
00:04:29,457 --> 00:04:31,929
Độ mờ 1 có nghĩa là nó hoàn toàn có thể nhìn thấy.

55
00:04:31,929 --> 00:04:34,942
Độ mờ 0 có nghĩa là nó bị ẩn hoàn toàn.

56
00:04:34,942 --> 00:04:38,555
Bây giờ, tôi đã xác định hai trạng thái ở đây, được hiển thị và ở đây trong tiểu bang.

57
00:04:38,555 --> 00:04:43,481
Bây giờ, sự chuyển đổi giữa hai

58
00:04:43,481 --> 00:04:50,931
trạng thái này, tôi sẽ định nghĩa ở đây là, bất cứ khi nào tôi di chuyển từ bất kỳ trạng thái nào sang bất kỳ

59
00:04:50,931 --> 00:04:56,339
trạng thái nào, nó không quan trọng trạng thái nào tôi di chuyển,

60
00:04:56,339 --> 00:05:02,108
biến đổi được thực hiện với hoạt hình là 0,5 giây,

61
00:05:02,108 --> 00:05:04,780
hoặc 500 mili giây.

62
00:05:04,780 --> 00:05:08,522
Và tôi sẽ dễ dàng ra ngoài.

63
00:05:08,522 --> 00:05:13,323
Vì vậy, ở đây, những gì tôi đang chỉ định là nếu tôi di chuyển từ hiển thị đến trạng thái

64
00:05:13,323 --> 00:05:19,140
ẩn hoặc từ ẩn đến trạng thái hiển thị, tôi sẽ di chuyển trong vòng 0,5 giây, hoặc 500 mili giây.

65
00:05:19,140 --> 00:05:23,278
Và sau đó, tôi sẽ thực hiện quá trình chuyển đổi bằng cách nới lỏng vào và ra, vì vậy

66
00:05:23,278 --> 00:05:27,755
nó sẽ không phải là một quá trình chuyển đổi tuyến tính, nó sẽ được từ từ

67
00:05:27,755 --> 00:05:31,218
vào và sau đó giảm bớt sự chuyển đổi, để

68
00:05:31,218 --> 00:05:35,383
nó không phải là một quá trình chuyển đổi giật từ cái này sang cái kia.

69
00:05:35,383 --> 00:05:40,411
Vì vậy, bạn có thể sử dụng tính dễ dàng này trong hoặc dễ dàng ra ngoài

70
00:05:40,411 --> 00:05:45,125
để xác định cách bạn muốn quá trình chuyển đổi xảy ra.

71
00:05:45,125 --> 00:05:49,625
Vì vậy, bây giờ cho hoạt hình này, tôi đã chỉ

72
00:05:49,625 --> 00:05:54,861
định khả năng hiển thị như là kích hoạt cho hoạt hình này.

73
00:05:54,861 --> 00:05:58,911
Bây giờ để cho phép hoạt hình này hoạt động chính xác,

74
00:05:58,911 --> 00:06:04,344
tôi sẽ đi vào DishDetailComponent của tôi, và sau đó tôi sẽ chỉ định,

75
00:06:04,344 --> 00:06:09,412
trong thành phần này, giá trị ban đầu cho khả năng hiển thị.

76
00:06:09,412 --> 00:06:13,444
Vì vậy, tôi sẽ nói khả năng hiển thị

77
00:06:13,444 --> 00:06:18,484
ban đầu được thiết lập để hiển thị, và sau đó,

78
00:06:18,484 --> 00:06:25,379
bất cứ khi nào tôi thay đổi từ một món ăn khác.

79
00:06:25,379 --> 00:06:28,649
Và điều này xảy ra bất cứ khi nào tôi lấy món ăn ở đây.

80
00:06:28,649 --> 00:06:32,117
Vì vậy, bất cứ khi nào tôi thay đổi các món ăn từ một món ăn khác,

81
00:06:32,117 --> 00:06:35,249
điều này là gây ra bất cứ khi nào các thông số tuyến đường thay đổi.

82
00:06:35,249 --> 00:06:37,942
Vì vậy, tại thời điểm đó, tôi sẽ áp dụng các hoạt hình.

83
00:06:37,942 --> 00:06:42,649
Tôi sẽ làm cho kích hoạt đi từ hiển thị đến trạng thái ẩn và

84
00:06:42,649 --> 00:06:48,520
sau đó trở lại từ ẩn để hiển thị trạng thái khi món ăn có sẵn.

85
00:06:48,520 --> 00:06:53,330
Vì vậy, để áp dụng sự biến đổi đó.

86
00:06:53,330 --> 00:06:58,720
Vì vậy, tôi sẽ kèm theo tuyên bố này bên trong

87
00:06:58,720 --> 00:07:03,330
một khối ở đây trong chức năng mũi tên này.

88
00:07:03,330 --> 00:07:11,806
Và sau đó cũng xác định khả năng hiển thị này ở đây là.

89
00:07:11,806 --> 00:07:16,845
Vì vậy, khi tôi chuyển đổi từ trạng thái này sang trạng thái khác,

90
00:07:16,845 --> 00:07:22,421
vì vậy khi tôi bắt đầu lấy thông tin món ăn từ phía máy chủ,

91
00:07:22,421 --> 00:07:27,784
trước tiên tôi sẽ ẩn món ăn hiện tại bằng cách đặt

92
00:07:27,784 --> 00:07:32,503
giá trị hiển thị thành ẩn, có nghĩa

93
00:07:32,503 --> 00:07:37,265
là món ăn hiện tại đang được hiển thị sẽ bị ẩn khỏi chế độ xem.

94
00:07:37,265 --> 00:07:42,085
Và sau đó khi món ăn mới có sẵn, nó sẽ bật trở lại khung cảnh.

95
00:07:42,085 --> 00:07:48,147
Vì vậy, để làm điều đó, khi món ăn của tôi trở nên có sẵn trong phần thứ hai,

96
00:07:48,147 --> 00:07:54,651
trong phần đăng ký, tôi sẽ nói như là tuyên bố cuối cùng trong khối đó,

97
00:07:54,651 --> 00:07:59,299
tôi sẽ nói khả năng hiển thị này bằng với hiển thị ở đây.

98
00:07:59,299 --> 00:08:04,513
Vì vậy, quan điểm của tôi trở nên rõ ràng tại thời điểm đó.

99
00:08:04,513 --> 00:08:09,229
Bây giờ tôi không áp dụng điều này vào thông báo lỗi bởi vì tôi

100
00:08:09,229 --> 00:08:13,654
sẽ áp dụng khả năng hiển thị này chỉ cho những phần của

101
00:08:13,654 --> 00:08:17,616
mẫu của tôi nơi món ăn của tôi đang thực sự được hiển thị.

102
00:08:17,616 --> 00:08:20,910
Bây giờ, nếu có một lỗi, sau đó tôi chỉ muốn giấu các món ăn chính xác.

103
00:08:20,910 --> 00:08:24,751
Sau đó, chỉ hiển thị thông báo lỗi trong chế độ xem ở đó.

104
00:08:24,751 --> 00:08:29,021
Vì vậy, với những thay đổi này để DishDetailComponent của tôi.

105
00:08:29,021 --> 00:08:34,092
Vì vậy, bạn có thể thấy một lần nữa, giải thích điều này trong đó một lần nữa.

106
00:08:34,092 --> 00:08:40,072
Khi tôi bắt đầu lấy món ăn mới khi thay đổi các thông số tuyến đường,

107
00:08:40,072 --> 00:08:42,924
tôi sẽ thiết lập khả năng hiển thị để ẩn để

108
00:08:42,924 --> 00:08:48,445
món ăn hiện tại đang được hiển thị trong chế độ xem sẽ ẩn chính nó.

109
00:08:48,445 --> 00:08:52,427
Và sau đó khi món ăn mới trở nên có sẵn, do đó sẽ xảy ra khi

110
00:08:52,427 --> 00:08:56,221
đăng ký được gọi là khi quan sát được trở nên có sẵn.

111
00:08:56,221 --> 00:09:00,001
Và sau đó, khi món ăn trở nên có sẵn và sau đó,

112
00:09:00,001 --> 00:09:04,455
tôi đặt món ăn này vào món ăn mà trở về từ người quan sát.

113
00:09:04,455 --> 00:09:08,181
Tại thời điểm đó, tôi sẽ khôi phục lại khả năng hiển thị cho trạng thái được hiển thị đó.

114
00:09:08,181 --> 00:09:13,476
Vì vậy, món ăn mới của tôi mà tôi đã lấy có thể được hiển thị trên màn hình.

115
00:09:13,476 --> 00:09:18,150
Với sự thay đổi này, bây giờ tôi đi đến tập tin mẫu,

116
00:09:18,150 --> 00:09:22,710
và trong tập tin mẫu tôi sẽ áp dụng khả

117
00:09:22,710 --> 00:09:26,366
năng hiển thị cho cả hai món ăn ở đây.

118
00:09:26,366 --> 00:09:31,160
Vì vậy, div đầu tiên nơi tôi hiển thị các món ăn tôi sẽ

119
00:09:31,160 --> 00:09:35,948
áp dụng, Khả năng hiển thị kích hoạt cho các món ăn.

120
00:09:35,948 --> 00:09:39,417
Và sau đó tôi sẽ thiết lập đó bằng

121
00:09:42,937 --> 00:09:49,060
, Visibility, đó là biến mà tôi đã xác định trong mã có.

122
00:09:49,060 --> 00:09:54,450
Bây giờ, tôi áp dụng điều này cho các món ăn ở đây, và cũng áp dụng

123
00:09:54,450 --> 00:09:58,530
điều tương tự cho div thứ hai, nơi tôi hiển thị các ý kiến.

124
00:09:59,700 --> 00:10:00,837
Và đó là nó.

125
00:10:00,837 --> 00:10:05,902
Vì vậy, hãy để tôi lưu tất cả các thay đổi, và sau đó chúng tôi sẽ

126
00:10:05,902 --> 00:10:11,213
đi và xem hoạt hình này hoạt động như thế nào trong ví dụ của chúng tôi.

127
00:10:11,213 --> 00:10:15,015
Đi đến trình duyệt, bây giờ tôi đang hiển thị chúng menu.

128
00:10:15,015 --> 00:10:19,618
Hãy để tôi chọn một trong các món ăn và sau đó di chuyển vào khung cảnh của các món ăn ở đây.

129
00:10:19,618 --> 00:10:24,336
Vì vậy, khi món ăn được hiển thị, chú ý rằng bất cứ khi nào tôi di chuyển từ

130
00:10:24,336 --> 00:10:28,432
món ăn này sang món ăn tiếp theo, vì vậy bằng cách nhấp vào bên phải.

131
00:10:28,432 --> 00:10:33,349
Sau đó, món ăn đó biến mất, và sau đó khi món ăn mới trở nên có sẵn,

132
00:10:33,349 --> 00:10:37,900
quan điểm lại trở nên nhìn thấy và sau đó món ăn mới được hiển thị.

133
00:10:37,900 --> 00:10:42,210
Tương tự như vậy, tôi có thể làm thêm một lần nữa và sau đó nhận thấy rằng món ăn mới,

134
00:10:42,210 --> 00:10:46,070
ngay sau khi thông tin trở nên có sẵn, nó trở nên nhìn thấy lại.

135
00:10:46,070 --> 00:10:51,890
Vì vậy, đây là sự chuyển đổi mà tôi đang áp dụng trong ví dụ này ở đây.

136
00:10:51,890 --> 00:10:58,860
Vì vậy, quay trở lại, bạn có thể thấy hành vi tương tự lặp lại chính nó. Sự

137
00:10:58,860 --> 00:11:02,730
thay đổi giao diện người dùng nhỏ này

138
00:11:02,730 --> 00:11:08,310
thêm rất nhiều giá trị cho cách người dùng nhận thức ứng dụng của bạn.

139
00:11:08,310 --> 00:11:13,520
Như bạn nhận ra, điều này không thêm nhiều vào chức năng của ứng dụng của

140
00:11:13,520 --> 00:11:18,690
chính nó, nhưng thêm vào một trải nghiệm người dùng tốt hơn.

141
00:11:18,690 --> 00:11:23,625
Và đó là nơi chúng tôi áp dụng hình ảnh động một cách khôn ngoan trong

142
00:11:23,625 --> 00:11:28,658
ứng dụng của chúng tôi để làm cho một số người dùng kinh nghiệm có ý nghĩa hơn cho

143
00:11:28,658 --> 00:11:33,302
người dùng đang xem ứng dụng Angular của

144
00:11:33,302 --> 00:11:39,421
bạn, hoặc xem ứng dụng di động của bạn, mà chúng ta sẽ thấy trong các khóa học sau.

145
00:11:39,421 --> 00:11:43,957
Điều này hoàn thành bài tập này về hình ảnh động.

146
00:11:43,957 --> 00:11:48,939
Chúng tôi sẽ tiếp tục khám phá hình ảnh động vào

147
00:11:48,939 --> 00:11:53,082
phần thứ hai của bài tập mà đi lên ngay sau này.

148
00:11:53,082 --> 00:11:57,513
Đây là thời điểm tốt để bạn thực hiện một bình luận Git với các hình ảnh động tin nhắn,

149
00:11:57,513 --> 00:11:58,164
phần một.

150
00:11:58,164 --> 00:12:03,927
[ NHẠC]