如何在 MVVM 架构中使用 LottieForms 绑定动画视图播放? [英] How to bind animationview play with LottieForms in a MVVM architecture?

问题描述

所以我在列表视图中使用动画，我想随时播放一次，所以我想控制它.

So i work with a animation in a listview and i want to play it once whenever i want, so i want to control it.

这是图书馆 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 时才可用.

I can successfully work with my xaml to hide/not hide my animation. But how do i reach the AnimationView.Play() method, that is only available if i name my label x:name.

我如何利用 mvvm 架构来Play我的动画?

How can i take advantage of the mvvm archictect in order to Playmy animation?

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

I cannot work with the commandparameter because it is already used by another item in the same listview:

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

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

One solution could be to extend the commandparameter with another object, if so how is that achievable? Preferably there is another solution to this though.

推荐答案

这是一个老问题，但我发布了这个答案，以防有人遇到同样的问题.

This is an old question but I am posting this answer in case anyone is facing the same problem.

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

What you have to do in order to use Lottie with Xamarin Forms without breaking the MVVM pattern, using a Binding from the ViewModel to start and stop the animation, is creating two trigger actions, one that plays the animation and one that resets the progress to 0 then pauses the animation. Or you can create one trigger that check

然后在您的 ViewModel 中创建一个 bool 属性，该属性在您要开始导航时设置为 true，而在您要停止时设置为 false.就您而言，它是 ReadMoreIconVisibiliy.

Then in your ViewModel create a bool property that is set to true when you want to start the navigation and false when you want to stop. In your case it's ReadMoreIconVisibiliy.

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

Then in your xaml consume the trigger, see code below.

<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();
    }
}

这篇关于如何在 MVVM 架构中使用 LottieForms 绑定动画视图播放?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！