我需要在WPF中创建一个涉及图像的相当复杂的动画,其中图像必须沿着圆形路径移动 . Here is a picture of what it looks like...
这是我的xaml:
<ControlTemplate x:Key="ValveStyle" TargetType="{x:Type CheckBox}">
<ControlTemplate.Resources>
<PathGeometry x:Key="CirclePathGeometry" PresentationOptions:Freeze="True">
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="340,120">
<PathFigure.Segments>
<PathSegmentCollection>
<ArcSegment Size="100,50" RotationAngle="0" IsLargeArc="False" SweepDirection="CounterClockwise"
Point="-30,120" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</ControlTemplate.Resources>
<Viewbox Stretch="Uniform">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00.2000000" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Checked">
<Storyboard>
<!--DoubleAnimationUsingPath BeginTime="00:00:00" Storyboard.TargetName="image3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Source="X"
DoubleAnimationUsingPath.PathGeometry="{StaticResource CirclePathGeometry}" />
<DoubleAnimationUsingPath BeginTime="00:00:00" Storyboard.TargetName="image3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Source="Y"
DoubleAnimationUsingPath.PathGeometry="{StaticResource CirclePathGeometry}" /-->
<MatrixAnimationUsingPath Storyboard.TargetName="Image3MatrixTransform" Storyboard.TargetProperty="Matrix"
MatrixAnimationUsingPath.PathGeometry="{StaticResource CirclePathGeometry}" />
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000"
Storyboard.TargetName="image1"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="-90" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000"
Storyboard.TargetName="image2"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="-90" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000"
Storyboard.TargetName="image"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="-90" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<VisualStateManager.CustomVisualStateManager>
<ic:ExtendedVisualStateManager />
</VisualStateManager.CustomVisualStateManager>
<Canvas Width="685" Height="527">
<Image Source="/VT;component/Images/Valve121.1-Base.png" Stretch="Fill" />
<Image x:Name="image" Source="/VT;component/Images/Valve121.1-LeftBar1.png" Stretch="Fill"
Canvas.Left="61.991" Canvas.Top="49.329" RenderTransformOrigin="0.286,0.5428">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform />
<TranslateTransform />
</TransformGroup>
</Image.RenderTransform>
</Image>
<Image x:Name="image2" Source="/VT;component/Images/Valve121.1-RightBar.png" Stretch="Fill"
Canvas.Left="436.491" Canvas.Top="49.388" RenderTransformOrigin="0.249,0.756">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform />
<TranslateTransform />
</TransformGroup>
</Image.RenderTransform>
</Image>
<Image x:Name="image3" Source="/VT;component/Images/Valve121.1-HzBar.png" Stretch="Fill"
Canvas.Left="277.491" Canvas.Top="58.345">
<Image.RenderTransform>
<MatrixTransform x:Name="Image3MatrixTransform" />
</Image.RenderTransform>
</Image>
<Image Source="/VT;component/Images/Valve121.1-Overlay.png" Stretch="Fill" />
<Image x:Name="image1" Source="/VT;component/Images/Valve121.1-LeftBar2.png" Stretch="Fill"
Canvas.Left="129.824" Canvas.Top="24.661" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform />
<TranslateTransform />
</TransformGroup>
</Image.RenderTransform>
</Image>
<Path Stroke="Blue" StrokeThickness="10" RenderTransformOrigin="-0.333,-0.227">
<Path.Data>
<PathGeometry>
<PathFigureCollection>
<PathFigure StartPoint="340,120">
<PathFigure.Segments>
<PathSegmentCollection>
<ArcSegment Size="100,50" RotationAngle="0" IsLargeArc="False" SweepDirection="CounterClockwise"
Point="-30,120" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry>
</Path.Data>
</Path>
</Canvas>
</Viewbox>
</ControlTemplate>
我面临几个问题:
-
图像(图像3)似乎沿着我设置的路径没有正确移动,所以我猜我在那里弄错了...
-
完成所有其他动画后,图像(image3)的动画开始 . 我希望所有的动画都能同时开始 .
我已经尝试了 DoubleAnimationUsingPath
和 MatrixAnimationUsingPath
但它们都没有按我想要的方式工作 . 是否可以混合关键帧动画和路径动画?
是否可以在WPF中进行这样的动画?如果是这样,我怎么能做到这一点?
2 回答
按如下方式定义
MainWindow
(或Page
)类:然后在codebehind中定义Button_Click事件处理程序:
它将精确地沿着定义的圆弧段(即圆的一半)制作10×10椭圆的动画 .
希望这可以帮助 .
我有同样的情况 . 尤金的例子非常有帮助 . 我略微扩展它以形成完整的圆圈: