Сделать домашней|Добавить в избранное
 
 
» » Как создавать анимированные GIF-ы для презентации дизайна интерфейса: Часть 3

Как создавать анимированные GIF-ы для презентации дизайна интерфейса: Часть 3

Автор: adminok от 30-11-2014, 11:49
Как создавать анимированные GIF-ы для презентации дизайна интерфейса: Часть 3

Анимированные GIF-файлы выгодно отличаются от других способов плавными переходами и анимированными вставками между различными состояниями, которые они обеспечивают. Таким образом, привлекается пользовательский опыт использования цифровой техники. Конечно, примеры использования программы можно записать скриптом или воспроизводить с помощью включения простого мобильного приложения.
Единственным препятствием является качество, продолжительность анимации и размер выходного файла. В этой части инструкции я расскажу вам, какие эффекты использовались, чтобы получить анимированный GIF-файл мобильного приложения прогноза погоды. Первая часть касалась всего процесса в целом, а во второй части речь шла об экспорте в оптимизированные файлы GIF.
Эта анимация является относительно простой по сравнению с существующими образцами, а вдохновением для меня служил удивительное творение Феда Кука.

Давайте для начала разберем анимацию на элементы:

1. Три блока плавно опускаются вниз по экрану;
2. Появляется один блок на всю ширину;
3. В блоках появляется информация о погоде;
4. Появляется иконка облака с осадками, символизирующий снегопад;
5. Появляется слово «снежно».

трое приятелей

Блоки создаются как слои-фигуры с такими свойствами как масштаб, расположение, непрозрачность, кайма и т. Д. After Effects позволяет контролировать эти параметры во времени. Именно так удается обеспечить их анимацию. Это называется кадрированием. Ниже вы можете посмотреть хороший вводный видео-урок о раскадровке (Keyframing).

процесс

Сначала я сосредоточусь на анимации одного слоя с блоком. На первом кадре блока не видно, так как его размер слишком мал, но ширину блока уже определены. Таким образом, когда мы увеличим высоту, блок примет форму прямоугольника. У меня есть ключевой кадр для прямоугольника и благодаря этому, как под влиянием гравитации, прямоугольник спускается вниз и превращается в квадрат внизу экрана. Соответственно, внизу экрана расположено еще один ключевой кадр с другим размером и расположением.
Как создавать анимированные GIF-ы для презентации дизайна интерфейса: Часть 3

Блок начинает наполняться
Как создавать анимированные GIF-ы для презентации дизайна интерфейса: Часть 3

блок наполнился
Как создавать анимированные GIF-ы для презентации дизайна интерфейса: Часть 3

Конечная позиция блока
Важно, чтобы вы это сделали анимацию максимально плавной. С этой целью следует выбрать ключевые кадры изменения позиции, щелкнуть на них правой кнопкой мыши и выбрать Easy Ease в меню Keyframe Assistant. Таким образом, анимация станет более плавной.
Как создавать анимированные GIF-ы для презентации дизайна интерфейса: Часть 3


Чтобы еще больше предоставить выразительности движения мы добавляем реалистичное ускорение объекта, выбирая ключевые кадры изменения позиции и щелкнув на пункт Graph Editor. Благодаря этой команде сначала мы увидим простую кривую ускорения с точкой максимальной скорости в центре. Следует сместить ускорения в конец, смещая диаграмму вправо - таким образом, в конце воспроизведения анимация ускорится, а затем внезапно остановится в нужной позиции.
Как создавать анимированные GIF-ы для презентации дизайна интерфейса: Часть 3


Смотрите ролик ниже, чтобы более практически ознакомиться с плавными переходами:

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

Четвертой фигурой просто черный блок, однако его насыщенность снижена, чтобы обеспечить прозрачность и мы могли видели превосходный фон. Анимация этого эффекта обеспечивается через изменение позиции ключевого кадра из «за кадром» (off-screen) на «в кадре» (on-screen).

анимация текста

В программе After effects имеющиеся готовые эффекты для применения на текстовых слоях. Вы также можете запросто создать свои собственные эффекты, используя сочетание движения и видимости / невидимости.

Сегодняшняя температура: Комбинация ключевых кадров прозрачности и позиции.
Прогнозируемые температуры Комбинация ключевых кадров масштабирования и прозрачности.
Надпись «Снежно»: Окно Under the Effects and Presets → Animation Presets → Text → Slow fade on.

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

Возможно вам нужно быстрое и качественное удаление деревьев альпинистами-арбористами по доступным ценам!

конечный продукт
Как создавать анимированные GIF-ы для презентации дизайна интерфейса: Часть 3
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Комментарии:

Оставить комментарий
 
 
Яндекс.Метрика