WinRT Xaml 故事板

Question

每当我执行 SwapImages.Begin();从 C# 文件中没有任何反应。有人可以告诉我下面的代码可能有什么问题吗？

    <Storyboard x:Name="SwapImages" >
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Width)" Storyboard.TargetName="Image" >
            <EasingDoubleKeyFrame KeyTime="0" Value="300" />
            <EasingDoubleKeyFrame KeyTime="0:0:5" Value="0" />
        </DoubleAnimationUsingKeyFrames>

        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Width)" Storyboard.TargetName="Image2" >
            <EasingDoubleKeyFrame KeyTime="0" Value="0" />
            <EasingDoubleKeyFrame KeyTime="0:0:5" Value="300" />
        </DoubleAnimationUsingKeyFrames>

        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.HorizontalAlignment)" Storyboard.TargetName="Image">
            <DiscreteObjectKeyFrame KeyTime="00:00:7">
                <DiscreteObjectKeyFrame.Value>
                    <HorizontalAlignment>Right</HorizontalAlignment>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>

        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.HorizontalAlignment)" Storyboard.TargetName="Image2">
            <DiscreteObjectKeyFrame KeyTime="00:00:7">
                <DiscreteObjectKeyFrame.Value>
                    <HorizontalAlignment>Left</HorizontalAlignment>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>

Answer 1

我不认为你可以为对齐属性设置动画（根据这个问题here）你可以尝试按照链接问题中的评论所说的做，把你的两个图像放在画布上，然后在那里操作 x 和 y来自代码隐藏的坐标

Answer 2

这是我在 MainPage.xaml 和你的故事板中编写的代码，我确实得到了输出。

<Page
x:Class="TestApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:data="using:TestApp">
<Page.Resources>
    <Storyboard x:Name="SwapImages" >
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Width)" Storyboard.TargetName="Image" >
            <EasingDoubleKeyFrame KeyTime="0" Value="300" />
            <EasingDoubleKeyFrame KeyTime="0:0:5" Value="0" />
        </DoubleAnimationUsingKeyFrames>

        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Width)" Storyboard.TargetName="Image2" >
            <EasingDoubleKeyFrame KeyTime="0" Value="0" />
            <EasingDoubleKeyFrame KeyTime="0:0:5" Value="300" />
        </DoubleAnimationUsingKeyFrames>

        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.HorizontalAlignment)" Storyboard.TargetName="Image">
            <DiscreteObjectKeyFrame KeyTime="00:00:7">
                <DiscreteObjectKeyFrame.Value>
                    <HorizontalAlignment>Right</HorizontalAlignment>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>

        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.HorizontalAlignment)" Storyboard.TargetName="Image2">
            <DiscreteObjectKeyFrame KeyTime="00:00:7">
                <DiscreteObjectKeyFrame.Value>
                    <HorizontalAlignment>Left</HorizontalAlignment>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</Page.Resources>
<Grid >
    <Rectangle Fill="Red" Height="100" Margin="430,237,0,0" Stroke="Black" Name="Image" VerticalAlignment="Top" Width="100"/>
    <Rectangle Fill="Green" Loaded="Image2_Loaded_1" Height="100" Margin="922,212,0,0" Stroke="Black" VerticalAlignment="Top" Width="100" Name="Image2"/>
</Grid></Page>

这是上述 xaml 背后的代码

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();

    }

    /// <summary>
    /// Invoked when this page is about to be displayed in a Frame.
    /// </summary>
    /// <param name="e">Event data that describes how this page was reached.  The Parameter
    /// property is typically used to configure the page.</param>
    protected async override void OnNavigatedTo(NavigationEventArgs e)
    {

    }

    private void Image2_Loaded_1(object sender, RoutedEventArgs e)
    {
        SwapImages.Begin();
    }
}

它工作得很好，唯一的一点是我在元素加载到屏幕后触发的加载事件中编写了SwapImages.Begin(); 方法。

您可能会误会的另一件事是动画对齐并不意味着您会从左到右平滑过渡。对齐总是相对于父容器，并且可以有几组值。因此，如果您想要平滑过渡，请尝试为其他属性设置动画，例如画布 X、Y 等。