如何在MVVM架构中将animationview play与LottieForms绑定?

2024-04-29

所以我在列表视图中处理动画,并且我想随时播放一次,所以我想控制它。

这是图书馆https://github.com/martijn00/LottieXamarin 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 架构师来Play我的动画?

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

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

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


这是一个老问题,但我发布这个答案以防有人面临同样的问题。

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

然后在 ViewModel 中创建一个 bool 属性,当您想要开始导航时将其设置为 true,当您想要停止导航时将其设置为 false。在你的情况下是了解更多图标Visibiliy.

然后在你的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>

开始LottieAnimationTriggerAction Code

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

停止LottieAnimationTriggerAction Code

public class StopLottieAnimationTriggerAction : TriggerAction<AnimationView>
{
    protected override void Invoke(AnimationView sender)
    {
        sender.Progress = 0;
        sender.PauseAnimation();
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在MVVM架构中将animationview play与LottieForms绑定? 的相关文章

随机推荐