情节提要动画无法更改目标名称属性

本文关键字：目标 属性 动画 | 更新日期: 2024-11-08 12:41:37

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

有 16 张图片，我想做一个淡入淡出动画 - 当用户点击每张图片时减少Size和Opacity属性

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

根据 MSDN：以编程方式使用动画

部分 ： 动态更改目标名称

我的代码：

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

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

情节提要动画无法更改目标名称属性

每个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();
}
相关文章：