Блог

У меня есть маленькая кнопка, которая должна настраиваться по вертикали и горизонтали. Я хотел бы использовать раскадровку и манипулировать X и Y в разделе transform.

И я хотел бы сделать это с помощью кода.

Кнопка перемещается в правильное положение, но анимация не активна.

 private void AnimatePlayerMovement(Player player)
{
    //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.from, 1];
    translateYAnimation.To = this.Path[player.to, 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.from, 0];
    translateXAnimation.To = this.Path[player.to, 0];
    translateXAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(500));

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

    storyboard.Children.Add(translateXAnimation);

    storyboard.Begin();

}
  

И кнопка в xaml

 <Button x:Name="Piece" Height="50" Width="50" HorizontalAlignment="Left" 
        Margin="115,400,0,0" VerticalAlignment="Top" Click="Button_Click" 
        RenderTransformOrigin="0.5,0.5">
    <Button.Template>
        <ControlTemplate>
            <Image Source="Assets/piece.png"/>
        </ControlTemplate>
    </Button.Template>
</Button>
  

Я протестировал ваш код, и анимация работает должным образом. Вы можете найти рабочий репозиторий на GitHub. Поскольку код является копией вашего примера почти в соотношении 1: 1, за исключением того, что я жестко закодировал From и To значения свойств анимаций. Таким образом, я думаю, проблема, которую вы видите, заключается в том, что this.Path[player.from, 0] и this.Path[player.to, 0] значения одинаковы (или очень похожи). Таким образом, кнопка переходит в this.Path[player.from, 0] местоположение и остается там, не перемещаясь дальше.