如何在MVVM架构[Xamarin表单]中将动画视图播放与LottieForms绑定?

时间:2018-10-03 21:40:31

标签: c# xamarin xamarin.forms

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

这是图书馆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我的动画?

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

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

一个解决方案可能是用另一个对象扩展commandparameter,如果可以的话,那怎么实现?最好有另一种解决方案。

1 个答案:

答案 0 :(得分:5)

这是一个古老的问题,但是如果有人遇到相同的问题,我会发布此答案。

要在不破坏MVVM模式的情况下将Lottie与Xamarin Forms结合使用,使用ViewModel的Binding来启动和停止动画,您要做的就是创建两个触发动作,一个触发动画,另一个触发重置进度为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.Play();
    }
}

StopLottieAnimationTriggerAction 代码

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