c# - 在 Windows 8 中重用动画

Question

我正在构建 Windows 应用商店应用程序(Winrt、Metro、Windows 8 应用程序)。我尝试在 gridview 动画中提供图像:从网络加载图像并打开它后，它会填充其单元格。

我有 Storyboard:

            <Storyboard x:Name="PopupImageStoryboard">
                <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="image">
                    <EasingDoubleKeyFrame KeyTime="0" Value="100"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="240"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="image">
                    <EasingDoubleKeyFrame KeyTime="0" Value="100"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="240"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

我有这样的 C# 代码来处理图像加载和打开的事件:

    private void Image_ImageOpened(object sender, RoutedEventArgs e)
    {
        Storyboard.SetTarget(PopupImageStoryboard, sender as Image);
        PopupImageStoryboard.Begin();
    }

它不起作用，我无法更改目标并在它运行时重新运行相同的 Storyboard 。但我希望多个图像同时运行此动画。您能推荐任何动画重用解决方案吗？

Answer 1

您应该从每个子动画中删除它:

Storyboard.TargetName="image"

然后我认为一个 Storyboard 可能无法同时用于两个目标元素，因此解决方案是将它放在 DataTemplate 中，例如

<Page.Resources>
    <DataTemplate
        x:Name="myStoryboard">
        <Storyboard ... />
    </DataTemplate>
</Page.Resources>

然后在代码中你会说

var sb = (Storyboard)myStoryboard.LoadContent();
Storyboard.SetTarget(sb, sender as Image);
sb.Begin();

顺便说一句 - 不要为 Width 和 Height 属性设置动画。在您的情况下，这几乎肯定不是最好的主意。您应该为您的 RenderTransform 属性设置动画，例如针对 ScaleTransform 的 ScaleX 和 ScaleY 属性。如果动画是依赖的 - 它会导致每帧中的布局更新，这是非常低效的并且会降低动画帧速率。

*编辑

更好的解决方案如下所示:

<Page.Resources>
    <DataTemplate
        x:Name="myStoryboardTemplate">
        <Storyboard>
            <DoubleAnimation
                Storyboard.TargetProperty="ScaleX"
                From="0.5"
                To="1.0"
                Duration="0:0:0.4">
                <DoubleAnimation.EasingFunction>
                    <BackEase
                        Amplitude="2"
                        EasingMode="EaseOut"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation
                Storyboard.TargetProperty="ScaleY"
                From="0.5"
                To="1.0"
                Duration="0:0:0.4">
                <DoubleAnimation.EasingFunction>
                    <BackEase
                        Amplitude="2"
                        EasingMode="EaseOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </DataTemplate>
</Page.Resources>

...

<Image
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Width="620"
    Height="300"
    Source="Assets/SplashScreen.png"
    RenderTransformOrigin="0.5,0.5"
    Stretch="Fill">
    <Image.RenderTransform>
        <ScaleTransform
            x:Name="imageScaleTransform" />
    </Image.RenderTransform>
</Image>

...

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    var sb = (Storyboard)myStoryboardTemplate.LoadContent();
    Storyboard.SetTarget(sb, imageScaleTransform);
    sb.Begin();
}