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