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

Question

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.

This is the library https://github.com/martijn00/LottieXamarin

I have a class:

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

And xaml:

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

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 .

How can i take advantage of the mvvm archictect in order to Play my 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.

Answer 1

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

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

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 .

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 Code

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

StopLottieAnimationTriggerAction Code

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