CODEWITHSUNDEEP
c#wpfanimation
user785286
user785286

Reputation: 43

How to animate multiple Path elements in WPF

I have a collection of glyphs that are in form of WPF <Path> elements.

Something like this:

<Grid>
    <Path Data="..." Height="33.333" Stretch="Fill" Width="33.334"/>
    <Path Data="..." Height="33.333" Stretch="Fill" Width="33.334"/>
    <Path Data="..." Height="33.333" Stretch="Fill" Width="33.334"/>
    <Path Data="..." Height="33.333" Stretch="Fill" Width="33.334"/>
</Grid>

These are just image or icon glyphs. I'm trying to find a way to switch or flip between these various Path elements so that it looks like an animation. I'm pretty new to WPF and have tried looking for examples but couldn't find anything similar here or elsewhere on the web. The closest example I found was erasing one <Image> element with another using Storyboard and DoubleAnimation but I can't figure out how to apply it to <Path>.

I'm basically trying to find a way to show one path element and hide all other paths, wait a second, show next path element and hide all other, and so on, to make it look like a flip animation.

I would appreciate if someone can post a simple example or point me in the right direction. Thanks.

Upvotes: 1

Views: 1529

Answers (1)

Arian Motamedi
Arian Motamedi

Reputation: 7423

Alright give this a try. Note that each Path will get its own Storyboard. So if you have 4 Paths, you get 4 Storyboards.

<Path>
    <Path.Style>
        <Style TargetType="{x:Type Path}">
            <Setter Property="Opacity" Value="0"/>
            <Style.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" 
                                             From="0" 
                                             To="1" 
                                             Duration="00:00:1"
                                             BeginTime="00:00:1" 
                                             AutoReverse="True"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Path.Style>
</Path>
<Path>
    <Path.Style>
        <Style TargetType="{x:Type Path}">
            <Setter Property="Opacity" Value="0"/>
            <Style.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" 
                                             From="0" To="1" 
                                             Duration="00:00:1" 
                                             BeginTime="00:00:2"
                                             AutoReverse="True"/>

                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Path.Style>
</Path>
<Path>
    <Path.Style>
        <Style TargetType="{x:Type Path}">
            <Setter Property="Opacity" Value="0"/>
            <Style.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" 
                                             From="0" To="1"
                                             Duration="00:00:1"
                                             BeginTime="00:00:3"
                                             AutoReverse="True"/>

                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Path.Style>
</Path>
<Path>
    <Path.Style>
        <Style TargetType="{x:Type Path}">
            <Setter Property="Opacity" Value="0"/>
            <Style.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                             From="0" 
                                             To="1" 
                                             Duration="00:00:1"
                                             BeginTime="00:00:4" 
                                             AutoReverse="True"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Path.Style>
</Path>

Notice how we're using the FrameworkElement.Loaded event to trigger the animation. You can use this event on virtually any UI element. Each storyboard changes the opacity from 0 (invisible) to 1 (completely visible) in 1 second (you can change this using the Duration property). Also, the BeginTime property is different for each storyboard, this is required to make sure the items are animated one after another. Finally, we set the AutoReverse property to make sure the Paths are disappeared (i.e. the animation is reversed). This should give you the idea.

Upvotes: 2

Related Questions