WPF Animation.
-
I have two sahpes created using Path which has Data Property. One Path is smaller and the other is Larger. I want to animate smaller Path and make it look like larger path. Please suggest me how to do this. Path 1 : path strokethickness="2.000000" stroke="#000000" fill="#000000" data="F1 M 148.692383,566.845703 L 198.179199,566.845703 L 197.963867,545.753906 L 197.757324,525.583984 L 138.201660,525.583984 C 138.201660,525.583984 139.660156,534.376953 141.660156,541.126953 C 143.660156,547.876953 148.692383,566.845703 148.692383,566.845703 Z" width="87.077" stretch="Fill" Path 2 : path strokethickness="2.000000" stroke="#000000" fill="#000000" data="F1 M 200.701172,444.335938 C 200.701172,444.335938 201.902344,454.123047 201.902344,467.187500 C 201.902344,477.767578 201.246582,481.021484 199.109375,489.334961 L 129.755859,489.334961 C 124.140625,485.524414 120.946777,474.328125 120.035156,463.418945 C 119.187988,453.281250 124.750488,444.418945 124.750488,444.418945 L 200.701172,444.335938 Z" stretch="Fill" Thanks In advance.
-
I have two sahpes created using Path which has Data Property. One Path is smaller and the other is Larger. I want to animate smaller Path and make it look like larger path. Please suggest me how to do this. Path 1 : path strokethickness="2.000000" stroke="#000000" fill="#000000" data="F1 M 148.692383,566.845703 L 198.179199,566.845703 L 197.963867,545.753906 L 197.757324,525.583984 L 138.201660,525.583984 C 138.201660,525.583984 139.660156,534.376953 141.660156,541.126953 C 143.660156,547.876953 148.692383,566.845703 148.692383,566.845703 Z" width="87.077" stretch="Fill" Path 2 : path strokethickness="2.000000" stroke="#000000" fill="#000000" data="F1 M 200.701172,444.335938 C 200.701172,444.335938 201.902344,454.123047 201.902344,467.187500 C 201.902344,477.767578 201.246582,481.021484 199.109375,489.334961 L 129.755859,489.334961 C 124.140625,485.524414 120.946777,474.328125 120.035156,463.418945 C 119.187988,453.281250 124.750488,444.418945 124.750488,444.418945 L 200.701172,444.335938 Z" stretch="Fill" Thanks In advance.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="DemoAnim.Window1"
x:Name="Window"
Title="Window1"
Width="640" Height="480">
<Window.Resources>
<Storyboard x:Key="GrowEllipse">
<doubleanimationusingkeyframes begintime="00:00:00" storyboard.targetname="ellipse" storyboard.targetproperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" mode="hold" /> <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="1.643"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="1.643"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource GrowEllipse}"/>
</EventTrigger>
</Window.Triggers>
<Grid x:Name="LayoutRoot">
<Ellipse Fill="#FFFF0000" Stroke="#FF000000" Margin="176,127,0,214" StrokeThickness="5" Width="112" HorizontalAlignment="Left" x:Name="ellipse" RenderTransformOrigin="0.5,0.5">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>