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.

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 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.

回答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.Play();
    }
}

StopLottieAnimationTriggerAction Code

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

来源：https://stackoverflow.com/questions/52636061/how-to-bind-animationview-play-with-lottieforms-in-a-mvvm-architecture

标签

xaml

Xamarin

xamarin.forms

lottie