Софья Прозоровская Анимация в Редимаге на примере бургеров — Кто студент

Софья Прозоровская Анимация в Редимаге на примере бургеров

Как сделать анимацию картинок в редимаге и тест, которые сделают материал интерактивным.

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

Картинка-открывашка

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

Нам понадобятся две картинки: открытое и закрытое меню.

Картинки приготовьте заранее

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

Накладываем одну картинку на другую

Для открытого меню добавляем анимацию Hover → Fade in, длительность анимации (Durat.) на ноль. С длительностью 0 картинка будет сразу появляться при наведении.

Раскрывающаяся картинка

Такая картинка будет раскладываться при скролле. Эта анимация подойдёт для анимированной взрыв-схемы — можно легко показать части объекта.

Анимация показывает, какие ингредиенты есть в бургере

Заготовка: каждую часть бургера сохраняем отдельно

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

Так будет выглядеть бургер до скролла

Анимируем каждую часть кроме центральной. Задаем анимацию Scroll → Move. Настраиваем сдвиг от центра. Дальше всего должны сдвинуться булочки.

Чтобы сдвиг выглядел гармонично, противоположные части должны сдвигаться на одинаковое расстояние. Так верхняя булочка сдвигается от 0 до −120, а нижняя от 0 до 120. Чтобы анимация была плавная, скорость (Speed) лучше поставить на 0.25x.

Выставляем настройки для каждого ингредиента

Крутящаяся картинка

Анимация с крутящимся объектом. Подойдёт для всего круглого: колёс, планет, тарелок.

Голубая тарелка крутится

Добавляем две картинки и настраиваем анимацию на скролле Scroll → Rotate. Чтобы вращение не слишком отвлекало от чтения, выставляем параметры от 0 до 65. Параметр Speed ставим на 2.0.

Заготовка: две тарелки

Задаём старт анимации внизу Start Point — Bottom. Когда тарелки окажутся внизу страницы, они начнут крутиться.

Тест

Чтобы в конце статьи развлечь читателя, сделаем простенький интерактивный тест.

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

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

Добавляем иконки. Каждую иконку анимируем Scroll → Fade in, Durat. ставим на ноль. Добавляем триггер на соответствующий вариант.

Для каждого ответа настраиваем всё отдельно

Каждый вариант связан со своей иконкой

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

Настраиваем анимацию для всей группы Click → Fade in, Durat. на ноль. Триггер ставим на нужный вариант ответа и части кнопки.

Так будут располагаться слои для настроенного теста

Страничка со всеми анимациями