在Windows 8中重复使用动画

Question

我正在构建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(); 
    } 

它不工作，我不能改变目标和在运行时重新运行相同的故事板。但我想让多个图像同时运行这个动画。你能推荐任何动画重用的解决方案吗？也

Storyboard.TargetName="image" 

那么我想一个故事板可能无法将在同一时间两个靶材元件使用，所以该解决方案：

Answer 1

你应该从每个子动画删除此将它放在DataTemplate中，例如

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

然后在代码中，你会说

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

BTW - 不要动画宽度和高度属性。这在你的情况下几乎肯定不是最好的主意。您应该改变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(); 
}