В помощь мобильному разработчику
Lottie пример анимации

Потрясающие анимации в приложениях с Lottie

Александр Алексеев

Всегда приятно, когда в приложении присутствуют анимации, однако, создаются они непросто. Процесс преобразования анимации, созданной дизайнером, в платформозависимый код является утомительным и вместе с тем сопряженным с вероятностью возникновения ошибок. Lottie является мобильной библиотекой анимаций, созданной Airbnb для iOS и Android, которая разбирает анимации Adobe After Effects (экспортируются как JSON) и обрабатывает их при помощи нативных анимационных API-интерфейсов. С Lottie начинающий дизайнер может создавать и запускать красивые анимации без необходимости в инженере, который бы кропотливо воссоздавал их вручную. Поскольку библиотека опирается на формат JSON, анимации получаются очень маленькими, но зато они могут быть очень комплексными. Анимации можно воспроизводить. Кроме того, позволяется изменять их размер, зацикливать, замедлять и даже очищать в интерактивном режиме.

Так как интегрировать вычурные анимации, а также обновлять и поддерживать их стало теперь предельно просто, я решил использовать Lottie для создания анимаций в каждом из моих приложений. У Lottie имеется ряд функций, встроенных в API, с тем чтобы сделать эту библиотеку более универсальной и эффективной. Она поддерживает загрузку файлов JSON через интернет, обладает дополнительным механизмом кэширования, и, помимо этого, позволяет управлять анимациями с помощью жестов. Из этой статьи Вы узнаете, как при помощи анимационного фреймворка Lottie создавать красивые анимации для приложений iOS, Android и даже Xamarin.Forms!

Lottie пример анимации

 

Добавление красивых анимаций с помощью Lottie

Прежде чем браться за код, нам следует сперва создать анимацию. Функции Lottie используют формат JSON, экспортируемый из Adobe After Effects, и преобразует его в нативную анимацию. Сперва создайте анимацию в Adobe After Effects. Затем используйте плагин bodymovin для After Effects, с тем чтобы экспортировать анимацию в формате JSON. Это послужит в качестве резервного хранилища для анимаций, которые будут загружены Lottie из кода.

Теперь пришло время добавить анимацию в мобильные приложения. Lottie для Xamarin распространяется через NuGet. Чтобы использовать Lottie в приложениях просто добавьте соответствующую версию пакета Lottie — iOS, Android или Xamarin.Forms — в проект.

 

Android

Lottie поддерживает Jellybean (API 16) и выше. Проще всего использовать ее с LottieAnimationView:

 

В качестве альтернативы Вы можете загрузить анимацию программно из JSON, расположенного в каталоге Assets:

 

iOS

Создайте анимацию из кода при помощи LAAnimationView, добавьте анимацию к представлению, и вызовите PlayWithCompletion:

 

Вы также можете загрузить его программно (локально или по сети) из NSUrl:

 

Xamarin.Forms

К тому же у Lottie есть API, который доступен для Xamarin.Forms с собственной разметкой XAML:

 

Загрузка примеров

Для ознакомления с примерами заранее созданных анимаций, скачайте приложение Lottie с GitHub или напрямую с Google Play Store.

С Lottie процесс создания замечательных анимаций не занимает много времени!

Lottie пример анимации

 

Заключение

Существует ещё много всего по части Lottie и связывания нативных библиотек для Xamarin. Вы можете узнать больше о Lottie для Xamarin из файла README на GitHub. Для получения дополнительной информации об устранении неполадок, а также для ознакомления с примерами создания привязок обратитесь к документации Android и iOS. Вы можете присоединиться к моему проекту на базе открытого исходного кода и внести свой вклад на Github!

 

Автор: Мартейн Ван Дейк
ИсточникОфициальный блог Xamarin
Об авторе: Мартейн работает на Xablu в качестве консультанта Xamarin. Его можно найти на Твиттере: @mhvdijk и на Github: @Martijn00.

Александр Алексеев
Александр Алексеев

Xamarin - разработчик. Работаю с .NET платформой с 2012 года, программирую в основном с использованием C#. За это время успел поработать с ASP.NET, Entity Framework, MSSQL, Git

Project Rome
Android Apple кастомизация

Написать ответ