IOS challenges – Animation

IOS challenges – Animation

Year: 2024

О проекте

О проекте

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

От себя

От себя

Вводные: я не особо дисциплинированный человек (если ни перед кем нет ответственности), поэтому такой движ мне даётся трудновато 🫠. Но в момент публикации второго задания у меня оказались свободные пару минут — решила выполнить, так и пошло… У меня уже был опыт в AE, но чтобы упростить весь процесс, я использовала только Figma, Jitter и пару раз Spline

Стек

Стек

Figma

Jitter

Rive

new

Spline

#1 / Взаимодействие с кнопкой

#1 / Взаимодействие с кнопкой

Исходный файл

Исходный файл

#2 / Анимация иконки

#2 / Анимация иконки

Исходный файл

Результат

#3 / Отображение изменения нотификации

#3 / Отображение изменения нотификации

Исходный файл

Результат

#4 / Анимация голосового ввода

#4 / Анимация голосового ввода

Исходный файл

Результат

#5 / Анимация тогла i hate new year

#5 / Анимация тогла i hate new year

Исходный файл

Результат

Интересный факт в том, что это задание было от реального заказчика. В его telegram-приложении была новогодняя тема, нужно было санимировать выключение этого режима и связать его с персонажем Гринча

#6 / Анимация графика

#6 / Анимация графика

Исходный файл

Результат

#7 / Нажатие на лайк

#7 / Нажатие на лайк

Исходный файл

Результат

#8 / Снекбар

#8 / Снекбар

Исходный файл

Результат

#9 / Анимация иконки

#9 / Анимация иконки

Исходный файл

Результат

#10 / Взлёт и посадка

#10 / Взлёт и посадка

Исходный файл

Результат

#11 / Анимация папки

#11 / Анимация папки

Исходный файл

Результат

Так как в заданиях нет ограничений, решила еще заюзать spline и попробовать там анимировать

#12 / Конфетти

#12 / Конфетти

Исходный файл

Результат

Одно из самых сложных заданий для меня – создание анимированных конфетти. До этого я обходилась анимацией в jitter и figma. Но такое трудно реализовать в этих апках, поэтому пошла в rive. Хочу отметить, что у меня был опыт работы в AE, поэтому мне было не трудно влиться в rive. Кстати штука классная, работает в онлайне, выглядит солидно, не слишком ужатые возможности в бесплатной версии

#13 / Велком скрин

#13 / Велком скрин

Исходный файл

Результат

#14 / Подключение airpods

#14 / Подключение airpods

Исходный файл

Результат

#15 / Включение airdrop

#15 / Включение airdrop

Исходный файл

Результат

#16 / Анимация чек-листа

#16 / Анимация чек-листа

Исходный файл

Результат

#17 / Анимация иконки

#17 / Анимация иконки

Исходный файл

Результат

#18 / Анимация иконки

#18 / Анимация иконки

Исходный файл

Результат

#19 / Pomodoro таймер

#19 / Pomodoro таймер

Исходный файл

Результат

#20 / Анимация иконки

#20 / Анимация иконки

Исходный файл

Результат

#21 / Анимация очистки памяти

#21 / Анимация очистки памяти

Исходный файл

Результат

#22 / Номинация

#22 / Номинация

Исходный файл

Результат

#23 / Анимация отправки

#23 / Анимация отправки

Исходный файл

Результат

#24 / Анимация popup

#24 / Анимация popup

Исходный файл

Результат

#25 / Лого Figma

#25 / Лого Figma

Исходный файл

Результат

#26 / Анимация иконки

#26 / Анимация иконки

Исходный файл

Результат

#27 / Анимация огня

#27 / Анимация огня

Исходный файл

Результат

Решила поэксперементировать в rive и попробовать шейповую анимацию, все ключи двигала вручную хд

#28 / Анимация ёлки

#28 / Анимация ёлки

Исходный файл

Результат

#29 / Трансформация инпута

#29 / Трансформация инпута

Исходный файл

Результат

#30 / Иконка корзины

#30 / Иконка корзины

Исходный файл

Результат

Итоги

Итоги

Что по сложности? В целом выполнение мне давалось легко, но было одно сложное задание — конфетти. Я вообще не имела понятия, как его делать, + не хотела юзать AE (у меня высокая когнитивная нагрузка во время его использования). При этом увидела, что многие ребята работают в Rive. Это был отличный повод потыкаться в новой апке. Пошла туда — и с тех пор почти все задания выполняла там. Солидненький дизайн, не выглядит устрашающе, работает в онлайне — в общем, мне понравился.

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