Тестируем новую функцию: поддержка анимаций в компонентах.
Суть в том, что анимация в данном примере сделана только слева. В центре и справа – instances, которые перенимают анимацию. А изменения стилей сделано через стандартные overrides в фигме.
Если изменить анимацию в одном месте, она изменится везде. Моушн-дизайн системы уже близко.

И это наша фишка, в афтере такого нет 🫠

Иногда меня поражает, на сколько странными бывают баги.
Вчера меня попросили помочь с глюком в лотти файле отрендеренном в АЕ.
Баг следующий: на iOS анимированная по trim path обводка с градиентом дребезжит (см. видео).

Выглядит очень плохо, и я вообще не могу понять, как такое у разработчиков получилось. Учитывая, что библиотеку официально поддерживает airbnb, и в репозитории 170 контрибьюторов.

Видимо они под капотом из градиента создают несколько состояний path’а и делают между ними переходы. Особенно радует кадр, где сердечко становится маленьким с другой толщиной обводки.

Интересно, почему тот же слой с обводкой без градиента работает отлично? 🤔

В общем, если столкнётесь с такой проблемой, то починить можно следующим образом:
1. Создаёте новый прямоугольник с нужным градиентом и таким размером, чтобы он покрывал слой с обводкой;
2. Тип обводки меняете на solid;
3. Отмечаете слой с обводкой как маску;
4. Всё работает замечательно и в АЕ и в Аниникс.

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

Если кратко для программистов, то чинится это переключением движка рендера со старого на CoreAnimation.

Больше инфы по ссылке: https://github.com/airbnb/lottie-ios/discussions/1627

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

Спасибо, что проголосовали. Мы вас всех взяли на карандаш ✏️

Жаль конечно, что мы не Шива, и у нас не по 10 рук. Потому что надо делать плагин, разрабатывать инспектор и записывать большущий курс по ui анимации.
А пока мы готовим ВСЁ это, советуем посмотреть как делать классный 3д эффект и экспортировать его в лотти.

https://youtu.be/tuUJG_-ThOY

Сейчас помимо работы над улучшением плагина, заканчиваем разработку двух больших функций:
1. Экспорт анимированных svg;
2. Новое взаимодействие с пресетами.

По поводу svg напишу позже большой пост. Эта технология очень перспективная для веб разработки. Даёт меньший вес файлов и поддерживает продвинутые эффекты (тени, размытия и тд, что лотти делать не умеет), рендерится на сервере и еще много чего.

А по пресетам, хочу поделиться небольшой демкой с последней версии (еще недоступна публично).

Upd: превью пресетов раньше работало через лотти, сейчас работает в свг.

Хотим поделиться ещё одной небольшой анимацией, которая делается в Аниникс малыми усилиями, но выглядит эффектно 👀

У нас тут внутри небольшое обсуждение фичи. Думаем, как лучше сделать анимацию цвета. Помогите)

Слева – общепринятое изменение значений RGB.
Справа – как советуют хорошие дизайнеры, изменение значений HCL.

Как бы вы ожидали работу анимации цвета, если учитывать, что стоит 2 ключа с начальным цветом и конечным?

👍 - левый
🔥 - правый

Открытые комменты в комментариях приветствуются.

Отправьте пост свои друзьям и попросите проголосовать, пожалуйста.

Хоть мы и не любим АЕ, но функции в нём классные. Решили добавить механику с копированием path в ключи position из АЕ.
Пока добавляли, пришла идея, как сделать супер удобно, но в следующий релиз добавим так.

Спасибо АЕ 🥹

Вот бы и нас так любили, как любят Эппл.
Пошла новая лихордка динамического острова, а мы не стоим в стороне и лихорадим вместе с людями.
Запилили такую анимацию вдвоём за 2 часа.

Как вам? Комьюнити файл скоро выложим, сможете потыкать сами.

А я новый айфон не предзакажу, старый ещё работает, уже 3 года.

UPD: ссылка на инспектор https://dev-app.aninix.com/inspect/l7sakamzy9gz77id55b

Опубликовали исходники танцующего динамического острова в community Фигмы. Можете пощупать своими руками.

Новый релиз:
1. Тёмный секси режим;
2. Копирование любого слоя как ключи для позиции;
3. Добавили полностью новое взаимодействие с пресетами.

И ещё много всего, весь список можно посмотреть тут.

Наш следующий релиз 😆

Извините, не могу остановиться.
(дом это Адоби)

Отчаянные времена требуют отчаянных решений.

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

Извините, если это повлияло на ваши процессы. И большое спасибо всем, кто просигнализировал о проблеме. Мы любим все отзывы.

Мы всё больше убеждаемся в том, что дизайн без анимации мёртв, ведь движение создает прошлое, настоящее и будущее.
Можно конечно для новаторства использовать вырвиглазные цвета, нечитабельные шрифты и уродливые формы. Будет цеплять, но будет ли это на самом деле «удобоваримо»?
А вот классические, привычные, четко выверенные дизайны перестают быть скучными благодаря анимации. Даже челка переродилась в динамический остров, потому что ожила, ей подарили душу.
Если вы стремитесь попасть в большие компании с мировым именем, то просто обязаны уметь анимировать. Если вы хотите сами создать такую компанию, то должны быть ещё более продвинутыми, гибкими и современными, чтобы угнаться за гигантами или даже опережать их.
В общем, знать анимацию сегодня должен каждый дизайнер. А если нет, то это как знать предмет только наполовину и считать, что этого достаточно.
Даёшь анимацию в каждый дизайн. Аминь.

Создавая продукт, мы очень надеялись, что на нём не будут паразитировать. Учить нужно теорию анимации, а не программу. Софт не должен быть таким, чтобы люди боялись к нему подойти из-за плохой репутации, открывали и сразу проклинали за сложность. Имея опыт как в работе с анимацией, так и в преподавании, мы поняли, что старая парадигма, в которой АЕ - большой и ужасный, должна уйти в прошлое. И все длительные и дорогие курсы вместе с ней.

1 час, 19 минут и 53 секунды - вот сколько вы потратите на просмотр видео и на то, чтобы стать круче.
Если вы уже были на курсе у Антона, то знаете что он плохому не научит. Для вас это отличная возможность повторить пройденное уже на удобном софте. Если не были, то курс станет ещё одним источником информации и отличной возможностью впитать знания и опыт человека настолько влюблённого в анимацию, что даже решившего избавить человечество от АЕ.
А если вы вообще ничего не знаете об анимации, то после курса получите шанс продвинуться по карьерной лестнице, потому что это мощнейшая строчка для описания скилов.

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

Мы очень старались для вас, и просим помощи в распространении полезных знаний.

https://www.youtube.com/watch?v=oErWfBXl70U

В Аниникс очередное обновление (v2.22.0). Для нас долгожданное, потому что мы теперь не только про Lottie, у нас появилась поддержка Svg.
Почему второе лучше?

Тут просто:
• никаких сторонних библиотек, дополнительных установок и воровства драгоценного времени разработчиков. Svg работают как обычные картинки;
• меньший вес файлов;
• работа в Webflow и других сайтостроителях из коробки;
• поддержка блюююров;
• абсолютно идеально для веба.
Поэтому нас скорее интересует, почему про svg не говорят все, и как это устроить?

А ещё мы сделали поддержку skew (для симуляции 3д и изометрии). Если кто работал с skewdat плагином, вот у нас как там, но на максималках из-за анимации. Пример демонстрирует, как объемно получается.

Ну и теперь становится возможным запуск нескольких проектов одновременно. Лёгкое переключение, скорость, комфорт - всё для любимых пользователей.

В общем, тестируйте. А мы ждём ваши отзывы, критику, благодарность и конечно предложения.