Mega Code Archive

 

Categories / Silverlight / Animations

 

Use PointUsingKeyframes

<UserControl x:Class='SilverlightApplication3.MainPage'     xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'      xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'     xmlns:d='http://schemas.microsoft.com/expression/blend/2008'      xmlns:mc='http://schemas.openxmlformats.org/markup-compatibility/2006'      mc:Ignorable='d'      d:DesignWidth='640' d:DesignHeight='480'>     <UserControl.Resources>         <Storyboard x:Name="MovePointDown">             <PointAnimationUsingKeyFrames Storyboard.TargetName="RedPath" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(BezierSegment.Point2)" BeginTime="00:00:00">                 <SplinePointKeyFrame KeyTime="00:00:00.5" Value="155,263"/>             </PointAnimationUsingKeyFrames>             <PointAnimationUsingKeyFrames Storyboard.TargetName="RedPath" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(BezierSegment.Point3)" BeginTime="00:00:00">                 <SplinePointKeyFrame KeyTime="00:00:00.5" Value="100,263"/>             </PointAnimationUsingKeyFrames>             <PointAnimationUsingKeyFrames Storyboard.TargetName="RedPath" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(BezierSegment.Point1)" BeginTime="00:00:00">                 <SplinePointKeyFrame KeyTime="00:00:00.5" Value="44,263"/>             </PointAnimationUsingKeyFrames>         </Storyboard>     </UserControl.Resources>     <Canvas x:Name="LayoutRoot" Background="White" >         <Path Height="263" Width="200" Canvas.Left="295" Canvas.Top="207" Fill="#FFFF0000" Stretch="None" x:Name="RedPath">             <Path.Data>                 <PathGeometry>                     <PathFigure IsClosed="True" StartPoint="200,100">                         <BezierSegment Point1="200,155" Point2="155,200" Point3="100,200"/>                         <BezierSegment Point1="44,200" Point2="110,155" Point3="1110,100"/>                         <BezierSegment Point1="10,44" Point2="44,0" Point3="100,0"/>                         <BezierSegment Point1="155,0" Point2="200,44" Point3="200,100"/>                     </PathFigure>                 </PathGeometry>             </Path.Data>         </Path>     </Canvas> </UserControl>