Animating a fade in from left

Craig Muckleston 161

I have the following Path:

    <Path x:Name="cameraWestPath" StrokeThickness="1" Fill="Green" RenderTransformOrigin="0.46,0.61"  Visibility="Visible" Opacity="0">
        <Path.RenderTransform>
            <CompositeTransform Rotation="315"/>
        </Path.RenderTransform>
        <Path.Data>
            <PathGeometry>
                <PathGeometry.Figures>
                    <PathFigure StartPoint="0,45" >
                        <PathFigure.Segments>
                            <ArcSegment Size="45,45" RotationAngle="45" IsLargeArc="False" SweepDirection="Clockwise" Point="45,0"/>
                            <LineSegment Point="45,45"/>
                            <LineSegment Point="0,45"/>
                        </PathFigure.Segments>
                    </PathFigure >
                </PathGeometry.Figures>
            </PathGeometry>
        </Path.Data>
    </Path>

What I want to do is fade this path in from left right in a Storyboard, but I'm not sure how I can achieve it.

Andy ONeill 361 Reputation points

2020-10-14T14:31:43.17+00:00

If I follow what you mean by fade. You can animate a gradientstop from 1 to 0 on a lineargradientbrush.
You can have 3 gradientstops, say transparent, green and green.
The last 2 start at 1 and the middle greens animates from 1 to 0.

Does that sound like what you want to achieve?
Craig Muckleston 161 Reputation points

2020-10-14T14:46:38.87+00:00

Hi Andy, you mean like this?
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Transparent" Offset="0"/>
<GradientStop Color="Green" Offset="1"/>
<GradientStop Color="Green" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
Andy ONeill 361 Reputation points

2020-10-14T15:35:29.733+00:00

Yes. Or something along those lines.
Animate Offset on the middle one to 0 so you have a gradient moves right to left until you get a solid green.
Roy Li - MSFT 32,051 Reputation points Microsoft Vendor

2020-10-20T08:42:25.57+00:00

@Craig Muckleston I haven't heard from you for a while. Does @Richard 's reply make sense?
Richard Zhang-MSFT 6,936 Reputation points

2020-10-23T08:54:23.48+00:00

Hello @Craig Muckleston , has your problem been resolved? If you have other questions, please feel free to ask.

1 answer

Richard Zhang-MSFT 6,936

Hello,

Welcome to Microsoft Q&A.

What I want to do is fade this path in from left right in a Storyboard, but I'm not sure how I can achieve it.

According to your needs, the effect requires two variables to control, one is Opacity (from 0 to 1) and the other is TranslateX (from left to right)

Here is a sample:

PathPage.xaml

   <Page.Resources>  
       <Storyboard x:Name="PathInAnimation">  
           <DoubleAnimation From="0"  
                            To="1"  
                            Duration="00:00:00.5"  
                            Storyboard.TargetName="cameraWestPath"  
                            Storyboard.TargetProperty="Opacity"  
                            >  
               <DoubleAnimation.EasingFunction>  
                   <PowerEase EasingMode="EaseOut"></PowerEase>  
               </DoubleAnimation.EasingFunction>  
           </DoubleAnimation>  
           <DoubleAnimation From="-45"  
                            To="0"  
                            Duration="00:00:00.5"  
                            Storyboard.TargetName="cameraWestPath"  
                            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"  
                            >  
               <DoubleAnimation.EasingFunction>  
                   <PowerEase EasingMode="EaseOut"></PowerEase>  
               </DoubleAnimation.EasingFunction>  
           </DoubleAnimation>  
       </Storyboard>  
   </Page.Resources>  
     
   <Grid>  
       <Grid.RowDefinitions>  
           <RowDefinition Height="*"/>  
           <RowDefinition Height="Auto"/>  
       </Grid.RowDefinitions>  
       <Path x:Name="cameraWestPath" StrokeThickness="1" Fill="Green" RenderTransformOrigin="0.46,0.61"  Visibility="Visible" Opacity="0">  
           <Path.RenderTransform>  
               <CompositeTransform TranslateX="-45" Rotation="315"/>  
           </Path.RenderTransform>  
           <Path.Data>  
               <PathGeometry>  
                   <PathGeometry.Figures>  
                       <PathFigure StartPoint="0,45" >  
                           <PathFigure.Segments>  
                               <ArcSegment Size="45,45" RotationAngle="45" IsLargeArc="False" SweepDirection="Clockwise" Point="45,0"/>  
                               <LineSegment Point="45,45"/>  
                               <LineSegment Point="0,45"/>  
                           </PathFigure.Segments>  
                       </PathFigure >  
                   </PathGeometry.Figures>  
               </PathGeometry>  
           </Path.Data>  
       </Path>  
     
       <Button x:Name="ShowButton" Click="ShowButton_Click" Grid.Row="1"  
               Content="Start Animation"/>  
   </Grid>

PathPage.xaml.cs

   private void ShowButton_Click(object sender, RoutedEventArgs e)  
   {  
       PathInAnimation.Begin();  
   }

Thanks.

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.