如何在 C#/XAML 的单个情节提要中执行多个动画? [英] How can I do multiple animations in a single storyboard in C#/XAML?

问题描述

我正在尝试使用 C# 和 XAML 制作一个简单的 Windows 应用商店游戏，该游戏涉及移动的六边形瓷砖.这主要是为了帮助我学习 C# 和 XAML，因为我以前从未使用过图形甚至 UI 编码.

I'm trying to make a simple Windows Store game in C# and XAML, one that involves hexagonal tiles moving about. This is mostly to help me learn C# and XAML as I've never worked with graphics or even UI coding before.

我有一种方法可以将单个十六进制移动到目标坐标，但是现在查看它我意识到不可能一次进行多个移动，这是绝对必要的.

I've got a method that can move a single hex to the target coordinates, but looking at it now I realize that it is impossible to do multiple moves at once, which is absolutely necessary.

我觉得我的方法必须有一些根本性的东西，在一个画布上移动的多个对象不可能是一件不寻常的事情，不是吗?我主要是问这个，希望有人能指出我哪里出错了.

I feel like there's got to be something fundamentally off in my approach, multiple objects moving about a single canvas cannot be an unusual thing, can it? I'm mostly asking this in the hope that someone will point out where I went wrong.

    //moves the hex hexName to coordinates x, y, over a specified duration.
    public void slideHex(int x, int y, string hexName, Duration duration)
    {

        GameStoryboard.Stop();

        Polygon hex = GameCanvas.FindName(hexName) as Polygon;



        TranslateTransform slideTransform = new TranslateTransform();
        slideTransform.X = hex.RenderTransformOrigin.X;
        slideTransform.Y = hex.RenderTransformOrigin.Y;

        hex.RenderTransform = slideTransform;

        DoubleAnimation animX = new DoubleAnimation();
        DoubleAnimation animY = new DoubleAnimation();

        animX.Duration = duration;
        animY.Duration = duration;

        GameStoryboard.Duration = duration;
        GameStoryboard.Children.Add(animX);
        GameStoryboard.Children.Add(animY);

        Storyboard.SetTarget(animX, slideTransform);
        Storyboard.SetTarget(animY, slideTransform);

        Storyboard.SetTargetProperty(animX, "X");
        Storyboard.SetTargetProperty(animY, "Y");

        animX.To = x;
        animY.To = y;

        GameStoryboard.Begin();

    }

推荐答案

一个故事板可以包含多个动画，每个动画可以针对不同的 UI 元素.下面是一个故事板的例子，它脉冲"三个不同控件的边框颜色:

A storyboard can contain multiple animations, and each animation can target a different UI element. Here's an example of a storyboard which "pulses" the border colours of three different controls:

<Storyboard x:Name="pulseAnimation" AutoReverse="True">
    <ColorAnimation x:Name="animateLatitudeTextBoxBorderColour" Storyboard.TargetName="textBoxLatitude" From="{StaticResource PhoneTextBoxColor}" To="Green" Storyboard.TargetProperty="(TextBox.BorderBrush).(SolidColorBrush.Color)" Duration="0:0:0.4" />
    <ColorAnimation x:Name="animateLongitudeTextBoxBorderColour" Storyboard.TargetName="textBoxLongitude" From="{StaticResource PhoneTextBoxColor}" To="Green" Storyboard.TargetProperty="(TextBox.BorderBrush).(SolidColorBrush.Color)" Duration="0:0:0.4" />
    <ColorAnimation x:Name="animateHyperlinkTextColour" Storyboard.TargetName="hyperlinkButtonCurrentLocation" From="{StaticResource PhoneForegroundColor}" To="Green" Storyboard.TargetProperty="(HyperlinkButton.Foreground).(SolidColorBrush.Color)" Duration="0:0:0.4" />
</Storyboard>

您的代码看起来不错 - 您已经在为 slideTransform 的多个属性设置动画，并且由于动画的目标是动画的属性而不是故事板，因此您没有理由不能't 将 animX 或 animY 重定向到完全不同的对象.

Your code looks fine - you're already animating multiple properties of slideTransform, and since the target of an animation is a property of the animation rather than the storyboard, there's no reason why you couldn't retarget either animX or animY to a different object altogether.

这篇关于如何在 C#/XAML 的单个情节提要中执行多个动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！