Автор: Акшура 🔥 (https://t.me/axureaxure)
Дата публикации: 27 мая 2018 г.
-----------------------------------------------------------------------------------------------
Итак, что же мы будем делать? Вот такое интро для видео:
Тут используются как стандартные анимации, доступные в Axure, так и добавленные с помощью плагина.
Поехали!
1) скачиваем плагин здесь: http://animate.axurist.com/animate.axurist.zip
Распаковываем скачанный архив и открываем файл animate.min.rp из этого архива.
2) в открытом файле:
а) удаляем все созданные там страницы
б) создаём новую чистую страницу
в) задаём чёрный цвет фона для все страницы
г) устанавливаем выравнивание страницы от центра
г) ОБЯЗАТЕЛЬНО добавляем на созданную страницу master с именем animate.axure - он там единственный в этом файле
Пример:
3) добавляем на страницу элементы, которые будут участвовать в анимации
4) первая анимация это сборка логотипа axure из 3-х частей, каждая из которых прилетает с разных краёв экрана:
Для этого выставляем все 3 части в ФИНАЛЬНУЮ точку - то есть так, как они должны встать после срабатывания анимации.
Теперь прописываем им анимации на появление
а) буква "A" будет прилетать у нас слева. Для неё используем анимацию fadeInLeftBig из набора Animate.css, чтобы у нас одновременно происходило два действия с этой буквой: она бы и появлялась из пустоты (fadeIn), и двигалась бы слева направо (LeftBig)
б) буквы "XUR" сделаны у меня одной картинкой и они дложны прилетать сверху. Для них используем анимацию fadeInLeftBig из Animate.css
в) буква "E" должна прилетать с правого края экрана. Для неё используем анимацию fadeInLeftBig из Animate.css
Теперь подробнее о том, как прописать эти анимации указанным элементам:
- т.к. элементы сначала должны быть не видны при загрузке страницы, то включаем им свойство Hidden (то есть "скрытый")
- т.к. анимация должна запускаться при загрузке страницы в браузере, то используем событие OnPageLoad
- и первым делом добавим небольшую паузу при загрузке страницы, чтобы анимация элементов запускалась только после того, как страница у всех загрузилась и пользователь приготовился смотреть. Для этого добавляем действие Wait с длительностью 500ms:
- самой первой должна появиться буква "A". Чтобы сработала наша анимация из Animate.css, нужно выбрать действие Open Link и дополнительно New Window/Tab, а в поле для адреса ссылки добавить вот такую функцию:
javascript:@fadeInLeftBig<,>widgetname:LogoAxure-A
Давайте подробнее разберём функцию для анимации, чтобы понимать, как она работает.
Итак, мы имеем: javascript:@fadeInLeftBig<,>widgetname:LogoAxure-A
Эту функцию можно разбить на следующие составляющие:
javascript:@ - запускает выполнение JavaScript (в нашем случае нужно для анимаций, но вообще вы можете сюда всё, что угодно накрутить, если разбираетесь в JS)
fadeInLeftBig - это название нашей анимации, которая должна сработать (взято из списка доступных анимаций здесь: http://animate.axurist.com/instr/)
widgetname: - указываем, что анимацию нужно применить к объекту, который нужно найти по имени
LogoAxure-A - указываем имя объекта, который нужно найти и к которому нужно применить анимацию
Вот и всё. Так это работает.
По сути, тут можно было бы закончить статью, потому что дальше я просто буду использовать эту же самую функцию в разных вариантах, но я решил, что допишу всё пошагово, т.к. всё таки есть нюансы :)
- не смотря на то, что мы используем анимацию появления (fadeIn), страница по-прежнему работает внутри системы Axure, поэтому для Axure наш объект всё равно остаётся скрытым (Hidden). Поэтому, чтобы увидеть анимацию на экране, нам нужно сначала сделать объект видимым. Для этого добавляем действие Show ("показать") для нашей буквы "A" и перемещаем это действие НАД действием Open Link, чтобы наш объект сначала появился для Axure, а потом бы уже срабатывали анимация:
5) для анимации второй и третьей части слова axure нам нужно повторить тот же набор команд для события OnPageLoad. Будет только пара отличий:
а) время ожидания в команде Wait для запуска анимации каждой части - тут нет правила, просто методом тыка подберите нужный тайминг для старта следующей анимации;
б) название анимации - так как в моём примере все буквы прилетают с разных сторон, то это 3 разных названия анимаций. Тут вы вольны в экспериментах, благо список доступных анимацию в Animate.css for Axure довольно большой.
У меня получилось вот так:
6) теперь нам нужно сделать хитрый эффект, когда у нас логотип axure сменяется на логотип axurist. Я решил сделать это с помощью переворота слов (довольно частый приём) - типа переворачивается одно слова, а обратно вместо него появляется уже другое.
Соответственно, мне нужно сначала скрыть три части логотипа axure, а потом отобразить логотип axurist.
Для скрытия элементов я тоже буду использовать анимацию из Animate.css под названием flipOutX. Да, в стандартном наборе Axure тоже есть анимация flip, но просто внешне анимация из плагина выглядит прикольнее.
Чтобы осуществить эту задумку мне нужно использовать тот же набор команд, что я использовал для появления объектов, но выстроить их в обратном порядке - то есть сначала запускать анимацию, а потом скрывать элемент. Иначе, если сделать наоборот, то элемент сначала исчезнет со страницы и анимацию уже никто не увидит.
Вот так это выглядит в Axure:
Обратите внимание, что перед действием Hide (скрывать) я добавил действие Wait (ждать) - это нужно, чтобы мы могли просмотреть анимацию до конца. Каждая анимация занимает какое-то количество времени, поэтому если не притормозить следующие команды, то мы не успеем увидеть анимацию, как анимируемый объект исчезнет с экрана.
И ещё одну команду Wait я добавил перед скрытием элементов длительностью 1200ms - это нужно, чтобы:
а) наш собранный из 3-х частей логотип axure немного повисел в целостном виде и пользователь зафиксировал его визуально;
б) этот логотип не начал исчезать до того, как он собрался целиком.
Так как логотип axurist у меня будет собираться из двух частей, то я решил сделать динамическую панель: в первом состоянии которой у меня будет логотип axure, а во втором состоянии - логотип axurist:
Соответственно, между скрытием логотипа Axure и появлением первой части логотипа axurist мне нужно добавить действие Set Panel State для переключение динамической панели с логотипами в State2 (состояние 2).
В итоге, на данном этапе у меня получается вот такой набор действий для события OnPageLoad:
7) теперь у нас на экране часть логотипа axur и должно справа приезжать окончание ist. Вот так:
Если вы обратили внимание, то там ещё эта первая часть слова сначала чуть влево смещается перед тем, как к нему должна "прилететь" вторая часть слова.
а) для смещения влево первой части используем простое действие Move в варианте by (на) и значение -68 по X, 0 по Y. Откуда взял и -68 по X? Сначала поставил полный логотип в финальную точку, где он у меня должен собраться и посчитал разницу в пикселях между финальным положением части axur и начальным положением -> получается как раз 68px, а значит для смещения объекта влево на 68px нам нужно использовать значение -68;
б) для "прилетания" окончания ist используем анимацию lightSpeedIn из набора Animate.css по той же схеме, что описана в самом начале статьи.
Важно: не забывайте добавлять команды Wait, чтобы анимации не запускались раньше времени и объекты не исчезали/появлялись, когда не нужно.
Данный пункт в Axure выглядит вот так:
8) далее у нас скрывается логотип Axurist с анимацией fadeOut. Вот команды для двух частей:
javascript:@fadeOut<,>widgetname:LogoAxurist-Axur
javascript:@fadeOut<,>widgetname:LogoAxurist-Ist
И небольшая пауза: Wait 900ms.
9) после этого у нас со стандартными анимациями Axure появляются заголовок и подзаголовок видео, а вот для линии подчёркивания мы снова используем анимацию из Animate.css под названием: fadeInLeft. Вот функция:
javascript:@fadeInLeft<,>widgetname:TitleLine
Затем ожидание на 4 сек., чтобы все успели прочитать текст: Wait 4000ms
И скрываем все элементы в чёрный экран. Вот, как это всё выглядит, в самом Axure:
Надеюсь, что вам было интересно 👍
.rp файл с этим примером можно скачать здесь.