Шаг за шагом добавляем 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>