Продолжая наше анимационное упражнение из предыдущей части первой.
Добавим еще несколько анимаций в наше угловое приложение.
В частности, мы добавим в анимацию, которая будет срабатывать
при изменении маршрута в нашем одностраничном приложении.
Мы также добавим в анимацию, которая позволяет
вид, который будет отображаться, когда данные извлекаются со стороны сервера,
поэтому, когда вы отбрасываете счетчик в своем представлении, а затем рендеринг представления,
мы хотим, чтобы представление было проецироваться на экран
, а не просто появляясь все внезапно.
Итак, пара новых анимаций, которые мы добавим в этом упражнении.
По пути, когда у вас есть несколько анимаций в вашем приложении,
может быть лучше реорганизовать код таким образом, который является более
управляемым, а не включать частичный
каждый кусочек триггера в каждый из файлов
в наших компонентах нашего углового приложения.
Итак, давайте сделаем все эти шаги как часть второй анимационного упражнения.
Первое, что я собираюсь сделать, это то, что мы реорганизовать
код, который мы уже сделали в рамках одного из этих упражнений анимации.
Этот подход, который я вам иллюстрирую, - это просто мой предложенный подход.
Вам не обязательно следовать именно таким образом,
, но я чувствую, что это помогает лучше организовать код.
Итак, то, что я собираюсь сделать, так же, как у нас была отдельная папка для сервисов,
у нас была отдельная папка для общих ресурсов и так далее,
Я собираюсь создать новую папку с именем animations.
Мы будем хранить все связанные с анимацией код там, а затем использовать его, импортируя его
везде, где это требуется в наших компонентах в нашем угловом приложении.
Итак, перейдя к нашему коду,
в папке приложения я собираюсь создать новую папку и назвать ее Animations.
Внутри этой папки Animations
Я собираюсь создать новый файл и из-за отсутствия лучшего слова я
назову его app.animation.ts файл.
Затем внутри этого я собираюсь импортировать
различные классы из угловых анимаций, которые я сделал в компоненте DishDetail.
Итак, перейдя к компоненту DishDetail,
вы помните, что первое, что я сделал
, я добавил эту строку в компонент DishDetail.
Я собираюсь вырезать его из компонента DishDetail и
вместо этого вставить его в анимацию приложения,
, чтобы везде, где это приложение анимации
включено, импортируя его в наши другие компоненты,
это автоматически придет прямо там.
Теперь, в этом приложении анимации,
я собираюсь создать некоторые заводские функции, которые будут экспортировать различные триггеры.
Первая заводская функция, которую я создаю
эту функцию экспорта и назову ее видимость.
Эта функция видимости вернет код
, соответствующий триггеру, который мы сделали в компоненте DishDetail.
Итак, возвращаясь к компоненту DishDetail,
я просто собираюсь вырезать весь этот код для триггера отсюда, а затем вернуться к файлу animation.ts приложения
, а затем вставить его в
место прямо там, в функции здесь.
Теперь это становится функцией, доступной для импорта из компонента DishDetail.
Итак, возвращаясь к компоненту DishDetail.
Теперь, на месте, где я импортировал триггер и другие классы,
я собираюсь теперь импортировать видимость
из приложения анимации, анимации,
, и поэтому эта функция теперь станет доступна мне в моем коде здесь.
Итак, как только я сделаю это внутри моей анимации,
я могу просто вызвать эту функцию, чтобы я мог сказать
видимость, а затем код триггера теперь становится частью моего компонента здесь.
Теперь это, я считаю, является лучшим способом организации кода для моих анимаций.
Теперь, если мне нужно использовать тот же триггер в другом компоненте,
я могу просто следовать этому подходу, чтобы включить его в мои другие компоненты.
Давайте сохраним изменения, а затем пойдем и возьмем
быстрый взгляд на наше приложение в браузере.
Зайдите в браузер, вы видите, что когда я перехожу к компоненту диска,
компонент диска находится прямо там, а затем
он будет иметь такое же поведение анимации, как и раньше.
Итак, рефакторинг кода,
мне удалось лучше организовать код, и
по-прежнему работает точно так же, как часть первой этого упражнения.
Если у вас была только одна анимация, используемая в одном месте,
, то предыдущий подход работает просто хорошо, но если у вас есть
несколько, и особенно если вы повторно используете код во многих компонентах,
, тогда этот рефакторированный подход является гораздо лучшим способом реализации решения.
Следующее обновление, которое я собираюсь сделать, это добавить анимацию об изменениях маршрута.
Итак, когда я перехожу из одного представления в другое представление, так что, например,
из дома в меню или меню для контакта или наоборот,
, тогда я хочу иметь возможность анимировать эти изменения в моем приложении.
Итак, для этого
я введу еще одну функцию в файл animation.ts приложения.
Итак, зайдя в приложение animation.ts файл,
я экспортирую другую функцию, которую я называю FlyInOut,
вы увидите, почему я использую это имя здесь.
Тогда это вернет функцию, которая является триггером с именем FlyInOut.
Итак, внутри был триггер,
я собираюсь определить код для того, что будет делать этот триггер.
Итак, здесь, я определяю состояние здесь с именем звезды,
так что это не имеет значения, какое это состояние,
это применимо к любому состоянию, а затем я определяю
некоторые стили здесь и два стиля, которые я
определяю является непрозрачность является одним из
и преобразование translateX (0),
так что означает, что в этом случае он находится в нормальном положении.
Теперь, когда я определяю переходы,
я также могу определить переходы таким образом.
Итак, если я скажу ввести переход,
переход ввода является сокращенной для того, чтобы сказать, что переход от
void состояния к одному из существующих состояний.
Итак, что означает, что представление входит в мое приложение.
Поэтому введите, что означает, что теперь, когда я направляюсь в
конкретный вид в моем одностраничном приложении,
это представление будет входить в представление.
Итак, вот почему я могу применить переход двоеточие ввода в этом случае.
Теперь аналогичным образом, есть еще один переход под названием двоеточие
оставить, который я могу применить, когда вы переходите из
этого представления, а затем вы берете представление из розетки маршрутизатора вашего приложения.
Итак, мы собираемся сделать как вход, так и другой, который уходит.
Итак, две функции, которые я собираюсь определить здесь,
переход войти и переход оставить здесь.
Итак, для ввода,
что я хочу определить?
Для ввода, позвольте мне определить функцию здесь,
и аналогично, для ухода также,
Я собираюсь определить функции здесь.
Итак, создаем здесь эти леса.
Теперь я могу ввести информацию, которую я хочу в этих переходах.
Итак, когда происходит этот переход,
я начну со стиля преобразования,
translateX минус 100 процентов,
, что означает, что представление полностью вне представления здесь.
Итак, вы начинаете там с минус 100 процентов в этот момент.
Итак, когда вы входите,
вы начнете с этого,
и затем также в этот момент,
я оживлю, и оживлю в 500.
Итак, когда я указываю 500, как это,
вы даже можете сделать это таким образом.
Альтернативно, вы можете сказать, в кавычках,
«500ms», а затем вы даже можете использовать ease-in или ease-out.
Итак, позвольте мне изменить это на
500ms ease-in, потому что это представление приходит.
Итак, мы будем легко- в представлении.
Итак, для отпуска, я буду применять переход как анимированные,
, а затем я бы сказал 500 миллисекунд, снова, ease-out.
Итак, эта точка зрения уходит.
Итак, мы хотим смягчить этот взгляд.
Тогда, в этом случае,
стиль, который я применяю
является преобразование,
translateX 100 процентов.
Таким образом, этот вид полностью исчезнет с экрана там.
Перевести X 100 процентов.
Также я установлю непрозрачность на ноль.
Итак, полностью исчезает с экрана.
Итак, эта анимация добавит здесь хорошую новую функцию.
Теперь, для этого тоже,
я могу добавить, начиная с непрозрачности нуля, если вы предпочитаете.
Давайте добавим это и посмотрим, как это выглядит.
Итак, это триггер flyInOut, который я определил здесь.
Теперь вам, очевидно, интересно,
как я могу использовать этот flyInOut, а затем применить
это для маршрутизации переходов в моем приложении?
Итак, чтобы сделать это, мы перейдем к, во-первых,
, начиная с файла menu component.ts.
Я собираюсь импортировать
flyInOut
из анимации приложения.
Затем, перейдя к компоненту,
Теперь я собираюсь ввести новое свойство, называемое как хост.
Я расскажу вам, что попадет в хост в течение короткого времени.
Затем мы также включим свойство анимации,
, который является массивом здесь.
Тогда, внутри, я буду использовать flyInOut, который мы только что импортировали.
Таким образом, этот триггер анимации будет применен к этому медиакомпоненту.
Теперь, внутри хоста,
, так что я гарантирую, что эта конкретная анимация происходит при изменении маршрута.
Итак, внутри этого хоста здесь,
я поставлю это как сказать,
@flyInOut и сказать true,
, и это должно быть заключено в кавычки также,
@flyInOut, true, а затем стиль,
блок отображения.
Таким образом, эти два должны быть применены внутри свойства хоста здесь.
Теперь, когда мы это сделаем, мой компонент меню теперь начнет анимацию
, когда я направляюсь в компонент меню,
, а затем и когда я покидаю компонент меню.
Теперь я применим то же самое к остальным компонентам моего углового приложения.
Итак, что я сделаю, это
Я просто скопирую это,
, а затем мы применим это к компоненту about.
Итак, я перейду к компоненту о.
В компоненте декоратор
я включил информацию здесь,
, и вы видите красную линию squiggly, которая напоминает мне, что мне нужно импортировать
flyInOut из анимации, анимации приложения.
Итак, тот же подход, о компоненте,
то в компоненте контакта также, то же самое,
, а затем применить свойства хоста и анимации к компоненту декоратор,
и то, что еще у нас есть?
Домашний компонент. Давайте перейдем к домашнему компоненту и повторим то же самое здесь.
Я добавлю в хост и свойство анимации
, а затем иду вперед и импортировать
flyInOut, из анимации приложения.
Мы пропустили что-нибудь? О, нам также нужно обновить деталь блюда.
Итак, позвольте мне перейти к компоненту детали блюда.
Поскольку у нас уже есть видимость там,
я просто собираюсь импортировать flyInOut.
Затем, так как мы уже создали остальные части здесь,
Я собираюсь войти и вставить этот код,
и, очевидно, у меня есть две анимации здесь.
Позвольте мне вырезать видимость отсюда, а затем добавить
его в другую анимацию,
, а затем вырезать это, так что у меня есть одно свойство анимации с
как flyInOut, так и функции видимости, которые включены и вызываются там,
, а затем свойство хоста.
Теперь давайте сохраним изменения, а затем взглянем на
новую анимацию, которую мы только что применили к нашим компонентам.
Начинаем с видом на дом.
Итак, у нас есть домашний вид, который отображается здесь.
Позвольте мне теперь быстро перейти к представлению «О программе»
, а затем вы увидите, что представление «О программе» просто скользит в то время как
вид «Главная» скользит на экран здесь.
Аналогично, когда я перехожу в меню,
вы увидите, что представление Меню скользит в то время как представление «О программе» выскользнет.
Это так быстро, что вы не замечаете его как такового.
Аналогично, для представления «Контакт»
вы видите, что вид контакта скользит в.
Таким образом, этот вид анимации может быть добавлен с помощью
этот подход, который мы только что проиллюстрировали для вашего углового приложения.
Мы еще не закончили. Мы сделаем еще одну анимацию в нашем приложении.
Чтобы проиллюстрировать, что я хотел бы сделать в следующей анимации,
давайте быстро посмотрим на компонент меню.
Итак, вы видите, что когда компонент меню,
, когда спиннер вращается, а затем получает замену на вид,
вид вдруг появляется на экране,
и это немного обжаривает глаз.
Вы можете этого не заметить.
Вы можете быть вполне довольны этим.
Но мы можем добавить таким образом, чтобы облегчить в
это представление, когда данные извлекаются с сервера и представление визуализируется в.
Итак, когда переменная блюда в моем файле menu component.ts становится не нулевым,
то счетчик будет скрыт, а затем вид блюда,
меню строится и затем выложено.
Итак, мы хотим, чтобы это облегчило экран.
Итак, давайте добавим еще одну анимацию, чтобы эффект, как в компоненте меню.
Мы также применим то же самое в компоненте детализации блюда.
Мы также будем использовать то же самое в компоненте «Главная» и компоненте «О программе»
, где мы извлекаем данные, чтобы показать список лидеров.
Итак, везде, где вы извлекаете данные с сервера, а затем выкладываете представление,
, когда появляется представление,
мы хотим облегчить представление, используя эту новую анимацию, которую я собираюсь создать дальше.
Перейдя к файлу animation.ts приложения,
Я собираюсь добавить в другую функцию здесь,
и позвольте мне назвать его расширением.
Эта функция расширит представление, которое выкладывается
после получения данных со стороны сервера.
Итак, это представление, опять же,
я верну триггер здесь.
Я назовем триггер как расширение,
и этот триггер будет создан.
Как определить этот триггер.
Итак, внутри этого триггера мы собираемся включить состояние со звездой.
Так что не имеет значения, в каком это состоянии.
Все состояния будут отображены со стилем
непрозрачность одного преобразования x 0.
Таким образом, он отображается справа и по центру в моем приложении.
Это должна быть скобка.
Я смотрел на него и сказал,
Почему он показывает красную черту.
Итак, когда вы печатаете очень быстро, вы часто совершаете ошибки там.
Итак, вместо квадратной скобки
, что должна быть скобка там.
Так вот, это государство.
Таким образом, любое состояние, которое будет полностью видно и центрировано там, где оно должно быть центрировано.
Теперь позвольте мне запустить переход.
Теперь этот переход будет запускаться только
при входе, когда представление будет выложено на экране.
Выход части мы уже делаем это в анимации маршрута, так что нам это не нужно.
Нам нужна только inter часть для этого представления, потому что
вид отображается на этом экране там.
Итак, в enter
я собираюсь определить переход соответствующим образом.
Итак, в переходный период, что я хочу делать?
Я хочу применить тот же подход, который я использовал с переходом ввода здесь.
Итак, я просто скопирую это, а затем внесу некоторые незначительные изменения в код.
Итак, для ввода перехода здесь также,
я хочу применить то же самое.
Я скажу перевести Insta из 100 процентов.
Я собираюсь просто использовать 50 процентов, а затем я сделаю перевод Y.
So, что означает, что это представление упадет с топ-50 перветов, начиная с
непрозрачности нуля, а затем я облегчу его в немного быстрее,
200 миллисекунд и облегчит его в наше приложение.
Итак, вы видите небольшую корректировку кода здесь.
Итак, перевести минус 50 процентов и непрозрачность ноль и
это облегчается в 200 миллисекунд, а затем в этот момент,
я могу применить этот стиль как этот же стиль.
Я подам заявку. Итак, я просто скопирую этот стиль, а затем применим этот стиль.
Итак, когда он будет облегчен,
он войдет и будет полностью виден там, где он должен быть.
Итак, это функция расширения, которую я определил здесь.
Итак, где я хочу использовать эту функцию?
Мы перейдем сначала к компоненту меню и внутри компонента меню,
Я теперь также импортирую,
расширить, а затем добавить его в мои анимации, а затем, как я могу применить это расширение?
Итак, перейдя в этот файл шаблона компонентов меню.
В файле шаблона
я собираюсь применить расширение к
список сетки, где я применяю это.
Итак, позвольте мне скопировать это, а затем также мы пойдем
к домашнему компоненту и внутри домашнего компонента также,
Я собираюсь включить расширение, а затем добавить расширение в анимацию,
, а затем перейти к домашнему компоненту шаблона, а затем я буду применять
, которые расширяются к компонентам блюда MD карты,
к компонентам продвижения MD карты, а также к лидеру
компонентов MD карты здесь, потому что все эти
три будут извлечены в будущем с сервера, а затем визуализированы.
Таким образом, данные о компонентах блюда уже извлекаются с сервера.
Теперь то же самое происходит в компоненте DishDetail.
Я собираюсь добавить в расширение к импорту, а затем добавить
расширение в анимацию, идущее в представление компонента DishDetail.
Наряду с видимостью
я также применим расширение на
карты div там, а затем к комментариям div также здесь.
Это в компоненте DishDetail.
Компонент контакта не имеет ничего, что извлекается с сервера.
Итак, я просто перейду к компоненту о компоненте и в компоненте о,
я буду включать расширение, а также в анимации.
Перейдя к файлу шаблона компонентов здесь этот тест
здесь, который показывает, что лидеры извлекаются со стороны сервера.
Итак, я собираюсь применить расширение над этим.
Давайте сохраним изменения, а затем пойдем и посмотрим
на наше угловое приложение в браузере.
Идем в наше угловое приложение.
Теперь, когда вы идете в домашний шаблон,
вы можете видеть, что карты, когда они были получены,
они скользнул в мой взгляд там.
Теперь, аналогично, когда вы идете к компоненту о,
вы видите, что как только данные извлекаются с сервера,
то рендеринг различных лидеров является
скользить в так медленно в позицию в этом представлении здесь.
Аналогично, перейдя к компоненту меню,
мы увидим такое же поведение здесь.
Итак, как только данные меню будут готовы,
компонент меню скользит на место прямо там.
То же самое с деталями блюда.
Итак, позвольте мне перейти к компоненту DishDetail, и вы увидите, что
вид скользит на место, но
другая анимация, которая была
исчезает и вновь появляется эта часть, все еще работает так же, как и раньше.
Итак, вы видите, что мы ввели еще одну анимацию в наше угловое приложение.
Теперь, нравится ли вам это или вы хотите сделать более сложный способ сделать анимацию,
конечно, вы можете сходить с ума с
делать много различных вещей с вашей анимацией.
Изменение многих различных свойств в стилях, как вам нравится и так далее.
Но я чувствовал, что несколько тонких анимаций здесь и там
помогут улучшить пользовательский интерфейс для моего углового приложения.
Итак, я добавил еще две новые анимации в свое угловое приложение.
С этим мы завершаем вторую часть нашего упражнения анимации.
Я надеюсь, что с этими двумя частями упражнения,
вы лучше поняли о том, как использовать
анимации в вашем угловом приложении.
Это хорошее время для вас, чтобы сделать git commit с сообщением, анимация часть вторая.