如何在 MVVM 架构中将动画视图播放与 LottieForms 绑定？答案

【问题标题】：How to bind animationview play with LottieForms in a MVVM architecture?如何在 MVVM 架构中将动画视图播放与 LottieForms 绑定？
【发布时间】：2018-10-03 21:40:30
【问题描述】：

所以我在列表视图中使用动画，我想在任何时候播放一次，所以我想控制它。

这是图书馆https://github.com/martijn00/LottieXamarin

我有一堂课：

public class Info {
   public bool ReadMoreIconVisibility {get;set;}
}

还有xaml：

<forms:AnimationView Animation = "animationone.json" Loop = "false" IsVisible="{Binding ReadMoreIconVisibiliy}"/>

我可以成功地使用我的 xaml 来隐藏/不隐藏我的动画。但是我如何达到AnimationView.Play() 方法，只有当我将我的标签命名为x:name 时才可用。

我如何利用 mvvm 架构师来Playmy 动画？

我无法使用命令参数，因为它已被同一列表视图中的另一个项目使用：

 <Button Command="{Binding Click}" CommandParameter="{x:Reference otherItemInListView}"/>

一种解决方案可能是用另一个对象扩展命令参数，如果是这样，那如何实现？不过，最好有另一种解决方案。

【问题讨论】：

添加一个公共事件处理程序（或操作，这就是我将使用的）并让“视图”（即您的案例中的页面）生命周期从 ViewModel 和您的ReadMoreIconVisibility 属性的设置器让它执行该操作（如果已分配）。页面上的动作当然会在执行时启动 Lottie 动画。
private bool _ReadMoreIconVisibiliy; public bool ReadMoreIconVisibiliy { get { return _ReadMoreIconVisibiliy; } set { // Execute action here? this._ReadMoreIconVisibiliy = value; RaisePropertyChanged("ReadMoreIconVisibiliy"); } }
当我在 cmets 中发布代码时看起来不太好：/ 但是在 setter 中执行操作，我怎么知道它来自我的 bool 的确切动画视图是什么？因为我的列表视图中有几个
不是修复，而是一种解决方法 - 使用消息中心在您的视图中订阅一条消息，当收到调用 AnimationView.Play() 时，单击按钮时从您的视图模型发送一条消息。

标签： c# xaml xamarin xamarin.forms lottie

【解决方案1】：

这是一个老问题，但如果有人遇到同样的问题，我会发布这个答案。

为了在不破坏 MVVM 模式的情况下将 Lottie 与 Xamarin Forms 一起使用，使用 ViewModel 中的绑定来启动和停止动画，您需要做的是创建两个触发动作，一个播放动画，一个重置进度为 0 然后暂停动画。或者你可以创建一个触发器来检查

然后在您的 ViewModel 中创建一个 bool 属性，当您想要开始导航时设置为 true，当您想要停止导航时设置为 false。在您的情况下，它是 ReadMoreIconVisibiliy。

然后在您的 xaml 中使用触发器，请参见下面的代码。

<lottieForms:AnimationView
Animation="load_complete.json"
Speed="1"
AutoPlay="False">
    <lottieForms:AnimationView.Triggers>
        <MultiTrigger TargetType="lottieForms:AnimationView">
            <MultiTrigger.Conditions>
                <BindingCondition Binding="{Binding ReadMoreIconVisibiliy}" Value="True" />
            </MultiTrigger.Conditions>
            <MultiTrigger.EnterActions>
                <actions:StartLottieAnimationTriggerAction />
            </MultiTrigger.EnterActions>
            <MultiTrigger.ExitActions>
                <actions:StopLottieAnimationTriggerAction />
            </MultiTrigger.ExitActions>
        </MultiTrigger>
    </lottieForms:AnimationView.Triggers>
</lottieForms:AnimationView>

StartLottieAnimationTriggerAction代码

public class StartLottieAnimationTriggerAction : TriggerAction<AnimationView>
{
    protected override void Invoke(AnimationView sender)
    {
        sender.PlayAnimation();
    }
}

StopLottieAnimationTriggerAction代码

public class StopLottieAnimationTriggerAction : TriggerAction<AnimationView>
{
    protected override void Invoke(AnimationView sender)
    {
        sender.Progress = 0;
        sender.PauseAnimation();
    }
}

【讨论】：