通过在 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屋！