WPF-通过路径AND分步对对象进行动画处理 [英] WPF - Animate objects through path AND in steps
问题描述
我需要逐步通过路径为UIElement设置动画.案例是:模拟一条生产线，该生产线使动画对象前进但在离散位置停止.一个路径必须是一个圆，另一个路径必须是一个看起来像高零的闭合路径.
我想到的第一个解决方案是在情节提要板中使用DoubleAnimationUsingPath.这对任何路径都非常有用.问题是我找不到定期进步的方法.动画类中有PauseStoryboard和ResumeStoryboard，但是当完成路径的1/10(假设有10个步骤)时，如何调用它们?
对于类似的事情，PointAnimationUsingKeyFrames看起来像解决方案，但是我找不到用关键帧实现它的简单方法.
有什么建议?预先感谢.
I need to animate UIElements through a path, in steps. The case is: simulate a manufacturing line, that advances animated objects but stops at discrete positions. One path must be a circle and the other a closed path that looks like a tall zero.
The first solution I thought of was using DoubleAnimationUsingPath inside a Storyboard. This is great for any path. The problem is I can''t find a way to make advancements in regular steps. There''s PauseStoryboard and ResumeStoryboard in Animation class, but how can I call them when, let''s say 1/10th (let''s suppose 10 steps) of the path has been done?
For something like that, PointAnimationUsingKeyFrames looks like the solution, but I can''t find a simple way to implement it with keyframes.
Any suggestions? Thanks in advance.
推荐答案
您可以将路径划分为一些小路径，并对每个小路径使用
DoubleAnimationUsingPath.要在每个步骤之后暂停，可以设置 BeginTime 动画的属性.
You can divide your path to some little pathes and, use
DoubleAnimationUsingPathfor each little path. For pausing after each step, you can set the BeginTime property of the animations appropriately.
例如，请参见以下Grid:
<Grid>
<Grid.Resources>
<PathGeometry x:Key="path1"
Figures="M0,0 L10,10 C20,100 30,10 60,120 C30,130 20,170 120,175" />
<PathGeometry x:Key="path2"
Figures="M120,175 C130,150 140,180 160,130 C170,150 175,170 190,120 C200,80 200,60 40,40" />
<Storyboard x:Key="sb1">
<DoubleAnimationUsingPath Storyboard.TargetName="rectTranslateTransform"
Storyboard.TargetProperty="X"
PathGeometry="{StaticResource path1}"
Source="X"
Duration="0:0:2" />
<DoubleAnimationUsingPath Storyboard.TargetName="rectTranslateTransform"
Storyboard.TargetProperty="Y"
PathGeometry="{StaticResource path1}"
Source="Y"
Duration="0:0:2" />
<DoubleAnimationUsingPath Storyboard.TargetName="rectTranslateTransform"
Storyboard.TargetProperty="X"
PathGeometry="{StaticResource path2}"
Source="X"
Duration="0:0:2"
BeginTime="0:0:3"/>
<DoubleAnimationUsingPath Storyboard.TargetName="rectTranslateTransform"
Storyboard.TargetProperty="Y"
PathGeometry="{StaticResource path2}"
Source="Y"
Duration="0:0:2"
BeginTime="0:0:3"/>
</Storyboard>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Path Data="M0,0 L10,10 C20,100 30,10 60,120 C30,130 20,170 120,175" Stroke="Green" StrokeThickness="2" />
<Path Data="M120,175 C130,150 140,180 160,130 C170,150 175,170 190,120 C200,80 200,60 40,40" Stroke="Blue" StrokeThickness="2" />
<Canvas>
<Rectangle Fill="Red"
Stroke="DarkRed" StrokeThickness="1"
Height="15" Width="15"
Canvas.Left="0" Canvas.Top="0"
x:Name="rect1" >
<Rectangle.RenderTransform>
<TranslateTransform x:Name="rectTranslateTransform" />
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
<Button Content="Animate" Grid.Row="1">
<Button.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click">
<BeginStoryboard Storyboard="{StaticResource sb1}" />
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>在此Grid中，有一个Rectangle在路径的第一部分动画2秒，暂停1秒，在路径的第二部分动画2秒.
In this Grid there is a Rectangle that is animated 2 seconds on the 1st part of the path, paused for 1 second and, animated 2 seconds on the 2nd part of the path.
很好的解决方案，Shmuel.但是，我必须根据外部事件推进每个步骤，因此无法通过XAML或代码设置BeginTime.到目前为止，我正在处理多个情节提要，每个情节提要代表一个步骤.在每个事件中，我依次调用这些故事板.该解决方案与您的解决方案相似，但是具有多个Storyboard，使用1个DoubleAnimationUsingPath for X和1个DoubleAnimationUsingPath forY.Lemme向您展示:
Nice solution, Shmuel. However, I must advance each step based on external events, so I can''t set BeginTime from XAML nor code. So far, I''m working with multiple storyboards, each one representing one step. On each event, I call these storyboards sequentially. The solution is similar to yours, but with multiple Storyboards using 1 DoubleAnimationUsingPath for X and 1 DoubleAnimationUsingPath for Y. Lemme show you:
<page>
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<grid>
<grid.resources>
<pathgeometry x:key="path1" xmlns:x="#unknown">
Figures="M0,0 L10,10 C20,100 30,10 60,120 C30,130 20,170 120,175" />
<pathgeometry x:key="path2">
Figures="M120,175 C130,150 140,180 160,130 C170,150 175,170 190,120 C200,80 200,60 40,40" />
<storyboard x:key="sb1">
<doubleanimationusingpath storyboard.targetname="rectTranslateTransform">
Storyboard.TargetProperty="X"
PathGeometry="{StaticResource path1}"
Source="X"
Duration="0:0:2" />
<doubleanimationusingpath storyboard.targetname="rectTranslateTransform">
Storyboard.TargetProperty="Y"
PathGeometry="{StaticResource path1}"
Source="Y"
Duration="0:0:2" />
</doubleanimationusingpath></doubleanimationusingpath></storyboard>
<storyboard x:key="sb2">
<doubleanimationusingpath storyboard.targetname="rectTranslateTransform">
Storyboard.TargetProperty="X"
PathGeometry="{StaticResource path2}"
Source="X"
Duration="0:0:2"/>
<doubleanimationusingpath storyboard.targetname="rectTranslateTransform">
Storyboard.TargetProperty="Y"
PathGeometry="{StaticResource path2}"
Source="Y"
Duration="0:0:2"/>
</doubleanimationusingpath></doubleanimationusingpath></storyboard>
</pathgeometry></pathgeometry></grid.resources>
<grid.rowdefinitions>
<rowdefinition />
<rowdefinition height="Auto" />
<rowdefinition height="Auto" />
</grid.rowdefinitions>
<path data="M0,0 L10,10 C20,100 30,10 60,120 C30,130 20,170 120,175" stroke="Green" strokethickness="2" />
<path data="M120,175 C130,150 140,180 160,130 C170,150 175,170 190,120 C200,80 200,60 40,40" stroke="Blue" strokethickness="2" />
<canvas>
<rectangle fill="Red">
Stroke="DarkRed" StrokeThickness="1"
Height="15" Width="15"
Canvas.Left="0" Canvas.Top="0"
x:Name="rect1" >
<rectangle.rendertransform>
<translatetransform x:name="rectTranslateTransform" xmlns:x="#unknown" />
</rectangle.rendertransform>
</rectangle>
</canvas>
<button content="Animate 1" grid.row="1">
<button.triggers>
<eventtrigger routedevent="ButtonBase.Click">
<beginstoryboard storyboard="{StaticResource sb1}" />
</eventtrigger>
</button.triggers>
</button>
<button content="Animate 2" grid.row="2">
<button.triggers>
<eventtrigger routedevent="ButtonBase.Click">
<beginstoryboard storyboard="{StaticResource sb2}" />
</eventtrigger>
</button.triggers>
</button>
</grid>
</page>
I preciate your work. I still think maybe there''s a better solution. Time will tell.
I preciate your work. I still think maybe there''s a better solution. Time will tell.
这篇关于WPF-通过路径AND分步对对象进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
