Lottie AnimationView 在 iOS 中不工作，但在 Android c# 实现中工作

Posted 2023-04-13

【中文标题】Lottie AnimationView 在 iOS 中不工作，但在 Android c# 实现中工作

【英文标题】：Lottie AnimationView Not working in iOS but is working in Android c# Implementation

【发布时间】：2019-06-20 13:17:34

【问题描述】：

尝试在 android 上播放动画时，动画会正确显示和播放，但在 ios 上，动画不会显示。 调用element.IsPlaying时，我们得到的返回值为true。

Lottie 已在 Android 和 iOS 实现中正确配置，文件位于 Android 和 iOS 的资产和根项目文件夹中，并设置了正确的构建操作。

代码：

public class xxx : ContentPage 
    AnimationView element = new AnimationView();

    public xxx()
    
        element = new AnimationView() 
            Loop = true,
            AutoPlay = true,
            Animation = "splashyloader.json",
            WidthRequest = 400,
            HeightRequest = 400,
            VerticalOptions = LayoutOptions.FillAndExpand,
            HorizontalOptions = LayoutOptions.FillAndExpand,
            IsVisible = true,
            Speed=1
        ;
    
    protected override void OnAppearing()
        element.Animation = "splashyloader.json";
        element.Play();
    

【问题讨论】：

您是否尝试过删除高度和宽度请求属性？这只是一个想法。我知道即使水平和垂直选项设置为填充和扩展，它也可能对尺寸很挑剔。此外，这不可能是所有代码，因为您缺少对 InitalizeComponent() 的调用，并且“元素”永远不会加载到页面内容中。你有吗？此外，我的 Lottie 文件已加载到 Resources 文件夹中，不确定这是否重要。最后，检查以确保 json 文件的构建属性正确。

Lottie相关的代码就这些了，其他都是逻辑和接口代码。 Lottie 动画视图被添加到堆栈布局中，该布局包含在添加到内容的滚动视图中。我试过没有高度/宽度属性。在所有项目中使用 2.7.0。不知道为什么会这样，以前没用过 Lottie，我敢肯定不是 Lottie 不起作用。

每当我使用 XAML 时它都可以工作，但是软件中的大多数接口都是使用 C# 生成的，以提高速度，而且 Lottie 似乎不喜欢没有 XAML 的 C#。

如果您创建了一个可重用的控件，该控件背后有 XAML，并且 anijationview 嵌入在布局中，然后将该控件放入而不是直接放入动画视图中？

您的意思是使用 XAML 创建一个内容视图并在我想嵌入动画视图时引用该内容视图？

【参考方案1】：

经过调查，我发现大多数动画都是从使用 XAML 构建的 AnimationView 播放的。 Brad Dixon 建议使用 XAML 创建一个 ContentView 并为 Lottie 动画构建一个自定义视图，然后可以通过编程方式调用该视图而不会出现问题。

一旦实施初步测试表明这可以正常工作，进一步的测试表明我尝试使用的主要 Lottie JSON 动画文件无法在 iOS 上运行（表明可能存在损坏）。

这似乎可行，但实际上并不是最佳设置。希望未来版本的 Lottie 会淘汰这个。

AnimatingView.xaml

<?xml version="1.0" encoding="UTF-8"?>
    <ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="FoodMono.Views.AnimatingView" xmlns:forms="clr-namespace:Lottie.Forms;assembly=Lottie.Forms">
        <ContentView.Content>
            <forms:AnimationView x:Name="animation" Loop="True" AutoPlay="True" HeightRequest="300" WidthRequest="300" Speed="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Animation="5stars.json" />
        </ContentView.Content>
    </ContentView>

AnimatingView.xaml.cs

public partial class AnimatingView : ContentView

    string animationName = null;
    public AnimatingView(string AnimationName, bool loop=true, bool autostart=true)
    
        InitializeComponent();
        animationName = AnimationName;
        animation.Animation = AnimationName;
        if(!loop)
            animation.Loop = loop;
        if(!autostart)
            animation.AutoPlay = autostart;


    
    protected override void OnParentSet()
    
        Console.WriteLine(animation.IsPlaying);
        this.Start();
        Console.WriteLine(animation.IsPlaying);
        base.OnParentSet();
    
    public void Start()
    
        animation.Play();
    
    public void Stop()
    
        animation.AbortAnimation(animationName);
    

【讨论】：

我相信您的 AnimationView 的 LayoutOptions 应该只是“填充”，因为您只使用 StackLayout 中的展开选项。

【参考方案2】：

将您的 AnimationView 放在自定义控件/ContentView 中并以这种方式使用它。带有 XAML 的容器将使其按预期工作。