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

Как делать анимацию, которая нравится всем (даже пользователю)?

Привет читателям Хабра! Меня зовут Сергей Кузнецов, я руковожу отделом frontend-разработки в компании AGIMA и сегодня я вам принес статью про… да, про анимацию. Знаю, на этут тему здесь не писал только ленивый. Знаю, сказать что-то новое об анимации сложно. И все-таки надеюсь, что эта статья окажется для многих полезной, а для кого-то — даже интересной.

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

Зачем вообще нужна анимация?

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

Далеко не все сайты загружаются мгновенно. Для того чтобы во время загрузки страницы пользователь не потерял к ней интерес и не подумал, что сайт безнадежно «завис», и нужна анимация ожидания. Самая распространенная анимация этого типа — preloader

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

• Показывают пользователю, что сайт исправно работает.

• «Скрадывают» время ожидания — увидев интересную анимацию, пользователь не обратит внимания на то, что сайт «грузится» дольше, чем ему бы хотелось.

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

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

2. Анимация подтверждения

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

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

3. Декоративная анимация

Это мини-игры, нестандартный скролл страницы, видеовставки, параллакс. Нет, эта анимация не «просто для красоты». У нее вполне утилитарная функция — привлечь внимание пользователя к самому важному, заинтересовать в дальнейшем изучении сайта, вызвать тот самый wow-эффект. Декоративную анимацию важно использовать «к месту» и дозированно, она не должна перегружать страницу и отвлекать пользователя от ее содержания.

Какой бывает анимация?

Не будем перечислять устаревшие или редко используемые технологии. Упомянем только самые распространенные — и разберем их плюсы и минусы.

Тут наверное из снежной королевы кадр, где выбирались развилки
Самый простой и действенный способ «оживить» страницу

+

• Просто и быстро встроить на страницу.

• Не ограниченная визуальная сложность сцен.

• Много ситуаций применения.

—

• Большой «вес» и, следовательно, потенциально долгая загрузка.

• Невозможность изменения отдельных элементов сцены.

• Ограниченная поддержка прозрачности и фильтров.

• Ограниченная интерактивность.

2. Секвенции

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

+

• Можно удалять / изменять отдельные кадры.

• Можно настраивать количество и качество кадров.

• Нет браузерных ограничений на автозапуск.

—
Те же, что и у видео — большой «вес» и малая интерактивность
3. CSS

Очень популярная технология, позволяющая создавать самые разные анимации.
+

• Поддерживается всеми современными браузерами.

• Не нужно подготавливать материалы заранее.

• Простой синтаксис описания.

• «Закрывает» почти все базовые потребности в анимации.

—

• Возможны только предусмотренные стандартом типы анимации.

• Сложные анимации требуют большого количества кода.

4. Canvas/WebGL

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

+

• Можно менять последовательность воспроизведения и элементы на каждом кадре.

• Неограниченные возможности для создания интерактивных элементов.

• Импорт анимации из специализированных приложений.

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

—

• Сложность в освоении

• Долгий процесс создания анимации

• Долгая загрузка и «торможение» в особенно сложных сценах

Как сделать анимацию качественной?

А как повысить производительность?

И немного лайфхаков

Вот и всё. Хотя об анимации можно говорить еще долго. К примеру, мы могли бы рассказать о новинках мира анимации — о новых фильтрах и медиазапросах, или о появившихся совсем недавно продвинутых инструментах и технологиях, таких как Web Animations API. А вы хотели бы почитать о трендах в анимации? Если да, будем рады посвятить этой теме следующую статью!

Источник

Как создать анимацию в Photoshop. Пошаговая инструкция

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

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

Чтобы создать простой веб-баннер или презентацию, необязательно разбираться с многочисленным софтом. Для этого подойдут и встроенные средства Photoshop. Это лишь небольшая доля возможностей программы, а раскрыть их все на практике поможет курс «Photoshop с нуля до PRO».

Пишет про дизайн в Skillbox. Рисует макеты и верстает страницы для клиентов.

C чего начать

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

Для создания анимации я взял один из ярких проектов с Behance и перерисовал его в Photoshop. Выровнял по контент-сетке, подобрал размеры и поместил каждый элемент в отдельный слой. В результате у меня появился отрисованный в PSD-формате первый экран сайта, который я и анимировал.

«Шкала времени»

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

Открываем вкладку «Окно» и ставим галочку напротив строки «Шкала времени».

Внизу окна в Photoshop должна появиться широкая строка, с помощью которой управляют кадрами в анимации.

Чтобы создать первый кадр, нажимаем «Создать анимацию кадра» на «Шкале времени».

Как первый кадр появится, можно приступить к созданию движения.

Промежуточные кадры

В Photoshop анимируют двумя способами:

• Рисуют несколько кадров, вручную изменяя положение и свойства элементов. Если анимация достаточно длинная, то прорисовка каждого кадра занимает много времени.
• Вставляют промежуточные кадры. Необходимо вручную задать лишь состояния макета: в начале и в конце анимации. Нужные кадры между этими состояниями добавит сам Photoshop. Этот способ подойдёт, чтобы сделать постепенное появление и исчезновение объекта или показать его перемещение.

Сначала я анимирую изображение балалайки. Для плавного появления изображения использую инструмент «Вставка промежуточных кадров». Чтобы Photoshop самостоятельно анимировал элемент, необходимо задать два состояния для элемента — начальное в первом кадре и конечное в следующем.

Поэтому добавляем ещё один кадр в «Шкалу времени» с помощью кнопки «Создать копию кадров».

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

На следующем кадре проверяю, виден ли слой с балалайкой.

После работы с изображением балалайки настраиваю появление текстовой строки. В первом кадре я выделяю текст «Soul sings» и сдвигаю его вправо за пределы макета. С текстом «3 strings» поступаю так же — сдвигаю влево, пока он не исчезнет.

Источник

Применение нескольких эффектов анимации к одному объекту

К одной строке текста или к одному объекту, например рисунку, фигуре или элементу Графический элемент SmartArt, можно применить несколько эффектов анимации.

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

Открытие области анимации

Выделите на слайде объект или текст, который нужно анимировать.

На вкладке Анимация нажмите кнопку Область анимации.

Нажмите кнопку Добавить анимацию и выберите эффект анимации.

Чтобы применить дополнительные эффекты анимации к тому же объекту, выберите его, нажмите кнопку Добавить анимацию и выберите еще один эффект.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник