CODEWITHSUNDEEP
c#wpfwpf-animation
Adassko
Adassko

Reputation: 5343

Path stroke animation in direction of path

I'd like to create a glimmer animation on path's stroke in the direction of the path

My code looks like this:

<Path StrokeThickness="2">
    <Path.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard Duration="0:0:3" RepeatBehavior="Forever">
                    <DoubleAnimation 
                        Storyboard.TargetName="firstGradientStop" 
                        Storyboard.TargetProperty="Offset" 
                        From="-0.2" To="1.0" Duration="0:0:2" />
                    <DoubleAnimation 
                        Storyboard.TargetName="middleGradientStop" 
                        Storyboard.TargetProperty="Offset" 
                        From="-0.1" To="1.1" Duration="0:0:2" />
                    <DoubleAnimation 
                        Storyboard.TargetName="lastGradientStop" 
                        Storyboard.TargetProperty="Offset" 
                        From="0" To="1.2" Duration="0:0:2" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Path.Triggers>
    <Path.Stroke>
        <LinearGradientBrush>
            <GradientStop Color="#80000000" x:Name="firstGradientStop" Offset="0.4" />
            <GradientStop Color="White" x:Name="middleGradientStop" Offset="0.5" />
            <GradientStop Color="#80000000" x:Name="lastGradientStop" Offset="0.6" />
        </LinearGradientBrush>
     </Path.Stroke>
     <Path.Data>
        <!-- dynamic data here, sample path below -->
        <GeometryGroup>
            <LineGeometry StartPoint="0,0" EndPoint="100,100" />
            <LineGeometry StartPoint="100,100" EndPoint="200,100" />
        </GeometryGroup>
    </Path.Data>
</Path>

the problem is that the animation is independent of the direction of path and I need the glow to go in the direction from StartPoint to EndPoint. Is this achievable?

Upvotes: 1

Views: 508

Answers (1)

Vladimir Mezentsev
Vladimir Mezentsev

Reputation: 918

You can use StartPoint and EndPoint of linearGradientBrush, something like that (play with values, so you can rotate angle of gradient like you want whenever you want):

<PointAnimation 
                    Storyboard.TargetName="Brush" 
                    Storyboard.TargetProperty="StartPoint" 
                    From="0,0" To="0.5,0" Duration="0:0:1.5" />
                        <PointAnimation 
                    Storyboard.TargetName="Brush" 
                    Storyboard.TargetProperty="EndPoint" 
                    From="1,1" To="0.5,1" Duration="0:0:1.5" />

But it's not a solution for complex dynamic path. (And that's limitations of stroke cause it's nothing more than background and you can't glimmer with it self-intersecting paths) If you need more, then create a simple UserControl that will represent just a straight line with proper animation. After that you need to add that controls(with proper rotateTransform) to canvas from codeBehind iterating by path structure and set needed storyboards timeline. That would be a complete solution.

Upvotes: 2

Related Questions