Всегда приятно, когда в приложении присутствуют анимации, однако, создаются они непросто. Процесс преобразования анимации, созданной дизайнером, в платформозависимый код является утомительным и вместе с тем сопряженным с вероятностью возникновения ошибок. Lottie является мобильной библиотекой анимаций, созданной Airbnb для iOS и Android, которая разбирает анимации Adobe After Effects (экспортируются как JSON) и обрабатывает их при помощи нативных анимационных API-интерфейсов. С Lottie начинающий дизайнер может создавать и запускать красивые анимации без необходимости в инженере, который бы кропотливо воссоздавал их вручную. Поскольку библиотека опирается на формат JSON, анимации получаются очень маленькими, но зато они могут быть очень комплексными. Анимации можно воспроизводить. Кроме того, позволяется изменять их размер, зацикливать, замедлять и даже очищать в интерактивном режиме.
Так как интегрировать вычурные анимации, а также обновлять и поддерживать их стало теперь предельно просто, я решил использовать Lottie для создания анимаций в каждом из моих приложений. У Lottie имеется ряд функций, встроенных в API, с тем чтобы сделать эту библиотеку более универсальной и эффективной. Она поддерживает загрузку файлов JSON через интернет, обладает дополнительным механизмом кэширования, и, помимо этого, позволяет управлять анимациями с помощью жестов. Из этой статьи Вы узнаете, как при помощи анимационного фреймворка Lottie создавать красивые анимации для приложений iOS, Android и даже Xamarin.Forms!
Добавление красивых анимаций с помощью 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:
1 2 3 4 5 6 7 | <com.airbnb.lottie.LottieAnimationView android:id="@+id/animation_view" android:layout_width="wrap_content" android:layout_height="wrap_content" app:lottie_fileName="hello-world.json" app:lottie_loop="true" app:lottie_autoPlay="true" /> |
В качестве альтернативы Вы можете загрузить анимацию программно из JSON, расположенного в каталоге Assets:
1 2 3 | LottieAnimationView animationView = FindViewById<LottieAnimationView>(Resource.Id.animation_view); animationView.SetAnimation("hello-world.json"); animationView.Loop = true; |
iOS
Создайте анимацию из кода при помощи LAAnimationView, добавьте анимацию к представлению, и вызовите PlayWithCompletion:
1 2 3 4 5 | LAAnimationView animation = LAAnimationView.AnimationNamed("LottieLogo1"); this.View.AddSubview(animation); animation.PlayWithCompletion((animationFinished) => { // Do Something }); |
Вы также можете загрузить его программно (локально или по сети) из NSUrl:
1 2 | LAAnimationView animation = new LAAnimationView(new NSUrl(url)); this.View.AddSubview(animation); |
Xamarin.Forms
К тому же у Lottie есть API, который доступен для Xamarin.Forms с собственной разметкой XAML:
1 2 3 4 5 6 7 | <forms:AnimationView x:Name="AnimationView" Animation="LottieLogo1.json" Loop="True" AutoPlay="True" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" /> |
Загрузка примеров
Для ознакомления с примерами заранее созданных анимаций, скачайте приложение Lottie с GitHub или напрямую с Google Play Store.
С Lottie процесс создания замечательных анимаций не занимает много времени!
Заключение
Существует ещё много всего по части Lottie и связывания нативных библиотек для Xamarin. Вы можете узнать больше о Lottie для Xamarin из файла README на GitHub. Для получения дополнительной информации об устранении неполадок, а также для ознакомления с примерами создания привязок обратитесь к документации Android и iOS. Вы можете присоединиться к моему проекту на базе открытого исходного кода и внести свой вклад на Github!
Автор: Мартейн Ван Дейк
Источник: Официальный блог Xamarin
Об авторе: Мартейн работает на Xablu в качестве консультанта Xamarin. Его можно найти на Твиттере: @mhvdijk и на Github: @Martijn00.
Написать ответ