Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it Possible to animate path.Data

Tags:

c#

wpf

xaml

I have code something like this:

<Path x:Name="arrow" StrokeThickness="3" Stroke="Black"  Data="M34,115 C45,106 91,119 105,112 119,105 172,75.004352 188,82.003591" />

what I want is to animate the Data property of the path. I'm searching this from last two days didn't find a solution. what I actually want is to show path bit by bit.

Does anyone have any Idea?

like image 952
tabby Avatar asked Dec 19 '22 17:12

tabby


1 Answers

"what I actually want is to show path bit by bit"

Do you mean something like this?

<Grid VerticalAlignment="Center" HorizontalAlignment="Center" >
    <Grid.Resources>
        <Storyboard x:Key="CWTrace">
            <!-- To run opposite direction, just swap the 'From' and 'To' values. -->
            <DoubleAnimation BeginTime="00:00:0.5" RepeatBehavior="Forever"
                         Storyboard.TargetName="arrow" 
                         Storyboard.TargetProperty="StrokeDashOffset" 
                         Duration="0:0:5" From="100" To="0"/>
        </Storyboard>
    </Grid.Resources>
    <Grid.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource CWTrace}"/>
        </EventTrigger>
    </Grid.Triggers>
    <Path x:Name="arrow" 
          StrokeDashOffset="0" StrokeDashArray="100"
          StrokeThickness="3" Stroke="Black"  
          Data="M34,115 C45,106 91,119 105,112 119,105 172,75.004352 188,82.003591"/>
</Grid>

enter image description here

Obviously remove the RepeatBehavior for a one time anim, and tinker with values to get exactly what you're after. Cheers.

like image 93
Chris W. Avatar answered Dec 28 '22 23:12

Chris W.