Lottie в интерфейсах: как мы оживляем 2ГИС с помощью анимаций

Анимация уже давно стала стандартным инструментом в дизайне и способна выполнять самые разные задачи: обеспечивает плавность и приятную отзывчивость — как в современных ОС (например, дизайн-система Android Material 3 или Apple , которые используют принципы Springs), транслирует голос бренда и становится частью айдентики ( CashMoney , Instagram , Plex ), добавляет продуктовым сценариям эмоциональность и значимость. Недавно и перед нашей командой встала задача «оживить» некоторые из них. Меня зовут Саша Гончаров, я моушен-дизайнер в 2ГИС. По просьбе продуктовых дизайнеров я подключился к работе над анимацией интерфейсов. В этой статье расскажу, на что стоит обращать внимание при создании интерфейсных анимаций, какие технические нюансы важно учитывать и как мы достигаем желаемых эффектов. Материал будет полезен моушен-дизайнерам, которые хотят работать с интерфейсами, а также разработчикам, интересующимся особенностями рендеринга объектов на карте. Читать

https://habr.com/ru/companies/2gis/articles/935296/

#adobe_after_effects #lottie #lottiefiles #анимация_в_приложениях #анимация #приложения #мобильные_приложения

The Exploding Pigeon: one click and it's done! 💥

#LottieFiles interactivity 🤘🏻
https://codepen.io/Osbro/pen/vYeqOGM

Как уменьшить вес продуктовой анимации в 400 раз (без AI)

Все любят красивую и качественную графику, но обычно такая графика весит много и влечёт проблемы с её добавлением в дистрибутив проекта. А, возможно, и доработки по внешней загрузке или самое частое — сжатие с потерей качества. Каждый дизайнер хоть раз, да говорил «Вот бы можно было и качество сохранить, и отдать разработчикам легкие файлы…». Сегодня нет классных AI-решений для этой задачи, но в этой статье мы расскажем о том, как нам удаётся значительно ужимать графику с использованием растровых и векторных элементов, содержащей альфа-канал. В статье мы ответим на следующие вопросы: Какой формат анимации с растровыми элементами выбрать для использования в мобильном приложении? Как уменьшить вес файла и не потерять качество картинки? И как со всем этим связаны Lottie-анимации?

https://habr.com/ru/articles/793260/

#lottiefiles #анимация #оптимизация_изображений #дизайнеру #продуктовый_дизайн #командная_работа

A bit of progress in between all other projects... ;-) A correct width and color for a stroke!

See https://lottie4j.com/

#LottieFiles #JavaFX

Why would it be great to include #LottieFiles animations in #JavaFX? This seems a nice answer... ;-)

"4.7 Million Motion Graphics Designers and Developers Turn to Lottie for Efficient Animation Workflow."

https://finance.yahoo.com/news/4-7-million-motion-graphics-161000528.html

Still a long way to go but the core library has been extended to be able to read both fixed and animated beziers. The demo app can now load a JSON LottieFile with such animated bezier and very first result of the visualization shows some "matching parts" ;-) Colors, strokes, fills... are the next step.

https://lottie4j.com/index.html

Screenshot: left expected result as static image, right generated image based on the JSON file.

#JavaFX #OpenJFX #Java #LottieFiles

I started working on a new #Java library to load and save #LottieFiles and #dotLottie, plus a #JavaFX player.

The very early steps are taken. A website on https://lottie4j.com thanks to #JBake, Mastodon account on @lottie4j, different Lottie JSON files can already be loaded and saved back to the same JSON, and a very first visual output showing there is some valid data being handled.

Sources: https://github.com/lottie4j

The JavaFX player component will be a very big challenge...

Does anyone know if I can add a @[email protected] #JSON #animation to an email body?

#motiondesign #motionGraphics #lottiefiles #html #marketing #EmailMarketing