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

2
00:00:04,660 --> 00:00:09,853
Давайте получим краткий обзор поддержки анимации в угловом, прежде чем мы идем и

3
00:00:09,853 --> 00:00:15,820
попробовать наши силы на самом деле реализации некоторых анимаций в нашем угловом приложении.

4
00:00:17,010 --> 00:00:18,290
Как вы понимаете, сами по себе анимации

5
00:00:18,290 --> 00:00:23,800
не добавляют к функциональности вашего Angular приложения.

6
00:00:23,800 --> 00:00:27,210
Тогда возникает вопрос, зачем использовать анимацию?

7
00:00:27,210 --> 00:00:31,420
Теперь, если вы посмотрите на него с пользовательского опыта, или

8
00:00:31,420 --> 00:00:36,250
с точки зрения дизайна пользовательского интерфейса, то вы начинаете видеть, что анимации

9
00:00:36,250 --> 00:00:40,860
имеют смысл и цель для их использования в приложении.

10
00:00:41,860 --> 00:00:46,360
Дайте визуальную обратную связь пользователю о

11
00:00:46,360 --> 00:00:49,560
вещах, которые происходят в вашем угловом приложении.

12
00:00:49,560 --> 00:00:54,920
Таким образом, вы можете иметь приложение полностью лишен анимации и

13
00:00:54,920 --> 00:00:58,050
, что оно по-прежнему обеспечивает тот же набор функций.

14
00:00:58,050 --> 00:01:00,710
Так что это то, что нам нужно иметь в виду

15
00:01:00,710 --> 00:01:05,280
, когда мы вводим анимации в наше угловое приложение.

16
00:01:05,280 --> 00:01:12,150
Анимация не требуется или не требуется, но

17
00:01:12,150 --> 00:01:18,940
они добавляют эту маленькую специю к вашему угловатому приложению, если вы держите это представление в

18
00:01:18,940 --> 00:01:24,090
ваш ум, то вы будете подходить к анимации с совершенно другой точки зрения.

19
00:01:25,380 --> 00:01:31,890
Это как не добавлять слишком много соли в ваши блюда только потому, что соль добавляет вкус.

20
00:01:33,030 --> 00:01:36,340
Для большей части соли также портит ваше блюдо.

21
00:01:36,340 --> 00:01:38,630
То же самое с анимацией тоже.

22
00:01:38,630 --> 00:01:42,370
Слишком много анимации и вы в конечном итоге с запутанным пользователем.

23
00:01:43,400 --> 00:01:48,790
Но анимации, добавленные в тонко, чтобы дать предложения пользователям, или

24
00:01:48,790 --> 00:01:55,545
дать визуальную обратную связь пользователям, добавляют большую ценность для вашего углового приложения.

25
00:01:55,545 --> 00:02:00,295
Теперь, к счастью, угловая структура материала, которую мы уже используем в рамках

26
00:02:00,295 --> 00:02:05,825
нашего углового приложения, поставляется со своим собственным встроенным набором анимации.

27
00:02:05,825 --> 00:02:10,074
Действительно, именно поэтому мы включили модуль анимации браузера.

28
00:02:10,074 --> 00:02:15,060
В нашем угловом приложении прямо в начале, потому что угловой

29
00:02:15,060 --> 00:02:19,950
материал уже использует поддержку анимации, которую

30
00:02:21,350 --> 00:02:25,445
угловой обеспечивает через или это анимация.

31
00:02:25,445 --> 00:02:30,135
Таким образом, библиотека угловых материалов

32
00:02:30,135 --> 00:02:35,840
использует предложенную анимацию, которая поставляется с дизайном материала.

33
00:02:35,840 --> 00:02:38,700
Такие вещи, как, например, когда вы нажимаете на кнопку,

34
00:02:38,700 --> 00:02:43,980
эффекты пульсации, которые вы видите на кнопке и тонкое увеличение,

35
00:02:43,980 --> 00:02:50,220
и уменьшение различных частей вашего представления, и так далее.

36
00:02:50,220 --> 00:02:55,010
Они уже предложены подходом к материальному дизайну, и

37
00:02:55,010 --> 00:02:58,840
так угловой материал уже принимает многие из этих вещей.

38
00:02:58,840 --> 00:03:03,140
Таким образом, даже без явного прикладывания усилий,

39
00:03:03,140 --> 00:03:08,100
вы автоматически получаете некоторые из необходимых анимаций в

40
00:03:08,100 --> 00:03:11,950
ваше угловое приложение просто с помощью углового материала.

41
00:03:11,950 --> 00:03:17,640
Но предположим, что вы хотите добавить свою пряность в микс.

42
00:03:17,640 --> 00:03:21,030
Тогда, как вы подходите к анимации в угловом?

43
00:03:21,030 --> 00:03:25,510
Это то, что мы быстро рассмотрим в этой лекции.

44
00:03:25,510 --> 00:03:31,091
А затем перейти к упражнению, где мы будем реализовывать fu и посмотреть, если мы имеем смысл

45
00:03:31,091 --> 00:03:37,402
или если они имеют значение для того, как вы воспринимаете ваше угловое приложение.

46
00:03:39,145 --> 00:03:42,053
Идея поддержки Angular для анимации

47
00:03:42,053 --> 00:03:46,723
заключается в том, что она позволяет создавать анимации с почти

48
00:03:46,723 --> 00:03:52,270
родной производительностью того, что вы получите с чистыми анимациями CSS.

49
00:03:52,270 --> 00:03:55,300
Теперь вы можете сразу задаться вопросом,

50
00:03:55,300 --> 00:03:57,690
почему бы просто не использовать чистую анимацию CSS?

51
00:03:57,690 --> 00:04:04,930
Действительно, вы можете это сделать, но ничто не мешает вам использовать чистую анимацию CSS в вашем Angular приложении.

52
00:04:04,930 --> 00:04:09,880
Но преимущество использования

53
00:04:09,880 --> 00:04:14,660
углового подхода к внедрению анимации заключается в том, что угловая,

54
00:04:14,660 --> 00:04:19,280
в первую очередь, использует поддержку API веб-анимации, который поддерживается

55
00:04:19,280 --> 00:04:24,620
в более современных версиях всех браузеров.

56
00:04:24,620 --> 00:04:29,540
Теперь, так что если ваша версия браузера уже поддерживает Web Animations API,

57
00:04:29,540 --> 00:04:32,380
, то Angular просто использовать начало для

58
00:04:32,380 --> 00:04:36,640
поддержки анимации, которые вы будете включать в ваше приложение Angular.

59
00:04:36,640 --> 00:04:39,970
Если нет, то вам нужно использовать полизаполнение

60
00:04:39,970 --> 00:04:45,270
под названием web-animations.min.js в вашем угловом приложении.

61
00:04:45,270 --> 00:04:49,190
В упражнениях мы начнем с предположения, что мы нацелены на современные браузеры

62
00:04:49,190 --> 00:04:53,355
, поэтому я явно не включаю полифилл.

63
00:04:53,355 --> 00:04:59,625
Если вы решите сделать это, документация по угловым анимациям

64
00:04:59,625 --> 00:05:05,395
явно указывает вам, как заполнить это для таргетинга старых браузеров.

65
00:05:05,395 --> 00:05:07,425
Итак, снова возвращаясь к вопросу,

66
00:05:07,425 --> 00:05:13,440
почему бы не использовать чистую анимацию CSS, а не использовать угловую анимацию?

67
00:05:13,440 --> 00:05:15,850
Теперь здесь

68
00:05:15,850 --> 00:05:20,560
преимущество использования угловой анимации в вашем приложении выходит на первый план.

69
00:05:20,560 --> 00:05:24,710
Тот факт, что угловая анимация тесно связана

70
00:05:24,710 --> 00:05:28,710
с вашим кодом, который вы пишете для своего углового приложения.

71
00:05:28,710 --> 00:05:32,740
И, следовательно, вы можете вызвать многие из этих анимаций, привязанных в

72
00:05:32,740 --> 00:05:37,330
непосредственно к тому, как развивается ваше угловое приложение, и

73
00:05:37,330 --> 00:05:40,560
, что происходит в вашем угловом приложении.

74
00:05:40,560 --> 00:05:45,610
Таким образом, вы можете связать его с жизненным циклом ваших компонентов.

75
00:05:45,610 --> 00:05:50,356
Вы можете связать его с различными этапами изменения представления

76
00:05:50,356 --> 00:05:53,290
во время рендеринга представления.

77
00:05:53,290 --> 00:06:00,130
И так это преимущество, которое вы получаете от использования библиотеки Angular Animations,

78
00:06:00,130 --> 00:06:05,870
вместо чистых анимаций CSS, - это то, что стоит рассмотреть.

79
00:06:05,870 --> 00:06:09,140
Как мы подходим к анимации в Angular?

80
00:06:09,140 --> 00:06:12,730
Сами анимации построены вокруг состояний и

81
00:06:12,730 --> 00:06:17,850
переходов между состояниями в угловой структуре, поэтому

82
00:06:17,850 --> 00:06:22,440
мы определяем разные состояния, состояние может быть что угодно, но

83
00:06:22,440 --> 00:06:27,500
вы хотите определить как состояние с точки зрения анимации.

84
00:06:27,500 --> 00:06:31,290
Любое изменение состояния, которое вы хотите вызвать

85
00:06:31,290 --> 00:06:35,330
, может вызвать эффект анимации, чтобы появиться в картинке.

86
00:06:35,330 --> 00:06:39,840
Таким образом, переходы вдоль состояний вызовут поведение анимации

87
00:06:39,840 --> 00:06:41,550
в вашем угловом приложении.

88
00:06:41,550 --> 00:06:46,080
Как мы увидим в следующем слайде, где я покажу вам пример

89
00:06:46,080 --> 00:06:50,468
, как вы можете использовать ленты и переходы для запуска анимации.

90
00:06:50,468 --> 00:06:56,260
Таким образом, анимационный аспект вашего углового приложения

91
00:06:56,260 --> 00:07:01,420
определяется внутри декоратора компонентов, который вы используете в своих компонентах.

92
00:07:01,420 --> 00:07:06,140
Таким образом, декоратор компонентов имеет анимацию цветов свойств, которую вы

93
00:07:06,140 --> 00:07:11,600
будете использовать для определения триггеров значений для ваших анимаций.

94
00:07:11,600 --> 00:07:13,650
Так что я использовал слово триггер.

95
00:07:13,650 --> 00:07:17,400
В упражнениях вы увидите, как мы будем реализовывать триггеры для анимации

96
00:07:17,400 --> 00:07:22,370
и как мы будем применять триггеры к различным элементам шаблона,

97
00:07:22,370 --> 00:07:27,520
, а затем запускать эти анимации при определенных обстоятельствах.

98
00:07:27,520 --> 00:07:31,680
И кроме того, когда вам нужно использовать анимацию в вашем приложении Angular

99
00:07:31,680 --> 00:07:36,550
, в первую очередь, вам нужно импортировать модуль анимации браузера.

100
00:07:36,550 --> 00:07:41,330
Мы уже сделали это в нашем первом упражнении, потому что

101
00:07:41,330 --> 00:07:45,840
модуль анимации браузера был необходим для поддержки углового материала.

102
00:07:45,840 --> 00:07:50,269
Теперь, кроме того, когда вы реализуете анимацию в своих компонентах.

103
00:07:51,280 --> 00:07:55,840
Тогда вам понадобится помощь классов радиуса, таких как триггер, состояние,

104
00:07:55,840 --> 00:07:56,610
стиль, animate,

105
00:07:56,610 --> 00:08:01,550
переход, которые должны быть импортированы из библиотеки Angular animations.

106
00:08:01,550 --> 00:08:08,010
И мы будем делать это в каждом компоненте, который требует использования анимации.

107
00:08:08,010 --> 00:08:12,930
Как я уже упоминал в предыдущем слайде, поведение анимации в вашем

108
00:08:12,930 --> 00:08:17,960
Angular приложении вращается вокруг состояний и переходов между состояниями.

109
00:08:17,960 --> 00:08:21,470
Штаты могут быть все, что вы определяете как состояние.

110
00:08:21,470 --> 00:08:26,280
Как вы увидите в примере, который следует в самом первом упражнении после этой лекции

111
00:08:26,280 --> 00:08:30,650
, вы были определены 2 состояния, называемых показано и скрыто.

112
00:08:30,650 --> 00:08:33,600
Из названия государства вы автоматически

113
00:08:33,600 --> 00:08:37,920
начинаете угадывать, что означают эти два состояния.

114
00:08:37,920 --> 00:08:42,800
Теперь, когда вы переходите из отображаемого состояния в скрытое, переход

115
00:08:42,800 --> 00:08:46,970
из показанного в скрытое состояние вызовет своего рода анимацию.

116
00:08:46,970 --> 00:08:50,780
Так что, может быть, вы скрываете элемент в вашем представлении

117
00:08:52,170 --> 00:08:56,360
, изменив непрозрачность элемента,

118
00:08:56,360 --> 00:09:00,240
непрозрачность означает, насколько прозрачен элемент и непрозрачность

119
00:09:00,240 --> 00:09:05,260
означает, что элемент полностью непрозрачный и видимый на экране.

120
00:09:05,260 --> 00:09:10,360
Если установить непрозрачность в ноль, элемент полностью исчезает с экрана.

121
00:09:10,360 --> 00:09:13,260
Мы не удаляем этот элемент из

122
00:09:13,260 --> 00:09:18,110
, просто скрывая этот элемент, изменяя его непрозрачность.

123
00:09:18,110 --> 00:09:21,350
Итак, таким образом, вы можете спровоцировать.

124
00:09:21,350 --> 00:09:24,070
Аналогично, вы можете изменить размер элемента.

125
00:09:24,070 --> 00:09:30,740
Вы можете расширить или сократить размер элемента, применив преобразование к свойству

126
00:09:30,740 --> 00:09:36,470
этого элемента с помощью преобразования масштаба для элемента.

127
00:09:36,470 --> 00:09:41,190
Мы увидим примеры, как я сказал в следующем упражнении.

128
00:09:41,190 --> 00:09:45,670
Таким образом, все анимации, которые вы описываете в своем угловом приложении

129
00:09:45,670 --> 00:09:49,590
в директиве компонента с использованием свойства анимации

130
00:09:49,590 --> 00:09:54,620
, будут вращаться вокруг состояний и переходов между состояниями.

131
00:09:54,620 --> 00:09:58,350
Когда вы говорите о состояниях и переходах, есть несколько специальных состояний

132
00:09:58,350 --> 00:10:03,400
, которые мы должны учитывать при определении этих переходов.

133
00:10:03,400 --> 00:10:06,810
Одно из этих государств называется пустым государством.

134
00:10:06,810 --> 00:10:09,580
И элемент, которого нет на экране.

135
00:10:09,580 --> 00:10:13,240
Элемент или вид частиц, который не прикреплен к виду

136
00:10:13,240 --> 00:10:15,880
, будет считаться в состоянии пустоты.

137
00:10:15,880 --> 00:10:18,510
Таким образом, когда элемент появляется в представлении,

138
00:10:18,510 --> 00:10:23,940
, что если он прикреплен к примеру, то элемент переходит из

139
00:10:23,940 --> 00:10:29,590
состояние пустоты в одно из существующих состояний этого элемента.

140
00:10:29,590 --> 00:10:30,410
Таким образом, в этом случае

141
00:10:30,410 --> 00:10:35,680
вы можете определить переход от перехода от пустоты к заданному состоянию.

142
00:10:35,680 --> 00:10:40,580
Аналогично, у вас также есть другое государство, называемое подстановочным состоянием, или

143
00:10:40,580 --> 00:10:45,870
оно определяется звездой, что означает, что вас не волнует, какое это состояние.

144
00:10:45,870 --> 00:10:48,464
Поэтому, если вам нужно определить переход, вы можете сказать,

145
00:10:48,464 --> 00:10:52,832
, если вы переходите из состояния void в состояние звезды, то есть из состояния void в любое

146
00:10:52,832 --> 00:10:58,260
другое состояние, которое вы переходите, вы можете применить определенное преобразование.

147
00:10:58,260 --> 00:11:02,970
Таким образом, это два специальных способа определения определенных состояний

148
00:11:02,970 --> 00:11:07,130
при определении анимации в компоненте декоратора.

149
00:11:08,570 --> 00:11:13,430
Так, в частности, есть несколько способов

150
00:11:13,430 --> 00:11:18,410
описания переходов, которые представляют особый интерес для курса.

151
00:11:18,410 --> 00:11:23,050
Переход из состояния void в любое состояние может быть описан просто с помощью

152
00:11:23,050 --> 00:11:27,876
двоеточия enter, вместо того, чтобы говорить пустоту стрелка звезда.

153
00:11:27,876 --> 00:11:32,520
Таким образом, вы увидите, что мы будем использовать стрелку

154
00:11:32,520 --> 00:11:34,610
для описания переходов между состоянием.

155
00:11:34,610 --> 00:11:40,540
Так что это синтаксис, который вы увидите, как я использую, когда я создаю переходы.

156
00:11:40,540 --> 00:11:41,260
Аналогично, поэтому

157
00:11:41,260 --> 00:11:46,700
пустота для любого другого состояния может быть описана простым использованием двоеточия enter.

158
00:11:46,700 --> 00:11:50,060
Таким образом, это означает, что это представление входит в

159
00:11:50,060 --> 00:11:52,760
вид, который выкладывается на экране.

160
00:11:52,760 --> 00:11:56,190
Аналогично, переход из любого состояния в состояние void,

161
00:11:56,190 --> 00:12:00,130
означает, что вы удаляете этот элемент из представления.

162
00:12:00,130 --> 00:12:05,510
Это было бы также, может быть указано как двоеточие,

163
00:12:05,510 --> 00:12:09,400
означает, что этот элемент выходит из этого конкретного представления.

164
00:12:09,400 --> 00:12:13,860
Таким образом, вы увидите меня, используя двоеточие enter и двоеточие уйти также где я описал

165
00:12:14,970 --> 00:12:21,130
переходы во втором упражнении, которое вы увидите в этом уроке.

166
00:12:21,130 --> 00:12:26,945
Итак, с этим быстрым пониманием анимации в угловом.

167
00:12:26,945 --> 00:12:29,935
Давайте посмотрим, как мы на самом деле пишем код.

168
00:12:29,935 --> 00:12:35,873
И для этого мы перейдем к упражнениям, где мы проиллюстрируем вам,

169
00:12:35,873 --> 00:12:40,494
, как мы используем только что полученные знания о том, как анимации

170
00:12:40,494 --> 00:12:45,777
описываются в угловом виде, чтобы написать код пропуска для

171
00:12:45,777 --> 00:12:49,458
конструирования и применения анимации для

172
00:12:49,458 --> 00:12:53,830
различных элементов в нашем виды наших компонентов.

173
00:12:53,830 --> 00:13:00,309
[МУЗЫКА]