通过在 WPF 中移动时在路径旁边克隆对象来创建运动路径是否可行? [英] Is it doable to create motion path by cloning object alongside the path while moving in WPF?
问题描述
我可以创建动画来创建沿运动路径移动的对象.但我想知道,是否可以通过克隆自身来拥有多个对象/路径,例如移动?
I can create animation to create an object to move along the motion path. But I wonder, is it doable to have multiple object/path like moving by cloning itself?
假设这是我的地图:-
我想从当前位置去游乐场.我有一条路径并将其指定为我的对象(导航箭头)沿着线路径移动的运动路径.出于好奇,我希望它如下所示:-
I want to go from current location to the playground. I have a path and assign it to be motion path for my object(navigation arrow) to move alongside the line path. And for the curiosity, I want it to be like below:-
目前,使用运动路径,箭头可以在单个对象中移动:-
Currently, using the motion path, the arrow can moving in single object:-
更新代码:
<Grid>
<Path x:Name="SuperPath" Stroke="Black">
<Path.Data>
<PathGeometry Figures="M277,66 C277,66 427,87 447,153 466,219 396,241 397,297 399,352 439,376 439,376" />
</Path.Data>
</Path>
<Path
x:Name="Arrowhead"
Width="23"
Height="19.5"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Data="M94,29 L117,39 95,49 99,38 z"
Fill="#ff387cc0"
Stretch="Fill">
<Path.RenderTransform>
<TransformGroup>
<TranslateTransform X="-10" Y="-10" />
<MatrixTransform x:Name="rectangleTransform">
<MatrixTransform.Matrix>
<Matrix />
</MatrixTransform.Matrix>
</MatrixTransform>
</TransformGroup>
</Path.RenderTransform>
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard>
<Storyboard>
<MatrixAnimationUsingPath
DoesRotateWithTangent="True"
RepeatBehavior="Forever"
Storyboard.TargetName="rectangleTransform"
Storyboard.TargetProperty="Matrix"
Duration="00:00:3">
<MatrixAnimationUsingPath.PathGeometry>
<PathGeometry PresentationOptions:Freeze="True" Figures="M277,66 C277,66 427,87 447,153 466,219 396,241 397,297 399,352 439,376 439,376" />
</MatrixAnimationUsingPath.PathGeometry>
</MatrixAnimationUsingPath>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
</Grid>
每次箭头穿过路径时,它如何像导航路径一样留下箭头路径的副本,因此它将是例如 30 箭头,沿着路径路径之间的距离.
How do each time arrowhead moving through path, it can leave a copy of the arrow trail like a navigation trail so it will be something for example 30 arrowhead with distance between it along the trail path.
推荐答案
首先,稍微简化一下 XAML:
First of all, simplify the XAML a bit:
<Canvas x:Name="canvas">
<Canvas.Resources>
<PathGeometry
x:Key="pathToFollow"
Figures="M73.517,48.931 C73.517,48.931 253.690,80.828 245.931,161.000 C238.172,241.172 114.897,261.000 221.793,350.655"/>
<Storyboard x:Key="arrowheadAnimation">
<MatrixAnimationUsingPath
Storyboard.TargetName="arrowhead"
Storyboard.TargetProperty="RenderTransform.Matrix"
PathGeometry="{StaticResource pathToFollow}"
DoesRotateWithTangent="True"
Duration="0:0:5"/>
</Storyboard>
</Canvas.Resources>
<Path Data="{StaticResource pathToFollow}"
Stroke="#ff818181" StrokeThickness="6.0" StrokeDashArray="4.33"
StrokeStartLineCap="Round" StrokeEndLineCap="Round"/>
<Path x:Name="arrowhead"
Data="M0,0 L-10,-10 30,0 -10,10 Z"
Fill="#ff387cc0">
<Path.RenderTransform>
<MatrixTransform/>
</Path.RenderTransform>
</Path>
</Canvas>
现在可能有以下代码在 Loaded 事件处理程序中启动动画.此外,它还创建了一个计时器,在特定时间创建箭头的副本.
Now there may be the following code behind that starts the animation in a Loaded event handler. In addition, it creates a timer that creates copies of the arrow head at certain times.
private readonly Storyboard storyboard;
private readonly DispatcherTimer timer;
public MainWindow()
{
InitializeComponent();
storyboard = (Storyboard)canvas.Resources["arrowheadAnimation"];
timer = new DispatcherTimer { Interval = TimeSpan.FromSeconds(0.5) };
timer.Tick += OnTimerTick;
Loaded += OnWindowLoaded;
}
private void OnWindowLoaded(object sender, RoutedEventArgs e)
{
storyboard = (Storyboard)Resources["arrowheadAnimation"];
storyboard.Begin();
timer.Start();
}
private void OnTimerTick(object sender, EventArgs e)
{
if (storyboard.GetCurrentState() != ClockState.Active)
{
timer.Stop();
return;
}
var transform = (MatrixTransform)arrowhead.RenderTransform;
var arrowheadCopy = new Path
{
Data = arrowhead.Data,
Fill = arrowhead.Fill,
RenderTransform = new MatrixTransform(transform.Matrix)
};
canvas.Children.Add(arrowheadCopy);
}
这篇关于通过在 WPF 中移动时在路径旁边克隆对象来创建运动路径是否可行?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!