Что такое эффекты анимации
Стандартные схемы (эффекты) анимации
Кроме того, что вы можете включить смену слайдов с разной скоростью (и с разными эффектами), вы также можете заставить двигаться отдельные объекты, расположенные на слайдах.
Например, можно создать элементы текстового списка, влетающие на страницу слева или сверху по одному слову, или добавить звук аплодисментов при открытии рисунка.
Такое «оживление» объектов называется анимацией объектов, а каждый такой объект – соответственно, анимированным.
Справка к Программе определяет анимацию так.
Анимация – это добавление к тексту или объекту специального видео- или звукового эффекта.
Итак, анимация слайдов и объектов нужна прежде всего, для выделения ваших мыслей, для облегчения восприятия материала презентации в целом и материала на каждом слайде в отдельности.
Кроме того, эффекты анимации могут стимулировать внимание слушателей к материалу, а также – если используются в шутливой форме – развеселить аудиторию, и тем самым снять возникшее утомление.
Эффекты анимации могут применяться к любым объектам слайда (кроме тех, что входят в шаблон оформления), включая те, которые находятся на образце слайда. В последнем случае каждый слайд, созданный в соответствии с данным образцом, будет иметь анимированный объект.
Надо очень взвешенно подходить к количеству анимированных объектов и к их разнообразию. Избыточная развлекательность слайда, мелькание фигурок и надписей может утомлять и раздражать аудиторию.
Эффекты анимации и Настройка анимации
Как мы уже говорили, термин анимация Справка трактует, как добавление к тексту или объекту специального видео или звукового эффекта.
И в меню Показ слайдов есть эти две команды ^
Также существуют две области задач с похожими названиями, но с разными функциями
Разница между Эффектами анимации и Настройкой анимации состоит в том, что:
Настройка анимации относится к анимации любых объектов на слайде.
Любопытно, что Справка к Программе вводит термины, подчеркивающие эти различия. Так, на рисунке внизу приведен «скриншот» соответствующего раздела Справки.
Перейдем к рассмотрению стандартных схем анимации ( эффектов анимации ).
Структура области задач Эффекты анимации
Стандартные схемы применяются для разметок, в которых используются Заголовок слайда и текстовые рамки (подзаголовок слайда, рамка со списком, текст в две колонки). Эти стандартные схемы «содержатся» в самой Программе и вам можно не придумывать своих собственных схем.
Пусть теперь вы учитель по совсем другому предмету. Вы создали презентацию. (Используется презентация Петровой Светланы Юрьевны, учителя ).
Вызовем область задач Эффекты анимации любым из известных нам способов.
Зеленой рамкой обведены области задач, объединенные общим названием Дизайн слайда (как это написано в заголовке области задач).
На следующем рисунке желтой рамкой обведена та зона области задач, где сосредоточены непосредственно сами эффекты.
И, наконец, синей рамкой обведены команды, стандартные для областей задач, связанных с анимацией (Смена слайдов, Эффекты анимации, Настройка анимации).
Применение эффектов анимации
Рассмотрим теперь эти эффекты анимации, чтобы составить представление о том арсенале средств, который имеется в нашем распоряжении.
В принципе стандартные эффекты анимации (стандартные схемы анимации) включают:
Смену основной части
Как следует (будет следовать) из результатов изучения эффектов анимации, под основной частью понимаются подзаголовок и текстовые рамки на слайде.
Обратите внимание: в эффекты анимации не включается анимация никаких дополнительных объектов типа рисунков, диаграмм, надписей, добавленных на слайд. Если будет нужна анимация этих объектов, то вам потребуется для них назначать анимацию специально, для каждого элемента отдельно. Это будем разбирать в соответствующем параграфе.
В случае эффекта Возникновение мы видим, что
Основная часть появляется по щелчку без дополнительного эффекта («возникает»)
В случае данного титульного слайда будет получен интересный эффект. Сначала на экране виден слайд с миниатюрами известных картин и только потом возникает пояснение того, чему посвящена презентация.
Управление анимацией при показе слайдов
Для перехода к каждому следующему объекту из списка объектов, включенных в список анимации, необходимы:
щелчок левой кнопкой мыши или
курсорная стрелка вправо
курсорная стрелка вниз
буква N (вне зависимости от раскладки)
Каждый щелчок мыши будет вызывать появление следующего объекта, включенного в список анимации, пока список не будет исчерпан. Ну а уж СЛЕДУЮЩИЙ щелчок приведет к смене слайда.
Если в Основной части слайда содержится несколько абзацев (например, элементов списка), то к каждому из этих абзацев будет применен эффект возникновения (мгновенного появления).
А при таком, «по-абзацном» показе, вы просто лишаете аудиторию этой возможности :-))
К сожалению, возможна ситуация, что вы поторопились (рука дрогнула) и на экране показался текст следующего абзаца, а вы ещё не обсудили текущий. В этом случае вы легко можете вернуть предыдущее состояние.
Для перехода к предыдущему шагу анимации необходимо:
курсорная стрелка влево
курсорная стрелка вверх
буква P латинского языка (вне зависимости от раскладки)
Поскольку вы при показе часто пользуетесь мышкой, используя левую кнопку для продвижения вперед, то было бы удобно использовать мышку также и для возврата.
Для этого следует использовать правую кнопку. Она вызовет контекстное меню показа, не зависящее от того, в каком месте слайда вы щелкнули.
Описанные правила управления анимацией пригодны для любых эффектов анимации.
Точно так же для всех эффектов анимации справедливо правило применения эффекта к каждому абзацу Основной части ПО УМОЛЧАНИЮ. На странице Настройка анимации мы узнаем, что это правило можно изменить.
Эффекты и анимации UI
Меня зовут Костя Грязнов, я Lead VFX Artist в Playrix. Я расскажу про наполнение UI жизнью по опыту работы в мобильном геймдеве.
Для удобства в данной статье я не буду всегда писать целиком «анимация и эффект».
Я считаю важным вначале передать образ мыслей. Практические советы тоже есть — они в конце статьи.
Что такое эффект UI
Для чего мы анимируем UI? Мы показываем игроку, что что-то изменилось, или привлекаем его внимание к элементу. Например, когда дарим монеты за успешное прохождение уровня, открываем ранее недоступный контент, говорим «нажми сюда» или просто показываем, что панель интерфейса реагирует на нажатие. Игрок не увидит смену состояния, если она произошла мгновенно. Наша задача — помочь ему обработать информацию.
Анимация и эффект не существуют вне контекста. Прежде чем что-то анимировать, это что-то уже должно быть. Отсюда же берутся и приоритеты: даже самый красивый эффект должен помогать игроку, а не мешать разглядеть происходящее на экране. Не стоит делать эффект ради эффекта.
Но и совсем обойтись без анимаций и эффектов не получится. Можно представить игру, в которых их нет, — она будет работать, но играть в нее будет неудобно. Игрок не поймет вовремя, когда у него закончатся жизни или какую награду он получил за прохождение уровня.
Как нельзя подготовить хороший UI, не думая про UX, так и с эффектами и анимациями. В первую очередь мы думаем об удобстве игрока. Посмотрим, что же игроку хорошо, а чего следует избегать.
Удержание визуального фокуса
Мы привыкли к нашим органам чувств. Это просто, потому что мы никогда не пользовались другими. Нам кажется, что у нас хорошее зрение и быстрые мозги. Это не совсем так.
Область человеческого зрения очень мала. Чтобы рассмотреть любое изображение, приходится постоянно вращать глазами. Попробуйте прочитать подзаголовок этого параграфа, не убирая глаз с буквы «У».
Игроку некомфортно долго смотреть в одну точку. Зрение пресыщается, и игрок стремится перевести взгляд дальше.
Наконец, внимание игрока рассеивается, если мы надолго отбираем у него контроль. Игрок пришел играть, он хочет взаимодействовать с игрой. Для просмотра есть другой контент.
Все это говорит о том, что внимание игрока — очень ограниченный ресурс и относиться к нему нужно бережно. Как это применить на практике:
Как определить эту последовательность?
Смысловые приоритеты
В первую очередь мы должны решить, что важно для игрока. Это уникально для каждой игры. Но существуют и общие приемы, которыми можно пользоваться. Например, использовать логику направления. Мы можем представить, как игрок будет смотреть на интерфейс, то есть построить траекторию движения его глаз. И если сделать эту траекторию простой, то игроку будет проще воспринимать игру.
Это окно брифинга игры Homescapes. В играх-сервисах неизбежны ситуации, когда в UI добавляются элементы, которые не были туда заложены изначально. Это окно не всегда выглядит так перегружено — только при совпадении нескольких игровых событий. Перерисовать все окно — слишком дорого. Значит ли это, что совсем ничего нельзя улучшить?
Вот так выглядит траектория взгляда, если мы хотим провести игрока через абсолютно все UI элементы. Это очень неудобный и громоздкий путь. Решать проблему в лоб необязательно. Достаточно выбрать общее направление — в данном случае слева направо. Так воспринимать окно уже проще.
Логика значения
А это окно статистики. Игрок стремится покинуть его как можно быстрее, поэтому вся информацию показывается здесь скопом и не разносится во времени. Зато главная награда подчеркнута жирным эффектом свечения — ее трудно не заметить. Получая звезды, игрок двигается дальше по сюжету. Все остальное для него вторично — там не нужен акцент.
Awareness (Последовательность/Связность)
Проще всего этот принцип описать так: эффект должен «знать» про своих соседей. Если серьезнее — при разработке мы должны учитывать все, что произошло до момента запуска эффекта и произойдет после него. Это добавляет ощущение цельности происходящего.
Обратите внимание — в левом варианте медаль «не знает», что по ее прилету заполнится прогрессбар, а сам прогрессбар «не знает» точное время прилета медали — его реакция запаздывает. В правом варианте изменена траектория, теперь летящая медаль «пинает» прогрессбар — передает ему свою энергию движения.
Кстати, подробнее об энергии в эффектах можно почитать в книге Elemental Magic by Joseph Gilland.
С теорией разобрались, перейдем к практическим советам.
Практические приемы
Изинги
Изинг — это функция интерполяции значения между двумя анимационными ключами. Если проще — изинг ответственен за то, какое значение примет параметр в местах, где аниматор не поставил ключ. Я думаю, многим знакома примерно такая гифка.
Изинг — это самый важный и сильный инструмент, на который все привыкли не обращать внимания. Однако неправильно выбранный изинг — это практически полностью неправильная анимация.
Первый пример – анимация, где ключи интерполируются линейно. Второй – анимация с настроенными изингами. Количество полностью совпадающих кадров? Пять. При 60fps и длительности анимации в секунду это означает, что объект находится где-то не там 91% времени.
Хорошая анимация невозможна без настроенных изингов.
Чем плохо линейное движение? Развернуто об этом написано тут. В рамках статьи я лишь кратко отмечу, что это не то, как наш мозг привык обрабатывать движения.
Линейный изинг все еще можно использовать, если такова ваша задумка и вы знаете, что делаете. Но для обучающей статьи я буду считать, что это не так 🙂
Изинг может быть разным.
Не всегда достаточно просто налепить базовое сглаживание. Но и необязательно настраивать каждый отдельный изинг — можно пользоваться пресетами, ничего плохого в этом нет. Вот пара сайтов шпаргалок:
Псевдо MotionBlur
В детстве, на уроках алгебры, мы часто решали задачки вроде «машина едет со скоростью V, скажите, в какой точке S она окажется через время T». Это математическая абстракция, с которой нам приходится работать и в играх.
В реальности локализовать объект в единичный момент времени невозможно. Мы можем лишь увидеть какой-то его отрезок. Это хорошо знают фотографы, которым нужно настраивать выдержку перед тем, как сделать снимок.
(Это не просто фотографический эффект. Если вы когда-нибудь из окна одной электрички смотрели на встречную, то, я думаю, вам было бы нелегко указать конкретное положение людей в ней. В всяком случае, для меня их позиции размазаны этак на длину 20 метров.)
Если мы не будем использовать моушен блюр, то быстрые движения объектов на экране будут выглядеть отрывисто, с резкими перескоками. Вы никогда не задумывались, почему в играх стандарт 60fps, но мы спокойно смотрим кино с 24 и не жалуемся на тормоза? Моушен блюр.
Одна беда: блюр — дорогая операция, и даже в ПК-играх его используют редко, что уж говорить про мобильные. Но его можно подменить имитацией: для этого объект нужно искажать по направлению движения и параллельно делать немного прозрачным.
Это, кстати, тот же самый прием, который на полную используется в Overwatch.
Заключение
Спасибо за уделенное время! Это моя первая статья подобного рода, и уверен, что многое осталось нераскрытым. С радостью отвечу на ваши комментарии.
Как сделать анимацию в PowerPoint?
Анимация – это технология, которая позволяет при помощи неподвижных объектов создавать иллюзию движения для привлечения и удержания внимания аудитории. Завладеть вниманием аудитории – едва ли не главная цель любой презентации, а значит, стоит узнать, как сделать анимацию в PowerPoint.
Использование анимации позволяет облегчить восприятие презентации, выделить важные мысли и усилить интерес к представляемой информации. Для достижения перечисленных целей PowerPoint предоставляет практически безграничные возможности. Программа оперативно справляется с анимированием текста, фотографий, графических изображений, диаграмм, элементов SmartArt, таблиц и остальных видов объектов.
Как сделать анимацию в PowerPoint 2013/2016?
Последние версии PowerPoint анимируют практически любой объект. Это дает широкий простор для творчества. Но для начала необходимо овладеть базовыми навыками.
Добавление эффекта анимации
Анимирование любого неподвижного объекта, в том числе и текста, предполагает 4 шага.
Выбирая эффекты, помните, что некоторые из них доступны исключительно как анимация текста в PowerPoint. Это касается таких эффектов, как «Кнут», «Волна», «Падение» и ряда других.
Чтобы добавить к уже существующей анимации дополнительный эффект потребуется выполнить 3 последовательные действия.
Совет! Убедитесь, что в настойках слайд-шоу не стоит отметка «Без анимации». Если она установлена анимация не будет воспроизводиться во время показа слайд-шоу, а лишь при предварительном просмотре. А значит, все старания пойдут насмарку.
Запуск эффектов
PowerPoint предлагает 3 варианта запуска эффектов:
Если всех эффектов анимации достаточно, то от варианта «по щелчку» лучше отказаться. Его использование требует больше времени, что повышает риск распыления внимания докладчика.
Рассмотрим, как сделать анимацию картинки в PowerPoint, используя один из вышеуказанных вариантов запуска.
Определение порядка показа эффектов
Определить порядок, в котором будет проходить показ эффектов, поможет следующая инструкция.
Вышеупомянутыми командами можно пользовать несколько раз подряд.
Скорость показа эффектов
В данном случае понадобиться параметр «Длительность». Пользоваться им очень просто.
Минимальная длительность показа составляет 0.01 с, а максимальная – 59 с.
Стоит упомянуть и о параметре «Задержка», определяющем отрезок времени перед включением конкретного эффекта. Данный отрезок времени стартует после завершения предыдущего эффекта или после дополнительного клика.
Как удалить анимацию в PowerPoint?
Когда объекту присваивается эффект анимации, возле него возникает маленькая числовая отметка. Она подтверждает наличие эффекта и обозначает его позицию в порядке анимации на конкретном слайде. Данное обозначение можно использовать для удаления анимации. Каким образом?
Анимация в PowerPoint 2010
Общая схема внедрения анимации в версии 2010 года во многом соответствует инструкциям для программ 2013-2016 гг., описанным выше. Поскольку повторять их нет смысла, рассмотрим лишь некоторые специфические нюансы.
Как вставить анимацию в презентацию PowerPoint 2010?
Приведенная ниже инструкция позволит снабдить один объект несколькими эффектами.
Используя кнопку «Тригер» (группа «Расширенная анимация»), можно определить дополнительные условия для переключения эффектов анимации. Данный инструмент поможет создать «горячую клавишу», запускающую воспроизведение самых разных эффектов.
Примечание. Числовые метки, обозначающие объекты с анимацией, можно видеть лишь при открытой вкладке «Анимация» или в поле «Область анимации».
Просмотр перечня эффектов
Список используемых эффектов можно посмотреть в пункте «Область анимации» (группа «Расширенная анимация»). Здесь отображается ряд важных данных о каждом эффекте анимации.
Совет! Дайте каждому объекту уникальное имя, тогда с ними будет легче работать.
Рассмотрим подробнее характеристики эффектов, представленных в области анимации.
Эффекты анимации в PowerPoint: общая характеристика
В настоящий момент анимация в презентации PowerPoint предполагает использование 4-х групп эффектов.
Каждый из вышеупомянутых эффектов можно применять как отдельно, так и в сочетании с другими. К примеру, эффекты входа пригодятся в процессе создания обучающих презентаций. При их использовании аудитория не будет отвлекаться на текст, о котором ещё не идет речь.
Эффекты выделения будут полезны, когда необходимо привлечь зрителей к определенной части слайда, например к линии чертежа или к важной детали конструкции. А вот опция «Пути перемещения» – лучший инструмент для показа динамики.
Примечание. После использования первого эффекта добавить дополнительную анимацию можно, лишь нажав «Добавить анимацию». Иначе вы рискуете просто заменить текущую анимацию новой.
Сочетание анимации со звуковыми эффектами
Данный трюк обычно используют, чтобы придать анимации большую глубину и привлечь к ней дополнительное внимание. Озвучить анимирование объекта помогут следующие действия.
При нажатии «ОК» должно начаться воспроизведение анимации со звуком. Чтобы редактировать громкость звука во вкладке «Эффект» (диалоговое окно «Параметры эффектов») нажмите иконку с изображением громкоговорителя и перетащите ползунок в соответствующем направлении.
Умеренность и уместность – главные принципы при работе с эффектами анимации
Анимация, конечно же, добавляет презентации динамики, акцентирует внимание на отдельных идеях и делает представленную информацию более запоминающейся. Но это не значит, что перед тем как сделать анимацию в PowerPoint, можно забыть об умеренности. Избыток анимационных эффектов может вызвать раздражение зрителей. «Хорошего понемножку» – главный принцип, которого стоит придерживаться.
Также стоит подумать об уместности анимации или определенного её типа для конкретного эффекта. К примеру, мерцающую анимацию рекомендуется использовать лишь в крайних случаях, поскольку она дает большую нагрузку на глаза и нервную систему. Особенно важно помнить об умеренности и уместности, когда вы думаете, как сделать анимацию текста в PowerPoint. Некоторые типы эффектов могут отвлечь внимание аудитории от сути доклада или исказить её.
Моушн-дизайн в интерфейсах: зачем нужна UX-анимация и какие эффекты в ней используют
Как превратить бездушную машину в приятного собеседника? Никакой магии — над этим трудятся моушн-дизайнеры.
Современный сайт или приложение трудно представить без анимации. Движущиеся элементы улучшают пользовательский опыт: они помогают понять принцип работы интерфейса — дают подсказки и реагируют на действия пользователя.
Анимация в UX-дизайне не похожа на анимацию логотипов, рекламы или мультфильмов — она обычно выполняет сугубо прикладные функции, а иногда и вовсе не должна быть заметна. Разберёмся, для каких целей применяется анимация в интерфейсах, в чём её особенности и какие эффекты используют чаще всего.
Зачем в интерфейсе анимация
Если вы захотите выйти из комнаты, вероятно, вы возьмётесь за ручку двери, повернёте её, и дверь откроется. Если захотите приготовить ужин, поставите блюдо на огонь и дождётесь кипения. В реальной жизни движение окружает нас повсюду — объекты перемещаются и изменяются в ответ на приложенные к ним усилия. Поэтому интерфейсы без анимации воспринимать трудно — мы не привыкли взаимодействовать со статичной картинкой.
Львиная доля анимации в интерфейсах — это микровзаимодействия. По названию легко догадаться, что это незначительные движения. Они не меняют состояние интерфейса глобально, но играют важную роль для пользователя:
Более заметная анимация в интерфейсах тоже нужна — она показывает глобальные изменения системы или ведёт пользователя к решению его задач. Вот её основные функции:
Хотите изучать пользовательский опыт и создавать удобные интерфейсы? Записывайтесь на курс по UX-дизайну!
Применение нескольких эффектов анимации к одному объекту
К одной строке текста или к одному объекту, например рисунку, фигуре или элементу Графический элемент SmartArt, можно применить несколько эффектов анимации.
Совет: При работе с несколькими эффектами анимации удобнее всего начать с области анимации, где можно просмотреть список всех эффектов анимации для текущего слайда.
Открытие области анимации
Выделите на слайде объект или текст, который нужно анимировать.
На вкладке Анимация нажмите кнопку Область анимации.
Нажмите кнопку Добавить анимацию и выберите эффект анимации.
Чтобы применить дополнительные эффекты анимации к тому же объекту, выберите его, нажмите кнопку Добавить анимацию и выберите еще один эффект.
Важно: После применения первого эффекта анимации добавить дополнительные эффекты можно лишь одним способом: нажать кнопку Добавить анимацию. Пользуясь любым другим способом, вы лишь замените текущий эффект новым.
Настройка времени начала и длительности показа эффекта анимации
Вот что нужно сделать, чтобы управлять временем воспроизведения эффектов анимации:
В разделе Область анимации щелкните стрелку вниз возле эффекта анимации и щелкните вкладку Время.
На вкладке Время щелкните стрелку вниз в разделе Начало и выберите время начала.
Чтобы воспроизведение начиналось по щелчку мыши, выберите пункт По щелчку.
Чтобы эффект анимации запускался одновременно с предыдущим эффектом, выберите пункт С предыдущим
Чтобы запускать эффекты последовательно, выберите пункт После предыдущего.
Совет: Предыдущий эффект анимации указан в порядке воспроизведения в области анимации (обычно находится непосредственно над эффектом, для которого вы устанавливаете время).
Чтобы отложить запуск эффекта анимации, щелкните стрелку вверх возле пункта Задержка столько раз, сколько нужно, чтобы установить нужное количество секунд.
Чтобы изменить скорость эффекта анимации, задайте нужную Продолжительность.
Чтобы просмотреть, как эффекты анимации выглядят вместе, на вкладке Анимация нажмите кнопку Просмотр.
Совет по работе с несколькими эффектами анимации
При работе с несколькими объектами на слайде может быть сложно выделить объекты и примененные к ним эффекты анимации.
На рисунке ниже имена объектов по умолчанию не очень информативны, поэтому сложно сказать, к какому объекту применен каждый отдельный эффект.
В области выделения вы можете дать уникальное имя каждому объекту, чтобы с ними было легче работать при применении эффектов анимации. См. ниже.
Чтобы изменить имена объектов по умолчанию, на вкладке Главная нажмите Выделить и щелкните Область выделения.
В области выделения дважды щелкните имя объекта по умолчанию, чтобы открыть поле, и введите новое имя объекта.
Дополнительные сведения о работе с эффектами анимации