Aninix | UI animation in Figma


Kanal geosi va tili: Ukraina, Ruscha
Toifa: Dizayn


Мы разрабатываем плагин для интерфейсных анимаций внутри Фигмы и публикуем разные мысли по UI анимации.
Подробнее: https://www.aninix.com

Связанные каналы  |  Похожие каналы

Kanal geosi va tili
Ukraina, Ruscha
Toifa
Dizayn
Statistika
Postlar filtri


Video oldindan ko‘rish uchun mavjud emas
Telegram'da ko‘rish
Сделали релиз долгожданной функции:
добавили возможность дублирования проектов 🎉


Постараемся радовать вас новыми функциями чаще 🤗

Сегодня сделали очередной релиз:
• добавили возможность редактирования градиентов во вьюпорте (видео 1);
• добавили функцию дублирования слоёв с помощью горячих клавиш cmd/ctrl + D и добавили возможность drag'n'drop слоёв на таймлайне (видео 2);
• плюс несколько других небольших багфиксов.

Полный лог изменений


Опять мы притихли. Что-то у нас не получается вести соц. сети и разрабатывать софт 😩
Поэтому мы решили собрать в одном посте все новости за предыдущие несколько месяцев:

- добавили поддержку свободного положения для anchor point'а;
- добавили возможность создавать проекты из svg файлов;
- переработали систему синхронизации между фигмой и аниниксом. Сделали её быстрее и точнее;
- добавили парочку новых пресетов с анимацией layer blur'а;
- запустили 2 дополнительных плагина: protonix (для экспорта прототипов во все форматы) и anitype (для анимации текстов для figma slides);
- стабилизировали систему, чтобы снизить количество багов до минимума.

Если у вас есть мысли, баг репорты, или запросы на функционал – пишите. Мы всегда открыты и рады любой обратной связи.


Пара крутых анимаций сделанных в Аниникс за лето 🌞

Авторы:
- https://x.com/gabfoulon
- https://x.com/oleksandrplyuto


Увидели прикольный дизайн в Х, решили заанимировать. По времени заняло 15 минут.


Повысить стабильность приложения – это наша цель на ближайшее время. Раньше около 15% пользователей испытывали вылеты приложения, сегодня эта цифра уже около 4%. Метим в показатель 0%.

Если вы испытываете и знаете как повторить какой-то баг, дайте, пожалуйста, знать.


Сделали ещё один небольшой пример с использованием техники стаггер (урок здесь). Компонент взят из UI библиотеки shadcn.


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


Stagger - это техника анимации пользовательского интерфейса, когда элементы анимируются последовательно, иногда накладываясь друг на друга.

Видео с пометкой 01: При отсутствии стаггера все элементы "слипаются" в один объект, и он кажется зрителю неживым

02: При слишком длинной задержке все элементы распадаются и выглядят для пользователя как отдельные не связанные между собой части

03: Хорошим же считается тот стаггер, который создаёт иллюзицию целостности объекта, но при этом сохраняет разную задержку для каждого элемента

04: Существуют разные типы стаггера:
в первом случае мы добавляем бОльшую задержку после появления первого элемента (delay after first)

05: во втором случае добавляем задержку перед последним элементом (delay before last)

06: Для того, чтобы подобрать идеальную задержку, нужно визуально представить график каждого сегмента. И сопоставить их так, чтобы они накладывались друг на друга создавая цельный график


Cделали небольшой урок о том, как повторить анимацию airbnb, используя прототипы в фигме, и как это выгрузить в спецификацию для разработчиков.

▶️ Смотреть на ютуб


На базе технологий, которые мы разрабатывали предыдущие 3 года, мы запустили ещё один плагин — Protonix.

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


Video oldindan ko‘rish uchun mavjud emas
Telegram'da ko‘rish
Запустили наш второй небольшой плагин для анимации текстов (Anitype) 🎉

Он позволяет анимировать любые тексты на фрейме в один клик. Анимацию можно экспортировать в видео (mp4, webm), gif, lottie, проекты Аниникс и фигма прототипы, которые можно использовать в фигма слайдах для презентаций.


Хорошая UI анимация всегда проявляется в мелочах, которые сложно заметить. Неправильная анимация всегда явно неприятна глазу, хотя тяжело объяснить, что конкретно с ней не так.
Например, на видео показаны 2 примера анимации компонента, с которым мы сейчас работаем: до и после изменений. При просмотре обеих анимаций разницы почти не видно, но верхний пример почему-то хуже. Когда я начал разбирать анимацию покадрово, то понял, в чём дело.

Резкое изменение создаёт «некрасивые» кадры:
- пропадает текст;
- создаётся слабая контрастность;
- появляется искаженное состояние стрелки.

Немного поднастроив тайминги и графики анимации получилось лучше:
- поменял график для стрелки, чтобы она проскакивала «кривые» кадры;
- сделал разные тайминги для анимации цвета и позиции;
- добавил задержку к анимации цвета текста, чтобы избавиться от кадров со слабым контрастом.


Посмотрели крутую презентацию про apple intelligence. А у моей жены виджеты не прогружаются пару месяцев. Надеюсь, новая умная сири починит.


Как говорится, критикуешь – предлагай. Подумал, что скорее всего эппл сделали мгновенное появление слайдера специально. Это позволяет быстро скроллить книгу. Поэтому я оставил появление этого элемента первым, чтобы он сразу же был интерактивным. Остальные элементы «вытягиваются» вслед за слайдером.
Убирается менюшка в обратную сторону зеркально – сначала кнопки, потом слайдер. Тут нет логичной аргументации, решил сделать как больше нравится.

Вот чем я занимаюсь вместо правок по аниниксу 🥴


Video oldindan ko‘rish uchun mavjud emas
Telegram'da ko‘rish
Анимация взята из приложения iBooks от Apple. Каждый раз, вызывая меню настроек, меня передёргивает от резкого появления ползунка и слишком медленной анимации левого блока. И это длится с момента выхода iOS 17, то есть почти целый год.

Изначально я хотел повозмущаться: «как можно анимировать одну часть, а вторую – нет?». Но при воспроизведении покадрово видно, что правая часть тоже анимирована. Только вот анимация длится всего 3 кадра, и человеческий глаз не успевает уловить движение. В противовес анимация левого меню длится 1 секунду (60 кадров). То есть работа по реализации анимации уже проделана.

Почему бы не настроить сразу нормально?


Video oldindan ko‘rish uchun mavjud emas
Telegram'da ko‘rish
Небольшой тизер. Работаем над подробным уроком о создании подобных анимаций в Аниникс. В уроке будет больше информации о том, как сделать такое с нуля. Ну а текущее видео можно использовать как шпаргалку ✍️


Хотим попросить вас помочь нам в улучшении Аниникс. Мы подготовили небольшую анкету, и будем очень признательны, если вы сможете найти время заполнить её.
Понадобится максимум 15 минут вашего времени. За половину заполненной анкеты дарим бесплатный доступ в Аниникс на 1 месяц, а за целую анкету – на 2. 20$ за 15 минут

https://tally.so/r/31rQr1


Ещё как пример, у эппла красивые лендинги, а вот майкрософт так круто сделать не смог. Как инженеры с зарплатой в 180к$+/год не смогли сделать хорошие анимации на сайте? Скорее всего это skill issue.

В общем наша задача на ближайшие пару лет ясна – решить проблему передачи анимации в код. Надеемся вы нам в этом поможете 🙂

Источник видео. Сайт майкрософта.

3/3


Недавно Виталий Котов запостил в твиттере, казалось бы, простую анимацию – ховер, изменение двух состояний. Но если задуматься о её реализации в продукте – появляются вопросы.

Допустим, можно использовать текущую версию Аниникса, экспортировать лотти файл и отдать его разработчикам. Но подобная иконка, с несколькими градиентами, ухудшит пользовательский опыт: создаст лишнюю нагрузку на процессор, замедлит загрузку сайта или приложения. А если таких анимаций будет несколько? Процесс быстро выходит из под контроля, и разработчику приходится придумывать костыли по оптимизации, чтобы это хоть как-то работало. Получается, что компромиссные варианты на подобии lottie или rive не слишком хорошо подходят для решения проблемы.

Нужно какое-то решение, которое позволит разработчику легко создавать то, что придумал дизайнер. Мы в Аниникс с этого начинали, но не было ясной картины, что конкретно мы хотим построить.

2/3

20 ta oxirgi post ko‘rsatilgan.