How to bind animationview play with LottieForms in a MVVM architecture?

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/LottieXama

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