3

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

我有故事板：

            <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();
    }

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

4

1 回答 1

4

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

Storyboard.TargetName="image"

然后我也认为单个故事板可能无法同时用于两个目标元素，因此解决方案是将其放在 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();
}
于 2012-12-19T17:59:35.583 回答