Автор: Говард Пински
Привет всем! Я Говард Пински, старший евангелист XD в компании Adobe. Сегодня мы расскажем, вывести ваши прототипы на совершенно новый уровень, добавив в них видеоролики и анимации Lottie. Итак, приступим.
Здесь у нас Adobe XD с игровой платформой, которую я разрабатываю. Чтобы оживить интерфейс, добавим несколько видеороликов и анимаций Lottie. В верхней части начального экрана у меня большое качественное изображение, но оно статично. Процесс добавления видеороликов в проект XD очень похож на процесс добавления фотографий. Их можно перетаскивать непосредственно на холст или в пустые фигуры, чтобы использовать функцию маскирования. После добавления и выбора видеоролика в инспекторе свойств отобразятся элементы управления воспроизведением видео. Их можно использовать не только во время воспроизведения видео. В данном случае это происходит автоматически при запуске предварительного просмотра. Но если щелкнуть расположенный слева значок, откроется HUD с дополнительными элементами управления, позволяющими настроить пользовательскую миниатюру, очистить и просмотреть видео, включить или выключить звук, выполнить обрезку (к чему мы перейдем через минуту) и зациклить воспроизведение.
Теперь, когда мы добавили и выбрали видео, и оно воспроизводится, запустим предварительный просмотр, чтобы увидеть, как это все работает. После добавления всего лишь одного элемента наш прототип стал совершенно другим. Прежде чем мы расскажем, как добавлять анимации Lottie, давайте переключимся в одно из других состояний в этом компоненте. Здесь у меня есть другой видеоролик, который воспроизводится автоматически. Но, как вы видите в режиме предварительного просмотра, для того чтобы самолет попал в кадр, требуется несколько секунд. Когда пару минут назад мы вкратце рассказали о HUD, я упомянул, что существует способ обрезать видеоролики. Перейдя в этот режим, можно указать начальную и конечную точку путем перетаскивания маркеров. И в данном случае я хочу, чтобы воспроизведение начиналось сразу перед тем, как начнется действие. Настроив все, применим изменения, щелкнув эту галочку. Следует отметить, что действие функции обрезки полностью обратимо, поэтому всегда можно вернуться в HUD и изменить или отменить правки.
Переключившись обратно в состояние, используемое по умолчанию, еще раз запустим предварительный просмотр. Теперь, когда я перехожу ко второму состоянию, видеоролик автоматически воспроизводится с новой начальной точки. Я также подключил третий видеоролик. И если вернуться к первому видеоролику, отобразится расширенное представление, в котором будет дополнительная информация. Вы можете даже заметить, что видеоролики, находящиеся между состояниями Auto-Animate, воспроизводятся непрерывно.
Итак, теперь расскажем об анимациях Lottie. На экране сообщества я настроил компонент, который отображается при наведении на него указателя мыши. И в нем я грубо нарисовал дополнительную область, которую я люблю использовать для средства выбора анимированных эмодзи. Давайте отредактируем основной компонент, чтобы можно было добавить наш контент. Перейдя к группе в стопке, я несколько раз быстро продублирую существующий слой, а затем перейду в Finder, где у меня хранятся красивые анимации различных эмодзи, созданные Анной Мовин и опубликованные на сайте ui8.net. Как и в случае с видеороликами, файлы Lottie можно перетаскивать на существующий слой Lottie, непосредственно на холст или задать их размер, используя фигуры в качестве масок. А после выбора слоев можно передвинуть воспроизводимое изображение вправо. И мы хотим, чтобы это все воспроизводилось автоматически. Нужно отметить, что в отличие от примера с видеороликами расположенный слева значок предназначен строго для управления циклическим воспроизведением, которое мы хотим использовать для этих взаимодействий. Идеально.
Переключившись обратно на состояние, используемое по умолчанию, для этого компонента, можно просмотреть экран сообщества. Наведем указатель мыши на сообщение, затем наведем его на значок эмодзи, чтобы открыть наши анимации Lottie и увидеть их в действии.
Прежде чем показать вам законченный прототип, кратко рассмотрим триггер окончания воспроизведения, с помощью которого можно автоматизировать некоторые взаимодействия с видеороликами и файлами Lottie. Ранее я затронул тему расширенного состояния компонента. В этом разделе у меня есть кнопка, нажав которую, можно перейти к состоянию загрузки. Здесь я добавил анимацию Lottie, которая запускается сразу после перехода. Возможно, вы зададите себе такой вопрос: что произойдет после завершения анимации?
Переключившись в режим создания прототипов, вы увидите, что в данный момент подключен триггер времени, но можно добавить второе взаимодействие, нажав синюю кнопку со знаком «плюс». Теперь в инспекторе свойств можно выбрать триггер окончания воспроизведения, который сообщит XD о том, что после завершения видеоролика или анимации Lottie нужно выполнить переход. Для этого взаимодействия можно использовать простой переход, приводящий к состоянию воспроизведения. Этот триггер также работает в монтажных областях. В состоянии загрузки того же компонента я добавил другую анимацию Lottie. Помимо триггера времени имеется триггер окончания воспроизведения, который ведет на экран игры. Конечно, это ничего особо не значит, если не посмотреть, как это все работает. Поэтому вернемся к состоянию, используемому по умолчанию. Я запущу предварительный просмотр, разверну это представление, а затем запущу взаимодействие загрузки. Благодаря триггеру окончания воспроизведения компонент автоматически переходит в состояние воспроизведения, в котором можно запустить загружаемую анимацию щелчком мыши. По завершении этой операции будет выполнен переход между монтажными областями.
В этих примерах показана только малая доля того, что можно делать с видеороликами и анимациями Lottie. В будущих руководствах я расскажу о множестве других способов использования этих функций. Прежде чем мы закончим, посмотрите, как выглядит весь интерфейс. Наслаждайтесь.
Выведите свои прототипы на совершенно новый уровень с помощью анимированной графики. Из этого руководства вы узнаете, как создать игровую платформу с использованием видеороликов и анимаций Lottie. Перетаскивайте видеоролики и файлы Lottie прямо на холст проекта или на пустую фигуру, чтобы использовать функцию маскирования. Настраивайте параметры воспроизведения видео в инспекторе свойств. Добавляйте миниатюры, очищайте и просматривайте видеоролики, включайте звук, обрезайте видеоклипы и зацикливайте воспроизведение видео. Создавайте взаимодействия с переходами Auto-Animate и воспроизводите видео непрерывно. Создавайте взаимодействия с использованием триггера окончания воспроизведения, чтобы автоматически выполнять переходы в другое состояние по окончании воспроизведения анимации Lottie.
