1
00:00:00,000 --> 00:00:04,763
[МУЗЫКА]

2
00:00:04,763 --> 00:00:07,931
Как мы узнали в предыдущей лекции,

3
00:00:07,931 --> 00:00:12,927
анимации добавляют большую ценность вашему приложению.

4
00:00:12,927 --> 00:00:16,080
Это добавляет лучший пользовательский опыт.

5
00:00:16,080 --> 00:00:19,990
Теперь, очевидно, это не означает, что вы бросаете анимацию по всему месту

6
00:00:19,990 --> 00:00:22,730
только ради анимации.

7
00:00:22,730 --> 00:00:29,480
Вы ставите анимацию, чтобы сделать пользовательский опыт лучше.

8
00:00:30,680 --> 00:00:34,130
В этом упражнении мы сделаем нашу первую анимацию

9
00:00:34,130 --> 00:00:37,006
в рамках нашего углового приложения, которое мы разработали до сих пор.

10
00:00:37,006 --> 00:00:38,425
И по пути

11
00:00:38,425 --> 00:00:44,190
узнает, как анимация может быть реализована в угловом приложении.

12
00:00:44,190 --> 00:00:49,127
Мы продолжим этот поток во второй части упражнения, где

13
00:00:49,127 --> 00:00:53,206
мы добавим больше анимации в наше угловое приложение.

14
00:00:53,206 --> 00:00:58,720
Когда мы начали этот курс, в самом первом упражнении с Angular,

15
00:00:58,720 --> 00:01:04,147
мы уже добавили в модуль анимации в наше угловое приложение

16
00:01:04,147 --> 00:01:10,299
в app.module.ts5, поэтому мы импортировали модуль анимации прямо там.

17
00:01:10,299 --> 00:01:13,551
Теперь следующим шагом является перейти к компонентам и

18
00:01:13,551 --> 00:01:17,240
затем добавить в анимацию везде, где это требуется.

19
00:01:17,240 --> 00:01:24,336
Первая анимация, которую мы собираемся добавить, находится в компоненте dishdetail здесь.

20
00:01:24,336 --> 00:01:28,758
Итак, перейдя к компоненту dishdetail,

21
00:01:28,758 --> 00:01:32,790
позвольте мне импортировать несколько классов здесь.

22
00:01:32,790 --> 00:01:38,271
Я буду импортировать триггер, состояние, стиль

23
00:01:38,271 --> 00:01:45,382
, анимировать и переход от.

24
00:01:50,250 --> 00:01:53,120
@angular /анимации.

25
00:01:56,695 --> 00:02:02,460
Теперь, как только мы импортируем их, мы можем использовать их в создании нашей анимации.

26
00:02:02,460 --> 00:02:06,390
Итак, как добавить анимацию к компоненту?

27
00:02:06,390 --> 00:02:12,360
Добавим триггеры анимации в компонентный декоратор здесь.

28
00:02:12,360 --> 00:02:19,247
Таким образом, войдя в компонент декоратора после стилей URL,

29
00:02:19,247 --> 00:02:25,217
и добавить в анимации как свойство внутри.

30
00:02:25,217 --> 00:02:30,140
А затем здесь я собираюсь определить триггер,

31
00:02:30,140 --> 00:02:34,126
который я называю триггером видимости, и

32
00:02:34,126 --> 00:02:39,888
я собираюсь определить триггер видимости внутри здесь.

33
00:02:39,888 --> 00:02:43,942
Теперь для этого триггера видимости

34
00:02:43,942 --> 00:02:48,972
я определяю два состояния, я определяю одно

35
00:02:48,972 --> 00:02:54,282
состояние, как показано на рисунке, и я определяю второе состояние

36
00:02:54,282 --> 00:03:00,932
как, Скрытый.

37
00:03:00,932 --> 00:03:04,930
Так что у меня есть гибкость определения моих состояний вот так.

38
00:03:04,930 --> 00:03:09,670
Итак, для показанного состояния, что я хочу применить?

39
00:03:09,670 --> 00:03:16,565
Таким образом, для показанного состояния я буду применять стиль следующим образом,

40
00:03:16,565 --> 00:03:21,350
так что стили, которые я собираюсь применить для

41
00:03:21,350 --> 00:03:26,416
показанного состояния, я сделаю преобразование, и

42
00:03:26,416 --> 00:03:33,240
преобразование, которое я собираюсь применить, является шкалой 1.0.

43
00:03:33,240 --> 00:03:38,170
Поэтому я хочу показать его в

44
00:03:38,170 --> 00:03:42,810
его нормальный размер и

45
00:03:42,810 --> 00:03:47,167
непрозрачность 0.

46
00:03:47,167 --> 00:03:50,929
Так вот как я определяю отображаемый стиль.

47
00:03:50,929 --> 00:03:57,884
Итак, и скрытое состояние я определяю стиль как,

48
00:04:03,816 --> 00:04:09,659
Transform, я скажу масштаб (0.5).

49
00:04:09,659 --> 00:04:13,002
Вы можете поиграть с этими числами

50
00:04:13,002 --> 00:04:17,294
, чтобы увидеть, является ли анимация тем, что вы хотите.

51
00:04:17,294 --> 00:04:21,194
Я также играл с этими номерами, пока не получил то, что я был

52
00:04:21,194 --> 00:04:22,194
доволен.

53
00:04:22,194 --> 00:04:29,457
И 0, или для их дальнейшего показанного состояния, я поставлю непрозрачность как 1.

54
00:04:29,457 --> 00:04:31,929
Непрозрачность 1 означает, что она полностью видна.

55
00:04:31,929 --> 00:04:34,942
Непрозрачность 0 означает, что она полностью скрыта.

56
00:04:34,942 --> 00:04:38,555
Теперь я определил два состояния здесь, показано и здесь в состоянии.

57
00:04:38,555 --> 00:04:43,481
Теперь, переход между этими двумя состояниями,

58
00:04:43,481 --> 00:04:50,931
я собираюсь определить здесь, как, всякий раз, когда я перехожу из любого состояния в любое состояние,

59
00:04:50,931 --> 00:04:56,339
не имеет значения, в какое состояние я двигаюсь,

60
00:04:56,339 --> 00:05:02,108
преобразование выполняется с анимацией 0,5 секунд,

61
00:05:02,108 --> 00:05:04,780
или 500 миллисекунд.

62
00:05:04,780 --> 00:05:08,522
И я успокоюсь.

63
00:05:08,522 --> 00:05:13,323
Итак, здесь я указываю, что если я перейду из показанного в скрытое состояние или

64
00:05:13,323 --> 00:05:19,140
из скрытого в отображаемое состояние, я перейду в течение 0,5 секунд или 500 миллисекунд.

65
00:05:19,140 --> 00:05:23,278
И затем, я сделаю переход, облегчая входы и выход, так что

66
00:05:23,278 --> 00:05:27,755
это не будет линейным переходом, он будет медленно идти и

67
00:05:27,755 --> 00:05:31,218
затем облегчать переход, так что

68
00:05:31,218 --> 00:05:35,383
, что это не будет вяленким переходом от одного к другому.

69
00:05:35,383 --> 00:05:40,411
Таким образом, вы можете использовать эту легкость в или ease-in-out

70
00:05:40,411 --> 00:05:45,125
, чтобы указать, как вы хотите, чтобы переход произошел.

71
00:05:45,125 --> 00:05:49,625
Итак, теперь для этой анимации я указал

72
00:05:49,625 --> 00:05:54,861
видимость в качестве триггера для этой анимации.

73
00:05:54,861 --> 00:05:58,911
Теперь, чтобы эта анимация работала правильно,

74
00:05:58,911 --> 00:06:04,344
я перейду в свой DishdetailComponent, а затем я укажу,

75
00:06:04,344 --> 00:06:09,412
внутри этого компонента, начальное значение видимости.

76
00:06:09,412 --> 00:06:13,444
Итак, я скажу, что видимость

77
00:06:13,444 --> 00:06:18,484
изначально установлена на показанный, а затем,

78
00:06:18,484 --> 00:06:25,379
всякий раз, когда я меняюсь с одного блюда на другое.

79
00:06:25,379 --> 00:06:28,649
И это случается всякий раз, когда я приношу блюдо здесь.

80
00:06:28,649 --> 00:06:32,117
Поэтому всякий раз, когда я меняю блюдо с одного блюда на другое,

81
00:06:32,117 --> 00:06:35,249
это вызывается всякий раз, когда изменяется параметр маршрута.

82
00:06:35,249 --> 00:06:37,942
Так что в этот момент я собираюсь применить анимацию.

83
00:06:37,942 --> 00:06:48,520
Я заставлю триггер перейти от показанного к скрытому состоянию, а затем обратно из скрытого в показанное состояние, когда блюдо доступно.

84
00:06:48,520 --> 00:06:53,330
Так что применить это преобразование.

85
00:06:53,330 --> 00:06:58,720
Поэтому я собираюсь приложить это утверждение внутри

86
00:06:58,720 --> 00:07:03,330
блок здесь в этой функции стрелки.

87
00:07:03,330 --> 00:07:11,806
А затем также определить эту видимость здесь как.

88
00:07:11,806 --> 00:07:16,845
Поэтому, когда я перехожу из одного состояния в другое, поэтому

89
00:07:16,845 --> 00:07:22,421
, когда я начинаю извлекать информацию о блюде со стороны сервера,

90
00:07:22,421 --> 00:07:27,784
я сначала скрою текущее блюдо, установив значение видимости

91
00:07:27,784 --> 00:07:32,503
на скрытое, что означает, что текущее блюдо, которое отображается

92
00:07:32,503 --> 00:07:37,265
, будет скрыто от представления.

93
00:07:37,265 --> 00:07:42,085
И тогда, когда новое блюдо станет доступным, оно снова появится в поле зрения.

94
00:07:42,085 --> 00:07:48,147
Итак, чтобы сделать это, когда мое блюдо станет доступным во второй части,

95
00:07:48,147 --> 00:07:54,651
в подписной части, я скажу в качестве последнего заявления в этом блоке,

96
00:07:54,651 --> 00:07:59,299
я скажу, что эта видимость равна показанной здесь.

97
00:07:59,299 --> 00:08:04,513
Так что мой взгляд становится видимым в этот момент.

98
00:08:04,513 --> 00:08:09,229
Теперь я не применяю это к сообщению об ошибке, потому что я собираюсь применить эту видимость только к тем частям моего шаблона

99
00:08:09,229 --> 00:08:17,616
, где мое блюдо действительно отображается.

100
00:08:17,616 --> 00:08:20,910
Теперь, если есть ошибка, то я просто хочу скрыть правильное блюдо.

101
00:08:20,910 --> 00:08:24,751
Затем покажите только сообщение об ошибке в представлении.

102
00:08:24,751 --> 00:08:29,021
Итак, с этими изменениями в моем DishdetailComponent.

103
00:08:29,021 --> 00:08:34,092
Итак, вы можете снова увидеть, объясняя это в нем еще раз.

104
00:08:34,092 --> 00:08:40,072
Когда я начну извлекание нового блюда при изменении параметров маршрута,

105
00:08:40,072 --> 00:08:42,924
я установлю видимость на скрытую так

106
00:08:42,924 --> 00:08:48,445
, что текущее блюдо, отображаемое в представлении, будет скрываться.

107
00:08:48,445 --> 00:08:52,427
И тогда, когда новое блюдо становится доступным, так что произойдет, когда

108
00:08:52,427 --> 00:08:56,221
подписка вызывается, когда это наблюдаемое становится доступным.

109
00:08:56,221 --> 00:09:00,001
А потом, когда блюдо становится доступным, а затем,

110
00:09:00,001 --> 00:09:04,455
я поставил это блюдо на блюдо, которое пришло из наблюдаемого.

111
00:09:04,455 --> 00:09:08,181
В этот момент я восстановлю видимость до этого показанного состояния.

112
00:09:08,181 --> 00:09:13,476
Итак, что мое новое блюдо, которое я приготовил, может быть показано на экране.

113
00:09:13,476 --> 00:09:18,150
С этим изменением я теперь перехожу к файлу шаблона

114
00:09:18,150 --> 00:09:22,710
и в файле шаблона я собираюсь применить

115
00:09:22,710 --> 00:09:26,366
видимость обоих блюдо здесь.

116
00:09:26,366 --> 00:09:31,160
Таким образом, первый div, где я показываю блюдо, я буду

117
00:09:31,160 --> 00:09:35,948
применить триггер видимости к блюду.

118
00:09:35,948 --> 00:09:39,417
И тогда я установлю это равным

119
00:09:42,937 --> 00:09:49,060
Видимость, которая является переменной, которую я определил в коде.

120
00:09:49,060 --> 00:09:54,450
Теперь я применяю это к блюду здесь, а также применяю то же самое

121
00:09:54,450 --> 00:09:58,530
ко второму div, где я показываю комментарии.

122
00:09:59,700 --> 00:10:00,837
И вот оно.

123
00:10:00,837 --> 00:10:05,902
Так что позвольте мне сохранить все изменения, а затем мы пойдем и

124
00:10:05,902 --> 00:10:11,213
посмотрим, как работает эта анимация в нашем примере.

125
00:10:11,213 --> 00:10:15,015
Перейдя в браузер, теперь я показываю им меню.

126
00:10:15,015 --> 00:10:19,618
Позвольте мне выбрать одно из блюд, а затем перейти в вид блюд здесь.

127
00:10:19,618 --> 00:10:24,336
Поэтому, когда блюдо отображается, обратите внимание, что в любое время я перейду от

128
00:10:24,336 --> 00:10:28,432
это блюдо к следующему блюду, поэтому, нажав вправо.

129
00:10:28,432 --> 00:10:33,349
Затем это блюдо исчезает, а затем, когда новое блюдо становится доступным,

130
00:10:33,349 --> 00:10:37,900
вид снова становится видимым, а затем отображается новое блюдо.

131
00:10:37,900 --> 00:10:42,210
Аналогичным образом, я могу сделать еще один, а затем заметить, что новое блюдо

132
00:10:42,210 --> 00:10:46,070
, как только информация становится доступной, оно становится снова видимым.

133
00:10:46,070 --> 00:10:51,890
Так что это переход, который я применяю в этом примере здесь.

134
00:10:51,890 --> 00:10:58,860
Итак, возвращаясь назад, вы можете увидеть, что такое же поведение снова повторяется.

135
00:10:58,860 --> 00:11:02,730
Это небольшое изменение пользовательского интерфейса

136
00:11:02,730 --> 00:11:08,310
добавляет большое значение тому, как пользователь воспринимает ваше приложение.

137
00:11:08,310 --> 00:11:13,520
Как вы понимаете, это не добавляет много функциональности вашего приложения

138
00:11:13,520 --> 00:11:18,690
, но добавляет лучший пользовательский интерфейс.

139
00:11:18,690 --> 00:11:23,625
И именно здесь мы применяем анимацию разумно в нашем приложении

140
00:11:23,625 --> 00:11:28,658
, чтобы сделать определенный пользовательский опыт более значимым

141
00:11:28,658 --> 00:11:33,302
для пользователя, который просматривает ваше угловое приложение, или

142
00:11:33,302 --> 00:11:39,421
просмотр вашего мобильного приложения, которое мы увидим в последующих курсах.

143
00:11:39,421 --> 00:11:43,957
Это завершает это упражнение по анимации.

144
00:11:43,957 --> 00:11:48,939
Мы продолжим исследования анимации во второй части упражнения

145
00:11:48,939 --> 00:11:53,082
, которая появится сразу после этого.

146
00:11:53,082 --> 00:11:57,513
Это хорошее время для вас, чтобы сделать комментарий Git с анимацией сообщений,

147
00:11:57,513 --> 00:11:58,164
часть первая.

148
00:11:58,164 --> 00:12:03,927
[МУЗЫКА]