Как анимация повышает мотивацию и вовлеченность учеников в онлайн-курсах

Создание анимации первого экрана

На самом деле этот шаг можно пропустить, но он дает понимание работы анимации в Figma поэтому я его включил в руководство.

Копируем Frame

Для создания анимации появления первого экрана понадобится копия фрейма — зажмите мышкой левый верхний угол фрейма и потяните его вправо с зажатой клавишей Alt.

Создание копии первого фрейма

Анимация в Figma работает следующим образом: фрейм проекта дублируется и на первом фрейме вносятся изменения, например можно передвинуть логотип и меню наверх. Затем с помощью режима Prototype создается связка со вторым фреймом и настраивается интерактив, то есть то как первый фрейм взаимодействует со вторым. Итог анимации в данном случае будет плавное появление логотипа и меню. Анимация в Figma это переключение между фреймами, здесь нет ключевых кадров как например в After Effects.

Сдвигаем объекты шапки первого фрейма

Убираем логотип и бургер меню вверх, за пределы фрейма:

Сдвигаем логотип и бургер меню на первом фрейме

Тут есть один нюанс: когда выносишь элемент за пределы фрейма то он выносится из фрейма и на панели слоев.

Объекты вынесены за пределы фрейма на панели Layers

Элементы нужны в пределах фрейма, иначе они просто не будут участвовать в анимации, поэтому переносим их обратно. Выделяем нужные слои с зажатым Ctrl на клавиатуре и сдвигаем в стек фрейма на панели слоев, как показано ниже.

Возвращение элементов внутрь фрейма

Отлично, разобрались с объектами и фреймом, вернемся к анимации.
Чтобы посмотреть получившуюся анимацию нужно связать первый фрейм со вторым, настроить анимацию и перейти в режим просмотра прототипа в реальном времени (Present).

Режим Prototype

Справа на панели свойств выбираем вкладку Prototype (режим прототипирования), переходим на первый фрейм, в середине появится кружок с синей обводкой. Захватываем этот кружок мышкой и тянем появившуюся стрелку до второго фрейма, после того как стрелка прилипнет к нему, справа появится окно настройки интерактивного взаимодействия с интерфейсом и анимации (Interactive details & Animation).

Связываем два фрейма в режиме Prototype

Настраиваем анимацию

Выставляем следующие параметры:

Настройка анимации

В блоке Interaction Details (детали взаимодействия) выбираем After Delay (действие с задержкой) и напротив ставим тайминг 200ms, этого будет вполне достаточно чтобы не ждать появление элементов долго, но в тоже время чтобы они не появились мгновенно, нужно успеть все рассмотреть.
В блоке Animation (анимация) из выпадающего списка выбираем пункт Smart Animate (умная анимация), ниже указываем свойство анимации Ease Out (плавное затухание), а тайминг ставим 800ms, это нужно для того чтобы анимация была плавной.
Протестируем и посмотрим что получилось, для этого в верхнем правом углу есть кнопка Present (представлять).

Кнопка Present для перехода в режим просмотра прототипа

Тестируем анимацию

Нажимаем на кнопку Present и в режиме просмотра прототипа смотрим результат:

Получившаяся анимация в режиме просмотра прототипа

Нам удалось получить добротную анимацию логотипа и меню, теперь нужно повторить те же действия для всех остальных элементов. Какие то вынести за пределы фрейма, другие оставить на месте, настроить прозрачность, а какие то просто не трогать.

Настраиваем режим просмотра прототипа

Еще одна важная деталь: фон и корпус смартфона в режиме просмотра также можно поменять. Кнопка Show Prototype Settings (показать настройки прототипа) на вкладке Prototype:

Настройка фона и модели для режима просмотра прототипа

Вернемся к нашей композиции и продолжим настройку анимации первого экрана.

Настраиваем появление всех элементов первого экрана

Горы и нижние облака вместе с надписью опускаем чуть ниже, надпись не выносим за пределы фрейма, а в свойствах на вкладке Design устанавливаем прозрачность 0% также как фоновой картинке и верхнему небосводу, облако посередине сдвигаем влево.

Настройка прозрачности и перенос элементов

Тестируем анимацию первого экрана

Нажимаем на иконку Present для того чтобы протестировать анимацию.

Анимация появления первого экрана

Можно сделать еще анимацию вагончика, например выезжает слева или сверху, или вообще оставить на месте и поиграть с прозрачностью:

Настройка прозрачности слоя с вагончиком

Первый экран готов, уже сейчас можно сказать что эффект параллакса имеет место быть, но в большей степени он проявит себя при прокрутке страницы вверх или вниз.
Переходим к интерактиву, сделаем так чтобы при прокручивании страницы, изображения двигались с разной скоростью создавая полноценный красивый эффект параллакса.

Управление анимацией при показе слайдов

Для перехода к каждому следующему объекту из
списка объектов, включенных в список анимации, необходимы:

Ккаждый щелчок мыши будет вызывать появление
следующего объекта, включенного в список анимации, пока список не
будет исчерпан. Ну а уж СЛЕДУЮЩИЙ щелчок приведет к смене слайда.

Если в Основной части
слайда содержится несколько абзацев (например, элементов списка), то
к каждому из  этих абзацев будет применен эффект возникновения
(мгновенного
появления).

Такая возможность — показывать абзацы текста по
мере того, как в них возникает необходимость, позволяет вам управлять вниманием
аудитории, не позволяя ей забегать вперёд, читая  ваши
дальнейшие тезисы тогда, кода вы до них ещё не дошли в своем
докладе. А при таком, «по-абзацном» показе, вы просто
лишаете аудиторию этой возможности
:-))

А при таком, «по-абзацном» показе, вы просто
лишаете аудиторию этой возможности
:-))

К сожалению, возможна ситуация, что вы
поторопились (рука дрогнула) и на экране показался текст следующего
абзаца,
а вы ещё не обсудили текущий. В этом случае вы легко можете вернуть
предыдущее состояние.

Для перехода к предыдущему шагу анимации
необходимо:

Поскольку вы  при показе часто пользуетесь мышкой, используя левую кнопку для продвижения
вперед, то было бы удобно использовать мышку также и для возврата.

Для этого следует использовать правую кнопку. Она
вызовет контекстное меню показа, не зависящее от того, в каком месте
слайда вы щелкнули.

В этом контекстном меню вам следует выбрать
команду Назад, как это показано на рисунке внизу.

Описанные правила управления анимацией пригодны
для любых эффектов анимации.

Точно так же для всех эффектов анимации
справедливо правило применения эффекта к каждому абзацу Основной
части ПО УМОЛЧАНИЮ. На странице Настройка анимации мы узнаем,
что это правило можно
изменить.

Настройка времени начала и длительности показа эффекта анимации

Вот что нужно сделать, чтобы управлять временем воспроизведения эффектов анимации:

В разделе Область анимации щелкните стрелку вниз возле эффекта анимации и щелкните вкладку Время.

На вкладке Время щелкните стрелку вниз в разделе Начало и выберите время начала.

Чтобы воспроизведение начиналось по щелчку мыши, выберите пункт По щелчку.

Чтобы эффект анимации запускался одновременно с предыдущим эффектом, выберите пункт С предыдущим

Чтобы запускать эффекты последовательно, выберите пункт После предыдущего.

Совет: Предыдущий эффект анимации указан в порядке воспроизведения в области анимации (обычно находится непосредственно над эффектом, для которого вы устанавливаете время).

Чтобы отложить запуск эффекта анимации, щелкните стрелку вверх возле пункта Задержка столько раз, сколько нужно, чтобы установить нужное количество секунд.

Чтобы изменить скорость эффекта анимации, задайте нужную Продолжительность.

Чтобы просмотреть, как эффекты анимации выглядят вместе, на вкладке Анимация нажмите кнопку Просмотр.

Как сделать анимацию кнопок в фигме при наведении

Чтобы сделать анимацию кнопок при наведении в фигме (Figma), нужно их дублировать.

Затем выделите их и создайте из них компоненты с помощью надписи «Create multiple components».

Объедините компоненты в варианты.

Копируйте кнопки с зажатой клавишей «Alt».

Измените прозрачность или цвет у копий. Задайте любое изменение, которое хотите видеть при наведении.

Перейдите в раздел «Prototype» и создайте связь между первой кнопкой и кнопкой при наведении. Поставьте следующие параметры анимации: «Mouse enter» и значение Animate «Instant».

Аналогичную операцию проделайте с прозрачной кнопкой. Поставьте значение «Mouse leave» и анимацию «Instant»

Ту же операцию сделайте с кнопкой, которая показывает вправо.

Копируйте 2 кнопки в нормальном состоянии во фрейм.

Совет по работе с несколькими эффектами анимации

При работе с несколькими объектами на слайде может быть сложно выделить объекты и примененные к ним эффекты анимации.

На рисунке ниже имена объектов по умолчанию не очень информативны, поэтому сложно сказать, к какому объекту применен каждый отдельный эффект.

В области выделения вы можете дать уникальное имя каждому объекту, чтобы с ними было легче работать при применении эффектов анимации. См. ниже:

Чтобы изменить имена объектов по умолчанию, на вкладке Главная нажмите кнопку Выделить, а затем — пункт Область выделения.

В области выделения дважды щелкните имя объекта по умолчанию, чтобы открыть поле, и введите новое имя объекта.

Дополнительные сведения о работе с эффектами анимации

Как сделать гифку из фото в фотошопе?

Открываем Photoshop. Во вкладке «Файл» выбираем «Сценарии», а потом «Загрузить файлы в стек…». В появившемся окне выбираете изображения (фото, картинки), из которых будет состоять анимация.

После того, как слои появились в списке справа, кликните на верхнюю вкладку «Окно», далее «Шкала времени». В центре появившейся панели выберите «Создать анимацию кадра».

Первый слой сделайте видимым, остальные – скройте, нажав на «глаз». Вы получите первый кадр гифки с нужный изображением.

Далее копируйте в панели этот слой столько раз, сколько у вас всего фото, которые вы хотите вставить в анимацию. После копирования слоев вы заметите, что все они будут одинаковыми (логично), т.к. первый слой у нас ещё остался видимым, а остальные – так же скрытыми.

Теперь делаем следующее: нажимаем на второй слой в панели анимации – делаем видимым ТОЛЬКО второй слой в основном рабочем списке слоев. Третий кадр анимации – делаем видимым ТОЛЬКО третий слой видимым, остальные – скрыты.

Там, где «о сек.» устанавливаем любое нужное время для воспроизведения напротив каждого кадра.

Для непрерывного показа кадров нам необходимо выбрать значение «Постоянно». Чуть ниже от того, где мы выбирали время воспроизведения для каждого слоя, есть окно выбора параметров цикла.

Можно сказать, что гифка из фото готова. Осталось только правильно сохранить её. Для этого во вкладке «Файл» нажимаем «Экспортировать», далее выбираем «Сохранить для Web (старая версия)…». Откроется окно, в верхней части которого выбираем нужный формат – GIF. Внизу можно отредактировать исходный размер, если сделать меньше (в процентном соотношении), то вес тоже уменьшится.

Не забываем нажать «Сохранить», выбрать место хранения файла. Всё, готово!

Особенности создания покадровой анимации

Как мы сказали ранее, при покадровой анимации каждый кадр прорисовывается заново. Контуры персонажей, предметов, текста – все детали четко отрисовываются, в следствие чего анимация выглядит немного неестественно. Однако это и есть ее отличительная черта.

Однако, кинорежиссёры поняли, что в фильмах такого эффекта быть не должно. Простой пример: когда вы фотографируете бегущего человека, на фото не будет четкого контура ног, силуэт будет размытым. Даже когда вы смотрите на бегущую собаку, вы не отслеживаете ее движения по каждому кадру, вы видите картину в целом. Поэтому, при создании покадровой анимации, контуры стали прорисовывать не полностью, а при использовании кукол – фотографировать в движении.

Тенденции (тренды) в анимации

Сегодня анимация перевоплощается в самые разнообразные и захватывающие способы рассказа истории и идею. Благодаря появлению новых достижений в технике и телекомуникационных технологиях, регулярно возникают новые тренды в анимации. 

Смотрите Моушн Дизайн в 2022.

Вот самые популярные из них:

3D в стиле ретро и винтаж

Cтиль 3D-анимации, который снова становится популярным — это ретрофутуризм. Это позволяет использовать фантастическую эстетику, о которой люди в конце 70-х и начале 80-х думали, что будущее может выглядеть именно так.

Техника: использование пышных световых эффектов и пиксельных цифровых элементов служит для создания местности и персонажей, в ретро мире.

Высококонтрасная Cel Animation

Это тенденция анимации, которая уже несколько лет находится на подъеме и используется некоторыми из ведущих компаний в мире, включая Nike, Nickelodeon, Disney, Cartoon Network и даже для игр Winter X.

Яркие контрастные цвета в сочетании с угловым дизайном используются, чтобы придать анимации упрощенный, почти cel-стиль.

Результат — забавная последовательность от которой трудно отвести взгляд.

Некоторые из лучших примеров взяты из Golden Wolf, компании по производству анимации, базирующейся в Лондоне.

Микс 2D и 3D

Тенденция, начавшаяся в последние годы и продолжающая нарастать, создает анимации, которые выглядят как сочетание 2D и 3D.

Вам не нужно далеко ходить, чтобы найти учебное пособие, в котором показано, как в итоге получить плоский 2D-взгляд, используя cel shader для рендеринга 3D.

Предоставляя 3D-объектам 2D-взгляд, аниматоры могут создавать выразительные, иллюстративные элементы, которые сразу привлекают внимание зрителя, обеспечивая четкую и красочную информацию

Сверхсюрреализм

Если есть одна отличная анимационная тенденция, которая полностью использует силу изображений CGI, это стиль сюрреализм.

Эффект гипер-сюрреалистической анимации основан на объединении фотореалистичных элементов с фантастическими изображениями для создания сказочных миров и действий.

Есть такой пример анимации, как «The Dreamer» от Roof Studio для Honda, который привлекает зрителей к причудливому путешествию, поскольку реалистичное транспортное средство движется по диким местам. 

Динамическая анимация функций в приложениях

Вместо использования статических изображений или всего текста многие приложения в 2018 году используют функциональную анимацию, которая держит внимание пользователя с ярким, интересным пользовательским интерфейсом. Это включает в себя использование анимации для улучшения элементов навигации, подтверждения ввода пользователя, увеличения и уменьшения содержимого и т.д. 

Это включает в себя использование анимации для улучшения элементов навигации, подтверждения ввода пользователя, увеличения и уменьшения содержимого и т.д. 

Возрождение 2D-анимации в маркетинге

В индустрии развлечений, таких как кино и видеоигры, 2D-анимация почти исчезла, когда появился 3D. С тех пор компании чувствовали, что нет лучшего способа увлечь аудиторию, игроков и потенциальных клиентов, чем с помощью 3D-анимации, даже если для этого требуется больше времени и усилий.

Теперь, когда все больше людей используют Интернет, компаниям нужны привлекательные, но экономически эффективные способы развития своего бренда. Например видеоинфографика. Читайте нашу статью: Что такое инфографика и как её сделать

Пример видеоинфографики