Xamarin.Android集成Lottie动画重叠、显示效果异常问题如何解决

按以下优先级排查即可解决问题：

• 调整渲染模式
  3.0.6版本Com.Airbnb.Android.Lottie插件对硬件渲染的支持存在缺陷，遮罩、渐变等复杂矢量特效在hardware渲染模式下很容易丢失或变形。直接删除布局中的app:lottie_renderMode="hardware"属性，或改为app:lottie_renderMode="automatic"即可。

• 校验JSON文件合法性

1. 确认你的logo_color2.json文件属性中的生成操作已经设置为AndroidAsset，否则文件读取不全会导致显示异常
2. 导出该动画使用的Bodymovin插件版本不能高于5.5.x，更高版本导出的新特性3.0.6版Lottie无法识别，会出现效果丢失
3. 制作动画时不能使用Lottie不支持的AE效果（如图层样式、复杂表达式、特殊遮罩模式），你可以替换一个官方示例JSON到项目中测试，如果示例动画显示正常，说明你自己的JSON导出不符合规范，重新导出即可。

• 修正布局参数避免变形
  当前使用wrap_content作为动画宽高，容易出现缩放比例异常，建议给Lottie控件设置固定宽高，同时加上缩放类型配置，修改后的布局示例：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:lottie_fileName="logo_color2.json"
        app:lottie_autoPlay="true"
        app:lottie_scaleType="fitCenter"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />
    <TextView
        android:text="Strommad AB"
        android:textSize="15dp"
        android:layout_centerInParent="true"
        android:layout_alignParentBottom="true"
        android:layout_width="wrap_content"
        android:layout_marginBottom="60dp"
        android:textColor="#CFCFCF"
        android:layout_height="wrap_content"/>
</RelativeLayout>

你可以根据需求调整宽高数值，lottie_scaleType="fitCenter"可以保证动画按比例自适应控件大小，不会拉伸变形。

• 增加错误监听定位问题
  当前代码的catch块为空，也没有动画加载异常监听，无法判断是不是加载时报错导致效果异常，修改后的Activity代码如下：

[Activity(Theme = "@style/Theme.Splash",
    MainLauncher = true,
    NoHistory = true)]
public class SplashActivity : AppCompatActivity, Animator.IAnimatorListener, LottieAnimationView.IOnLottieErrorListener
{
    protected override void OnCreate(Bundle savedInstanceState)
    {
        try
        {
            base.OnCreate(savedInstanceState);
            RequestWindowFeature(Android.Views.WindowFeatures.NoTitle);
            Window.SetFlags(Android.Views.WindowManagerFlags.Fullscreen,
                Android.Views.WindowManagerFlags.Fullscreen);
            SetContentView(Resource.Layout.Activity_Splash);

            var animationView = FindViewById<LottieAnimationView>(Resource.Id.animation_view);
            animationView.AddAnimatorListener(this);
            // 注册加载错误监听
            animationView.SetOnLottieErrorListener(this);
        }
        catch (System.Exception ex)
        {
            // 打印初始化错误日志
            Android.Util.Log.Error("LottieError", ex.ToString());
        }
    }

    public void OnAnimationCancel(Animator animation) { }

    public void OnAnimationEnd(Animator animation)
    {
        StartActivity(new Intent(Application.Context, typeof(MainActivity)));
    }

    public void OnAnimationRepeat(Animator animation) { }

    public void OnAnimationStart(Animator animation) { }

    // 动画加载错误回调
    public void OnLottieError(Java.Lang.Exception error)
    {
        Android.Util.Log.Error("LottieError", error?.ToString() ?? "未知加载错误");
    }
}

运行后查看Logcat中LottieError标签的日志，即可定位是不是加载时出现了不支持的特性报错。

实际异常效果：

预期效果：

内容的提问来源于stack exchange，提问作者Zubair Munir