故事板动画无法更改TargetNameProperty

Question

我正在使用C＃

在VS2012中为Windows Phone 8.0开发应用程序

有16张图片，我想做一个淡入淡出动画 - 当用户点击Size和Opacity属性>上面

但Storyboard一次只定位一张图片，因此我需要更改每个TargetNameProperty Storyboard的{​​{1}}，这就是我的意思

根据MSDN：Working with Animations Programmatically

部分：动态更改TargetName

我的代码：

  

XAML

Tap Event

  

C＃

 <Storyboard x:Name="FadeAnim">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="lt1">
            <EasingDoubleKeyFrame KeyTime="0" Value="53"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="20"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="lt1">
            <EasingDoubleKeyFrame KeyTime="0" Value="53"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="20"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="lt1">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="16"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames  Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="lt1">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="20"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames  Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="lt1">
            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>

        <Image x:Name="lt2" HorizontalAlignment="Left" Height="53" Margin="59,1,0,0" VerticalAlignment="Top" Width="53" Source="/Assets/Letters/b.png" Tap="lt_Tap" Visibility="Collapsed"/>
        <Image x:Name="lt1" HorizontalAlignment="Left" Height="53" Margin="1,1,0,0" VerticalAlignment="Top" Width="53" Source="/Assets/Letters/a.png" Tap="lt_Tap" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed">
            <Image.RenderTransform>
                <CompositeTransform/>
            </Image.RenderTransform>
        </Image>
        <Image x:Name="lt4" HorizontalAlignment="Left" Height="53" Margin="112,1,0,0" VerticalAlignment="Top" Width="53" Source="/Assets/Letters/c.png" Tap="lt_Tap" Visibility="Collapsed"/>
        <Image x:Name="lt3" HorizontalAlignment="Left" Height="53" Margin="171,1,0,0" VerticalAlignment="Top" Width="53" Source="/Assets/Letters/d.png" Tap="lt_Tap" Visibility="Collapsed"/>
        <Image x:Name="lt5" HorizontalAlignment="Left" Height="53" Margin="224,1,0,0" VerticalAlignment="Top" Width="53" Source="/Assets/Letters/e.png" Tap="lt_Tap" Visibility="Collapsed"/>
        <Image x:Name="lt6" HorizontalAlignment="Left" Height="53" Margin="283,1,0,0" VerticalAlignment="Top" Width="54" Source="/Assets/Letters/f.png" Tap="lt_Tap" Visibility="Collapsed"/>
.
.
.
.

问题：无论我点击什么图像，它都会播放第一张图片的动画。

Answer 1

每个Image都需要自己的RenderTransform才能分别为它们制作动画。所以你必须将这段代码添加到所有图像中：

<Image.RenderTransform> 
    <CompositeTransform/> 
</Image.RenderTransform>

此外，当您将动画绑定到不同的图像时，只需引用图像本身而不是使用名称，就可以更简单。

Image img = sender as Image;
if (img != null)
{
    FadeAnim.Stop(); // Stop previous animation
    Storyboard.SetTarget(FadeAnim, img);
    FadeAnim.Begin();
}