UWP Как оживить движение?

Question

У меня есть метод, который анимирует положение маркера на настольной игре. Если игроки бросают кости, и кости возвращают 4, то маркер перемещается в определенную позицию на доске. Анимация работает отлично.

Однако маркер движется по прямой линии - я бы хотел, чтобы маркер перемещался по всей позиции, пока не достигнет конечной позиции.

Вот мой int [,]

this.Path = new int[,] { { 0, 0 },{ 40, 50 }, { 95, 45 }, {130,0 }, { 110,-60 }, { 60, -100 }, { 0,-140 }, { -40, -200 }, { -30,-280 }};

Содержит позиции X и Y относительно начальной позиции (поля).

И метод анимации - как я могу изменить его, чтобы игрок бросал, например. 2 он должен анимировать позиции 0 и 1 в массиве.

 private void AnimatePlayerMovement(Player player, int eyes)
        {
            //This will hold hour animation
            Piece.RenderTransform = new CompositeTransform();

            //New storyboard
            Storyboard storyboard = new Storyboard();

            //New DoubleAnimation - Y
            DoubleAnimation translateYAnimation = new DoubleAnimation();
            translateYAnimation.From = this.Path[player.position - eyes , 1];
            translateYAnimation.To = this.Path[player.position , 1];

            translateYAnimation.EasingFunction = new ExponentialEase();
            translateYAnimation.EasingFunction.EasingMode = EasingMode.EaseOut;
            translateYAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(500));
            Storyboard.SetTarget(translateYAnimation, Piece);
            Storyboard.SetTargetProperty(translateYAnimation, "(UIElement.RenderTransform).(CompositeTransform.TranslateY)");
            storyboard.Children.Add(translateYAnimation);

            //New DoubleAnimation - X 
            DoubleAnimation translateXAnimation = new DoubleAnimation();

            translateXAnimation.From = this.Path[player.position - eyes, 0];
            translateXAnimation.To = this.Path[player.position, 0];

            //translateXAnimation.From = this.Path[player.position - eyes, 0];
            //translateXAnimation.To = this.Path[player.position, 0];
            translateXAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(500));

            Storyboard.SetTarget(translateXAnimation, Piece);
            Storyboard.SetTargetProperty(translateXAnimation, "(UIElement.RenderTransform).(CompositeTransform.TranslateX)");

            storyboard.Children.Add(translateXAnimation);

            //executing the storyboard
            storyboard.Begin();

        }

Answer 1

Ну, вот уродливое решение.Он будет воспроизводить анимацию последовательно, один за другим.

Давайте предположим, что маркер равен Rectangle, поэтому мы добавим к нему TranslateX и TranslateY:

<Page.Resources>
    <Storyboard x:Name="PathAnimationStory" 
                Completed="Story_Completed">

        <DoubleAnimation x:Name="anim_x" 
                         Duration="0:0:0.5"
                         Storyboard.TargetName="TargetTranform"
                         Storyboard.TargetProperty="X"/>
        <DoubleAnimation x:Name="anim_y" 
                         Duration="0:0:0.5"
                         Storyboard.TargetName="TargetTranform"
                         Storyboard.TargetProperty="Y"/>
    </Storyboard>
</Page.Resources>

<Rectangle
    Width="50"
    Height="50"
    Fill="Red"
    HorizontalAlignment="Left"
    VerticalAlignment="Top">

    <Rectangle.RenderTransform>
        <TranslateTransform x:Name="TargetTranform" X="0" Y="0"/>
    </Rectangle.RenderTransform>
</Rectangle>

Обратите внимание на событие Completed, обработанное в Storyboard.Нам нужно связать анимацию.Чтобы сделать это, обработайте событие Completed, когда анимация остановится, он проверит, пройдут ли другие точки и снова запустит анимацию, если таковые имеются:

private void MoveMarker(params double[] co_ordinates)
{
    PathAnimationStory.Stop();

    if (co_ordinates.Length == 0)
        return;
    /// the number of co_ordinates must be even
    if (co_ordinates.Length % 2 == 1)
        return;

    Co_ordinates = co_ordinates;
    remaining_nodes = co_ordinates.Length / 2;

    Story_Completed(default, default);
}

private void Story_Completed(object sender, object e)
{
    if(remaining_nodes > 0)
    {
        int next_node = Co_ordinates.Length / 2 - remaining_nodes;
        anim_x.To = Co_ordinates[2 * next_node];
        anim_y.To = Co_ordinates[2 * next_node + 1];
        remaining_nodes--;

        PathAnimationStory.Begin();
    }
}

Все сделано, теперь давайте проверимнаш код:

MoveMarker(100, 0, 100, 100, 0, 100, 100, 0);

дает такой вывод:

Что, я думаю, несколько соответствует вашим требованиям.Надеюсь, это поможет.