故事板动画无法更改 TargetNameProperty

Question

我正在使用 C# 在 VS2012 中为 Windows Phone 8.0 开发应用程序

有 16 张图片，我想做一个 Fade Animation - 当用户 在上面点击

但是 Storyboard 一次只针对 1 张图片，所以我需要更改每个 Storyboard 的 TargetNameProperty Tap Event，这就是我所做的

根据 MSDN：Working with Animations Programmatically

部分：动态更改目标名称

我的代码：

XAML

 <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"/>
.
.
.
.

C#

 private void img_Tap(object sender, System.Windows.Input.GestureEventArgs e)
        {
            Image img = sender as Image; 
            FadeAnim.SetValue(Storyboard.TargetNameProperty, img.Name);
            FadeAnim.Begin();     
        }

问题:无论我点击什么图片，它总是播放第一张图片的动画。

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

故事板动画无法更改 TargetNameProperty

Storyboard animation not able to change TargetNameProperty

c#

xaml

storyboard

windows-phone-8