Readymag Animations. Анимации в Редимаг — Подробно. Часть 1. On Load, On Scroll, On Hover.

• Анимация - это изменение параметров объекта по триггеру или событию.  

• Анимации лучше придумывать заранее, используя раскадровки и примеры.  

• Анимация состоит из технической и художественной частей.  

• Все виджеты в Rad Magic можно анимировать.  

• В панели настроек есть вкладка "Анимация", где можно выбрать событие для анимации.  

• Примеры событий: загрузка страницы, прокрутка до определенного экрана.  

• В Rad Magic есть четыре основных эффекта анимации: перемещение, изменение прозрачности, вращение и изменение масштаба.  

• Пример: перемещение объекта из точки А в точку Б.  

• Анимация может быть одношаговой или многошаговой.  

• Настройки: задержка и длительность анимации.  

• Пример: объект перемещается за одну секунду, затем за шесть секунд.  

• Ускорение: из ин и из аут.  

• Пример: объект медленно ускоряется и быстро замедляется.  

• Можно создать анимацию подпрыгивания.  

• Луп анимация позволяет зациклить анимацию.  

• Пример: шарик падает и поднимается, повторяя шаги.  

• Луп можно настроить на конкретный шаг анимации.  

• Можно включить превью анимации прямо из панели настроек.  

• Пример: шарик прыгает, можно менять настройки прямо в превью.  

• Пример анимации: объект ускоряется, отскакивает и замедляется.  

• Возможность привязки нескольких эффектов к одному событию анимации.  

• Пример добавления эффекта апсити: объект становится прозрачным и непрозрачным.  

• Добавление эффекта скейл: объект уменьшается и увеличивается.  

• Пример с прямоугольником: настройка роттейта для полного поворота объекта.  

• Комбинирование эффектов: добавление апсити и скейла на разных шагах.  

• Настройка экрана для анимации по скролу.  

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

• Настройка скорости движения объекта.  

• Настройка старт-пойнта для анимации по скролу.  

• Пример анимации объекта, который начинает двигаться при достижении нижней границы экрана.  

• Создание эффекта параллакса с помощью анимации по скролу.  

• Настройка анимации для создания эффекта воздушной перспективы.  

• Пример: объекты, находящиеся дальше, выглядят светлее и менее контрастными.  

• Настройка скорости движения объектов для достижения эффекта глубины.  

• Обсуждение скорости и цвета анимации.  

• Возможность создания параллакс-эффекта с тенями.  

• Горизонтальный скролл требует обсуждения позиционирования.  

• Анимации по скроллу работают по-разному в зависимости от положения объекта.  

• Объекты начинают анимироваться при достижении определенной точки на экране.  

• Использование офсета для точного позиционирования анимации.  

• Пример плавного ухода текста с экрана.  

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

• Точное расчет офсета для достижения желаемого эффекта.  

• Ховер анимация: наведение мыши на объект вызывает анимацию.  

• Клик анимация: анимация при клике на объект.  

• Возможность добавления триггеров для управления анимацией.  

• Триггеры позволяют управлять анимацией через другие объекты.  

• Копирование анимаций между объектами для создания одинаковых эффектов.  

• Пример использования триггеров для нескольких объектов.  

• Для копирования анимации выбираем объект и нажимаем Ctrl+C.  

• Для вставки анимации выбираем другой объект и нажимаем Ctrl+V.  

• Триггеры срабатывают сразу для всех объектов.  

• Создаем шейп с нулевой прозрачностью и называем его триггер-шейп.  

• Добавляем триггер-шейп в анимацию, чтобы он срабатывал при наведении.  

• Триггер-шейп должен быть самым верхним объектом.  

• Создаем группы объектов для объединения анимаций.  

• В группе можно удалить отдельные анимации и объединить их в одну.  

• Группы можно выравнивать по отношению друг к другу.  

• Добавляем белый или черный фон для улучшения внешнего вида.  

• Редактируем текст, который не выделяется напрямую.  

• Не затягивайте анимацию, чтобы избежать раздражающих задержек.  

• В Figma элементы можно закреплять по центру браузера.  

• В Rad Magic элементы закрепляются по странице.  

• В следующем модуле будет рассмотрено создание выпадающих меню.  

• В третьем модуле будет лекция о подготовке макета в разработку.  

• Во втором модуле будет обсуждаться работа с компонентами и автолаутом.  

• Освоение инструмента для работы с веб-дизайном.  

• Понимание расположения объектов в рамках прямоугольника.  

• Поиск хороших фотографий и шрифтов, композиция элементов.  

• Работа с сеткой и написание текстов.  

• Создание визуально приемлемого и качественного дизайна.  

• В третьем модуле будут рассмотрены компоненты, дизайн-системы, адаптивные макеты и навигация.  

• Задача текущего модуля - научиться создавать визуально приемлемые и понятные элементы.  

• Использование замочков для фиксации изменений.  

• Принципы анимации одинаковы для всех сайтов и конструкторов.  

• Основные элементы анимации: точка начала, эффект и триггеры.  

• Важность создания приятной и естественной анимации.  

• Вопросы и ответы по теме.  

• Обещание выложить лекцию и добавить домашнее задание.  

• Напоминание о необходимости выполнения всех незавершенных задач.  

• Прощание и завершение встречи.