Trigger animation from ViewModel

[Genfood]

trafficstars

Is it possible to start the animation from the ViewModel?

[Strypper]

@jsuarezruiz ?

[jsuarezruiz]

You can create a trigger with a Command BindableProperty, bind the command and init the animation. Similar to https://github.com/jsuarezruiz/AlohaKit.Animations/blob/main/src/AlohaKit.Animations/Triggers/BeginAnimation.cs, but with one command. We can add it to the library. ​

[Strypper]

Can you help us provide a small example?

We still don't understand what you are describing.

[hiroian]

Cab you help us with an example, im also looking for a way to start an animation at the opening of a page without a trigger or a scroll.

[lukewire129]

@hiroian Take a look at the example below and give it a try!

https://github.com/jsuarezruiz/AlohaKit.Animations/assets/54387261/7c057dc2-ed8e-422f-91a9-305c8771d5c9

    <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:alohakit="clr-namespace:AlohaKit.Animations;assembly=AlohaKit.Animations"
             x:Class="PageLoadAnimation.MainPage">
    <ContentPage.Resources>
        <alohakit:ScaleToAnimation
            x:Key="ScaleToAnimation"
            Target="{x:Reference ImageBot}"
            Duration="10000"
            Scale="2.0"/>
    </ContentPage.Resources>
    <ContentPage.Triggers>
        <EventTrigger Event="Loaded">
            <alohakit:BeginAnimation
                Animation="{StaticResource ScaleToAnimation}" />
        </EventTrigger>
    </ContentPage.Triggers>
    <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="25">
            <Image
                x:Name="ImageBot"
                Source="dotnet_bot.png"
                HeightRequest="185"
                Aspect="AspectFit"
                SemanticProperties.Description="dot net bot in a race car number eight" />

            <Label
                Text="Hello, World!"
                Style="{StaticResource Headline}"
                SemanticProperties.HeadingLevel="Level1" />

            <Label
                Text="Welcome to &#10;.NET Multi-platform App UI"
                Style="{StaticResource SubHeadline}"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to dot net Multi platform App U I" />

            <Button
                x:Name="CounterBtn"
                Text="Click me" 
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Fill"/>
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

[hiroian]

Thanks @lukewire129 ! Exactly what i was looking for! Already implementing it in my project! 😃