Animating arc size

Question

I have the following control that has 2 Paths. A ;cone shape' (path1) and and an arc (path2). When my storyboard starts, I am setting the TranslateX of path2 (my arc) to move across my 'cone shape' (path1). This works well. However, I want to animate my arc's (path2) size, so that it looks like it stays within the bounds of the 'cone shape' (path1), from 0 to whatever I want (say 60)

<UserControl x:Name="userControl"
x:Class="App.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="150"
d:DesignWidth="150">
<UserControl.Resources>

    <Storyboard x:Name="Storyboard1">
        <DoubleAnimation From="0"
                     To="-60"
                     Duration="00:00:01"
                     Storyboard.TargetName="path2"
                     Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">
            <DoubleAnimation.EasingFunction>
                <PowerEase EasingMode="EaseInOut"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="path2" Storyboard.TargetProperty="(UIElement.Opacity)">
            <EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>


</UserControl.Resources>

<Grid x:Name="grid" Visibility="Visible">
    <Path x:Name="path1"  HorizontalAlignment="Center" VerticalAlignment="Center"
              Stroke="Blue" StrokeThickness="1" Fill="Blue" 
              RenderTransformOrigin="-0.11,0.79"  Visibility="Visible">
        <Path.RenderTransform>
            <CompositeTransform Rotation="315"/>
        </Path.RenderTransform>
        <Path.Data>
            <PathGeometry>
                <PathGeometry.Figures>
                    <PathFigure StartPoint="0,45" >
                        <PathFigure.Segments>
                            <ArcSegment Size="75,75" RotationAngle="45" IsLargeArc="False" SweepDirection="Clockwise" Point="45,0"/>
                            <LineSegment Point="75,75"/>
                            <LineSegment Point="0,45"/>
                        </PathFigure.Segments>
                    </PathFigure >
                </PathGeometry.Figures>
            </PathGeometry>
        </Path.Data>
    </Path>
    <Path Width="50" Height="50" x:Name="path2" Fill="Transparent" Stroke="Red" StrokeThickness="2" Opacity="1">
        <Path.RenderTransform>
            <CompositeTransform Rotation="315"/>
        </Path.RenderTransform>
        <Path.Data>
            <PathGeometry>
                <PathGeometry.Figures>
                    <PathFigure StartPoint="0,45" >
                        <PathFigure.Segments>
                            <ArcSegment x:Name="arc" Size="75,75" RotationAngle="45" IsLargeArc="False" SweepDirection="Clockwise" Point="45,0"/>
                        </PathFigure.Segments>
                    </PathFigure >
                </PathGeometry.Figures>
            </PathGeometry>
        </Path.Data>
    </Path>
</Grid>

</UserControl>

Answer 1

Hello,

Welcome to Microsoft Q&A.

You seem to want to create a wave-like animation. If the arc changes from small to large, I suggest you use CompositeTransform.ScaleX and CompositeTransform.ScaleY to scale the arc instead of directly modifying the Size property of the arc.

   <Storyboard x:Name="Storyboard1">  
     
       <DoubleAnimation From="60"  
                 To="-60"  
                 Duration="00:00:01"  
                 Storyboard.TargetName="path2"  
                 Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">  
           <DoubleAnimation.EasingFunction>  
               <PowerEase EasingMode="EaseInOut"/>  
           </DoubleAnimation.EasingFunction>  
       </DoubleAnimation>  
     
       <DoubleAnimation From="0"  
                 To="1"  
                 Duration="00:00:01"  
                 Storyboard.TargetName="path2"  
                 Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)">  
           <DoubleAnimation.EasingFunction>  
               <PowerEase EasingMode="EaseInOut"/>  
           </DoubleAnimation.EasingFunction>  
       </DoubleAnimation>  
     
       <DoubleAnimation From="0"  
                 To="1"  
                 Duration="00:00:01"  
                 Storyboard.TargetName="path2"  
                 Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)">  
           <DoubleAnimation.EasingFunction>  
               <PowerEase EasingMode="EaseInOut"/>  
           </DoubleAnimation.EasingFunction>  
       </DoubleAnimation>  
     
       <DoubleAnimationUsingKeyFrames Storyboard.TargetName="path2" Storyboard.TargetProperty="(UIElement.Opacity)">  
           <EasingDoubleKeyFrame KeyTime="00:00:0.5" Value="1"/>  
           <EasingDoubleKeyFrame KeyTime="00:00:01" Value="0"/>  
       </DoubleAnimationUsingKeyFrames>  
     
   </Storyboard>  

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.