Шаг за шагом добавляем Lottie анимации в Xamarin Forms приложение

Lottie это библиотека, созданная Airbnb и позволяет вам запускать анимации. Она работает с помощью json-файла, который предоставляет контент для отображения анимации. Спасибо Martijn van Dijk что теперь эта библиотека доступна для Xamarin Forms. Для подробного ознакомления, посмотрите его репозиторий: https://github.com/martijn00/LottieXamarin. Конечно, я бы еще рекомендовал ознакомиться с его статьей: Bring Stunning Animations to Your Apps with Lottie

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

Шаг 1. Установка

Установите Lottie for Xamarin.Forms, во все ваши проекты.

Установка пакета Lottie

Шаг 2. Инициализация

Инициализируйте Lottie в обоих проектах iOS и Android с помощью вызова AnimationViewRenderer.Init()

Инициализация в Android проекте

Инициализация в iOS проекте

Шаг 3. Применение

Вы можете добавить AnimationView из кода, или если это XAML страница:

xmlns:forms="clr-namespace:Lottie.Forms;assembly=Lottie.Forms"
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:LottieSample"
             x:Class="LottieSample.LottieSamplePage"
             xmlns:forms="clr-namespace:Lottie.Forms;assembly=Lottie.Forms">
    <ContentPage.Content>
         <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
              <forms:AnimationView
                x:Name="AnimationView"
                Animation="video_cam.json"
                AutoPlay="True" Loop="true"
                VerticalOptions="FillAndExpand"
                HorizontalOptions="FillAndExpand" />
      </StackLayout>
    </ContentPage.Content>
</ContentPage>

Шаг 4. Выбор анимации

Выберите анимацию, созданную в Adobe After Effects и экспортируйте ее в json-файл, используя расширение Bodymovin.

Шаг 5. Добавление Json-файла в проект

В iOS добавьте его в свой проект и убедитесь, что в Build Action указан BundleResource

В Android поместите его в папку Assets и убедитесь, что в Build Action указан AndroidAsset

И это все, что вам нужно, чтобы ваша анимация работала!

Результат

Исходный код

Оригинал

Теги: xamarin forms, ios, android, перевод