Динамически перемещать объект на холсте

Question

Сценарий выглядит следующим образом.

У меня есть холст, по которому я хочу переместиться, скажем, через прямоугольник по экрану. Способ, которым прямоугольник должен двигаться, определяется одним указанным c путем (подобно железной дороге, прямоугольник должен двигаться только по рельсам). Положение, в котором в данный момент расположен прямоугольник, обеспечивается внешним источником.

Текущее местоположение предоставляется каждые ~ 200-500 мс.

До сих пор я пробовал следующее:

• простой TranslateTransform. Делает трюк, но прямоугольник перепрыгивает с точки а на б. Нет плавного перевода.

• Раскадровка с двойной анимацией

Сглаживание, но прямоугольник не следует по требуемому пути.

• DoubleAnimationUsingPath. Прямоугольник движется по пути. Но теперь я не могу предоставить текущую позицию по внешнему источнику.

Для меня проще всего было бы использовать DoubleAnimationUsingPath и предоставлять координату X внешним источником.

Но я не уверен, что общие раскадровки и анимации - лучший способ решить эту проблему.

Если вам известен какой-то совершенно иной подход, я более чем рад услышать об этом.

Вид С уважением

Answer 1

Просто чтобы получить представление о том, что можно сделать с помощью анимации, взгляните на эту небольшую демонстрацию объекта, движущегося по дорожке:

<Canvas>
    <Canvas.Resources>
        <PathGeometry x:Key="track">
            <PathFigure StartPoint="200,100" IsClosed="True">
                <LineSegment Point="300,100"/>
                <ArcSegment SweepDirection="Clockwise"
                            Size="100,100" Point="300,300"/>
                <LineSegment Point="200,300"/>
                <ArcSegment SweepDirection="Clockwise"
                            Size="100,100" Point="200,100"/>
            </PathFigure>
        </PathGeometry>
    </Canvas.Resources>

    <Canvas.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <MatrixAnimationUsingPath
                        Storyboard.TargetName="train"
                        Storyboard.TargetProperty="RenderTransform.Matrix"
                        PathGeometry="{StaticResource track}"
                        DoesRotateWithTangent="True"
                        Duration="0:0:10"
                        RepeatBehavior="Forever"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Canvas.Triggers>

    <Path Data="{StaticResource track}" Stroke="Black"
          StrokeThickness="6"/>
    <Path Data="{StaticResource track}" Stroke="White"
          StrokeThickness="4" StrokeDashArray="2,2"/>

    <Rectangle x:Name="train" Width="10" Height="6" Fill="Red"
               Canvas.Left="-5" Canvas.Top="-3"
               RenderTransformOrigin="0.5,0.5">
        <Rectangle.RenderTransform>
            <MatrixTransform />
        </Rectangle.RenderTransform>
    </Rectangle>
</Canvas>